From 4b515493c0854b46b84a5fc4448d72694b351440 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 22 Dec 2021 01:05:50 +0900 Subject: CSS Device Adaptation 関係の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@viewport/index.html | 131 ---------------------- files/ja/web/css/@viewport/index.md | 131 ++++++++++++++++++++++ files/ja/web/css/css_device_adaptation/index.html | 50 --------- files/ja/web/css/css_device_adaptation/index.md | 50 +++++++++ 4 files changed, 181 insertions(+), 181 deletions(-) delete mode 100644 files/ja/web/css/@viewport/index.html create mode 100644 files/ja/web/css/@viewport/index.md delete mode 100644 files/ja/web/css/css_device_adaptation/index.html create mode 100644 files/ja/web/css/css_device_adaptation/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/@viewport/index.html b/files/ja/web/css/@viewport/index.html deleted file mode 100644 index 168577a98c..0000000000 --- a/files/ja/web/css/@viewport/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: '@viewport' -slug: Web/CSS/@viewport -tags: - - '@viewport' - - At-rule - - CSS - - Experimental - - Layout - - Mobile - - Reference - - Screen Layout - - viewport -browser-compat: css.at-rules.viewport -translation_of: Web/CSS/@viewport ---- -
{{CSSRef}}{{deprecated_header}}
- -
-

注: https://github.com/w3c/csswg-drafts/issues/4766 に @viewport を標準路線から除外することに関する議論があります。

-
- -

@viewport は CSS のアット規則で、文書を通して表示するための{{glossary("viewport", "ビューポート")}}を構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。

- -

パーセント値で指定された長さは、初期ビューポートからの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。

- -

モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。

- -
@viewport {
-  width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
-}
-
- -
-

メモ: <meta name="viewport"> タグを使用すると、 @viewport より優先します。

-
- -

構文

- -

このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。

- -

1.0 または 100% のズーム倍率はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。

- -

記述子

- -

現時点では @viewport のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 @viewport は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。

- -
-
min-width
-
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
-
max-width
-
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
-
width
-
min-width と max-width の両方を設定するための一括指定です。
-
min-height
-
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
-
max-height
-
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
-
height
-
min-height と max-height の両方を設定するための一括指定です。
-
zoom
-
ズームの初期値を設定します。
-
min-zoom
-
ズームの最小値を設定します。
-
max-zoom
-
ズームの最大値を設定します。
-
user-zoom
-
ユーザーがズーム倍率を変更できるか否かを制御します。
-
orientation
-
文書の向きを制御します。
-
viewport-fit
-
長方形ではないディスプレイでの文書の表示を制御します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

ビューポートの大きさ、拡大率、向きの設定

- -
@viewport {
-  min-width: 640px;
-  max-width: 800px;
-}
-
-@viewport {
-  zoom: 0.75;
-  min-zoom: 0.5;
-  max-zoom: 0.9;
-}
-
-@viewport {
-  orientation: landscape;
-}
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}{{Spec2("CSS Round Display")}}viewport-fit 記述子を定義。
{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/css/@viewport/index.md b/files/ja/web/css/@viewport/index.md new file mode 100644 index 0000000000..168577a98c --- /dev/null +++ b/files/ja/web/css/@viewport/index.md @@ -0,0 +1,131 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - '@viewport' + - At-rule + - CSS + - Experimental + - Layout + - Mobile + - Reference + - Screen Layout + - viewport +browser-compat: css.at-rules.viewport +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}{{deprecated_header}}
+ +
+

注: https://github.com/w3c/csswg-drafts/issues/4766 に @viewport を標準路線から除外することに関する議論があります。

+
+ +

@viewport は CSS のアット規則で、文書を通して表示するための{{glossary("viewport", "ビューポート")}}を構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。

+ +

パーセント値で指定された長さは、初期ビューポートからの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。

+ +

モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。

+ +
@viewport {
+  width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
+}
+
+ +
+

メモ: <meta name="viewport"> タグを使用すると、 @viewport より優先します。

+
+ +

構文

+ +

このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。

+ +

1.0 または 100% のズーム倍率はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。

+ +

記述子

+ +

現時点では @viewport のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 @viewport は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。

+ +
+
min-width
+
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
+
max-width
+
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
+
width
+
min-width と max-width の両方を設定するための一括指定です。
+
min-height
+
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
+
max-height
+
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
+
height
+
min-height と max-height の両方を設定するための一括指定です。
+
zoom
+
ズームの初期値を設定します。
+
min-zoom
+
ズームの最小値を設定します。
+
max-zoom
+
ズームの最大値を設定します。
+
user-zoom
+
ユーザーがズーム倍率を変更できるか否かを制御します。
+
orientation
+
文書の向きを制御します。
+
viewport-fit
+
長方形ではないディスプレイでの文書の表示を制御します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

ビューポートの大きさ、拡大率、向きの設定

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}{{Spec2("CSS Round Display")}}viewport-fit 記述子を定義。
{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_device_adaptation/index.html b/files/ja/web/css/css_device_adaptation/index.html deleted file mode 100644 index f0e038a960..0000000000 --- a/files/ja/web/css/css_device_adaptation/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: CSS 端末適合 -slug: Web/CSS/CSS_Device_Adaptation -tags: - - CSS - - CSS 端末適合 - - リファレンス - - 概要 -translation_of: Web/CSS/CSS_Device_Adaptation ---- -
{{CSSRef}}
- -

CSS 端末適合 (CSS Device Adaptation) は CSS モジュールの一つで、ビューポートの寸法、拡大率、方向を定義することができるものです。

- -

リファレンス

- -

@-規則

- -
- -
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}}初回定義
- -

ブラウザーの対応

- -

@viewport 規則

- -
-

{{Compat("css.at-rules.viewport")}}

-
diff --git a/files/ja/web/css/css_device_adaptation/index.md b/files/ja/web/css/css_device_adaptation/index.md new file mode 100644 index 0000000000..f0e038a960 --- /dev/null +++ b/files/ja/web/css/css_device_adaptation/index.md @@ -0,0 +1,50 @@ +--- +title: CSS 端末適合 +slug: Web/CSS/CSS_Device_Adaptation +tags: + - CSS + - CSS 端末適合 + - リファレンス + - 概要 +translation_of: Web/CSS/CSS_Device_Adaptation +--- +
{{CSSRef}}
+ +

CSS 端末適合 (CSS Device Adaptation) は CSS モジュールの一つで、ビューポートの寸法、拡大率、方向を定義することができるものです。

+ +

リファレンス

+ +

@-規則

+ +
+ +
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}}初回定義
+ +

ブラウザーの対応

+ +

@viewport 規則

+ +
+

{{Compat("css.at-rules.viewport")}}

+
-- cgit v1.2.3-54-g00ecf