diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/ja/web/css/@viewport/index.md | 171 |
1 files changed, 73 insertions, 98 deletions
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 --- -<div>{{CSSRef}}{{deprecated_header}}</div> +{{CSSRef}}{{deprecated_header}} -<div class="notecard note"> -<p><strong>注</strong>: <a href="https://github.com/w3c/csswg-drafts/issues/4766">https://github.com/w3c/csswg-drafts/issues/4766</a> に @viewport を標準路線から除外することに関する議論があります。</p> -</div> +> **Note:** <https://github.com/w3c/csswg-drafts/issues/4766> に @viewport を標準化路線から除外することに関する議論があります。 -<p><strong><code>@viewport</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、文書を通して表示するための{{glossary("viewport", "ビューポート")}}を構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。</p> +**`@viewport`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、文書が表示される{{glossary("viewport", "ビューポート")}}を構成することができます。主にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。 -<p>パーセント値で指定された長さは、<strong>初期ビューポート</strong>からの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。</p> +パーセント値で指定された長さは、**初期ビューポート**からの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。 -<p>モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。</p> +モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面または画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。 -<pre class="brush: css no-line-numbers">@viewport { +```css +@viewport { width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/ } -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ</strong>: <code><meta name="viewport"></code> タグを使用すると、 <code>@viewport</code> より優先します。</p> -</div> - -<h2 id="Syntax">構文</h2> - -<p>このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。</p> - -<p><code>1.0</code> または <code>100%</code> の<em>ズーム倍率</em>はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。</p> - -<h3 id="Descriptors">記述子</h3> - -<p>現時点では <code>@viewport</code> のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 <code>@viewport</code> は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。</p> - -<dl> - <dt><code>min-width</code></dt> - <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd> - <dt><code>max-width</code></dt> - <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd> - <dt><code>width</code></dt> - <dd><code>min-width</code> と <code>max-width</code> の両方を設定するための一括指定です。</dd> - <dt><code>min-height</code></dt> - <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd> - <dt><code>max-height</code></dt> - <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd> - <dt><code>height</code></dt> - <dd><code>min-height</code> と <code>max-height</code> の両方を設定するための一括指定です。</dd> - <dt><code>zoom</code></dt> - <dd>ズームの初期値を設定します。</dd> - <dt><code>min-zoom</code></dt> - <dd>ズームの最小値を設定します。</dd> - <dt><code>max-zoom</code></dt> - <dd>ズームの最大値を設定します。</dd> - <dt><code>user-zoom</code></dt> - <dd>ユーザーがズーム倍率を変更できるか否かを制御します。</dd> - <dt><code>orientation</code></dt> - <dd>文書の向きを制御します。</dd> - <dt><code>viewport-fit</code></dt> - <dd>長方形ではないディスプレイでの文書の表示を制御します。</dd> -</dl> - -<h2 id="Formal_syntax">形式文法</h2> +``` + +> **Note:** `<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}} -<h2 id="Examples">例</h2> +## 例 -<h3 id="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3> +### ビューポートの大きさ、拡大率、向きの設定 -<pre class="brush: css">@viewport { +```css +@viewport { min-width: 640px; max-width: 800px; } @@ -93,39 +89,18 @@ translation_of: Web/CSS/@viewport @viewport { orientation: landscape; -}</pre> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td><code>viewport-fit</code> 記述子を定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{HTMLElement("meta")}}、特に <code><meta name="viewport"></code> の項目</li> - <li><a href="/ja/docs/Web/HTML/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a></li> -</ul> +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("meta")}}、特に `<meta name="viewport">` の項目 +- [viewport meta タグによるモバイルブラウザーでのレイアウト制御](/ja/docs/Web/HTML/Viewport_meta_tag) |