From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/@viewport/height/index.html | 85 +++++++++++++ files/ja/web/css/@viewport/index.html | 132 +++++++++++++++++++++ files/ja/web/css/@viewport/max-height/index.html | 76 ++++++++++++ files/ja/web/css/@viewport/max-zoom/index.html | 88 ++++++++++++++ files/ja/web/css/@viewport/min-zoom/index.html | 70 +++++++++++ files/ja/web/css/@viewport/viewport-fit/index.html | 77 ++++++++++++ files/ja/web/css/@viewport/zoom/index.html | 90 ++++++++++++++ 7 files changed, 618 insertions(+) create mode 100644 files/ja/web/css/@viewport/height/index.html create mode 100644 files/ja/web/css/@viewport/index.html create mode 100644 files/ja/web/css/@viewport/max-height/index.html create mode 100644 files/ja/web/css/@viewport/max-zoom/index.html create mode 100644 files/ja/web/css/@viewport/min-zoom/index.html create mode 100644 files/ja/web/css/@viewport/viewport-fit/index.html create mode 100644 files/ja/web/css/@viewport/zoom/index.html (limited to 'files/ja/web/css/@viewport') diff --git a/files/ja/web/css/@viewport/height/index.html b/files/ja/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..684d82b752 --- /dev/null +++ b/files/ja/web/css/@viewport/height/index.html @@ -0,0 +1,85 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

height は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。

+ +

ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。

+ +

構文

+ +
/* 1つの値 */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+
+ +

値

+ +
+
auto
+
使用値は他の CSS 記述子の値から計算されます。
+
<length>
+
負の数ではない絶対的または相対的な長さです。
+
<percentage>
+
拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

高さの最小値と最大値の設定

+ +
@viewport {
+  height: 500px;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/@viewport/index.html b/files/ja/web/css/@viewport/index.html new file mode 100644 index 0000000000..de6cfc815c --- /dev/null +++ b/files/ja/web/css/@viewport/index.html @@ -0,0 +1,132 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - '@viewport' + - At-rule + - CSS + - Experimental + - Layout + - Mobile + - Reference + - Screen Layout + - 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
+
文書の向きを制御します。
+
{{cssxref("@viewport/viewport-fit", "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")}}{{cssxref("@viewport/viewport-fit", "viewport-fit")}} 記述子を定義。
{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/@viewport/max-height/index.html b/files/ja/web/css/@viewport/max-height/index.html new file mode 100644 index 0000000000..35b966dced --- /dev/null +++ b/files/ja/web/css/@viewport/max-height/index.html @@ -0,0 +1,76 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

CSS の max-height 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。

+ +

最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。

+ +

{{cssinfo}}

+ +

構文

+ +
/* Keyword value */
+max-height: auto;
+
+/* <length> values */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* <percentage> value */
+max-height: 75%;
+ +

値

+ +
+
auto
+
使用する値は他の CSS 記述子の値から計算されます。
+
<length>
+
負ではない絶対値または相対値。
+
<percentage>
+
垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
@viewport {
+  max-height: 600px;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}{{Spec2('CSS3 Device')}}初期定義
+ +

ブラウザー実装状況

+ + + +

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

diff --git a/files/ja/web/css/@viewport/max-zoom/index.html b/files/ja/web/css/@viewport/max-zoom/index.html new file mode 100644 index 0000000000..e4938538fd --- /dev/null +++ b/files/ja/web/css/@viewport/max-zoom/index.html @@ -0,0 +1,88 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

min-zoom は CSS の記述子で、 {{cssxref("@viewport")}} アット規則で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。

+ +

表示倍率 が 1.0 または 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

構文

+ +
/* キーワード値 */
+max-zoom: auto;
+
+/* <number> 値 */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* <percentage> 値 */
+max-zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。
+
{{cssxref("<number>")}}
+
非負の数値で、表示倍率の上限です。
+
{{cssxref("<percentage>")}}
+
非負のパーセント値で、表示倍率の上限です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

max-zoom の設定

+ +
@viewport {
+  max-zoom: 1.5;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

See also

+ + diff --git a/files/ja/web/css/@viewport/min-zoom/index.html b/files/ja/web/css/@viewport/min-zoom/index.html new file mode 100644 index 0000000000..7890bffa6b --- /dev/null +++ b/files/ja/web/css/@viewport/min-zoom/index.html @@ -0,0 +1,70 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - '@viewport' + - CSS + - CSS 記述子 + - リファレンス +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

CSS の min-zoom 記述子は、 {{cssxref("@viewport")}} @-規則で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。

+ +

表示倍率 が 1.0 又は 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+min-zoom: auto;
+
+/* <number> 値 */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* <percentage> 値 */
+min-zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。
+
{{cssxref("<number>")}}
+
非負の数値で、表示倍率の下限です。
+
{{cssxref("<percentage>")}}
+
非負のパーセント値で、表示倍率の下限です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの対応

+ + + +

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

diff --git a/files/ja/web/css/@viewport/viewport-fit/index.html b/files/ja/web/css/@viewport/viewport-fit/index.html new file mode 100644 index 0000000000..8093487398 --- /dev/null +++ b/files/ja/web/css/@viewport/viewport-fit/index.html @@ -0,0 +1,77 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - CSS 記述子 + - Experimental + - Reference + - モバイル + - 画面レイアウト +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

CSS の viewport-fit {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。

+ +

構文

+ +
/* キーワード値 */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+
+ +

値

+ +
+
auto
+
この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。
+
contain
+
ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。
+
cover
+
ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、安全領域差し込み変数を使用するために強く推奨されます。
+
+ +

形式文法

+ +
auto | contain | cover
+
+ + + +

アクセシビリティの考慮事項

+ +

viewport-fit 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、安全領域差し込み変数を使用してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/@viewport/zoom/index.html b/files/ja/web/css/@viewport/zoom/index.html new file mode 100644 index 0000000000..72405334b6 --- /dev/null +++ b/files/ja/web/css/@viewport/zoom/index.html @@ -0,0 +1,90 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

zoom は CSS の記述子で、 {{cssxref("@viewport")}} アット規則で定義された文書の表示倍率の初期値を設定します。

+ +

表示倍率 が 1.0 または 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

構文

+ +
/* キーワード値 */
+zoom: auto;
+
+/* <number> 値 */
+zoom: 0.8;
+zoom: 2.0;
+
+/* <percentage> 値 */
+zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。
+
{{cssxref("<number>")}}
+
表示倍率として使われる非負の数値です。
+
{{cssxref("<percentage>")}}
+
表示倍率として使われる非負のパーセント値です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ビューポートの zoom 係数の設定

+ +
@viewport {
+  zoom: 2.0;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf