From 1a429bb492407e98dce1765a6dce06397531bad4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 22 Dec 2021 01:19:35 +0900 Subject: 2021/08/24 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@viewport/index.md | 171 +++++++++++++++--------------------- 1 file changed, 73 insertions(+), 98 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/@viewport/index.md b/files/ja/web/css/@viewport/index.md index 168577a98c..965ecea48a 100644 --- a/files/ja/web/css/@viewport/index.md +++ b/files/ja/web/css/@viewport/index.md @@ -3,84 +3,80 @@ 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}}
+{{CSSRef}}{{deprecated_header}} -
-

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

-
+> **Note:** に @viewport を標準化路線から除外することに関する議論があります。 -

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

+**`@viewport`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、文書が表示される{{glossary("viewport", "ビューポート")}}を構成することができます。主にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。 -

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

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

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

+モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面または画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。 -
@viewport {
+```css
+@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
-
長方形ではないディスプレイでの文書の表示を制御します。
-
- -

形式文法

+``` + +> **Note:** `` タグを使用すると、 `@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 {
+```css
+@viewport {
   min-width: 640px;
   max-width: 800px;
 }
@@ -93,39 +89,18 @@ translation_of: Web/CSS/@viewport
 
 @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}}

- -

関連情報

- - +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("meta")}}、特に `` の項目 +- [viewport meta タグによるモバイルブラウザーでのレイアウト制御](/ja/docs/Web/HTML/Viewport_meta_tag) -- cgit v1.2.3-54-g00ecf