diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-22 01:05:50 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-28 22:03:46 +0900 |
| commit | 4b515493c0854b46b84a5fc4448d72694b351440 (patch) | |
| tree | 0db55998d4271c99fb0310796f1960f195ab8829 /files/ja/web/css/@viewport/index.html | |
| parent | d99fa973eba036f9e0a238c12bb471adfb5ca51d (diff) | |
| download | translated-content-4b515493c0854b46b84a5fc4448d72694b351440.tar.gz translated-content-4b515493c0854b46b84a5fc4448d72694b351440.tar.bz2 translated-content-4b515493c0854b46b84a5fc4448d72694b351440.zip | |
CSS Device Adaptation 関係の文書を変換準備
Diffstat (limited to 'files/ja/web/css/@viewport/index.html')
| -rw-r--r-- | files/ja/web/css/@viewport/index.html | 131 |
1 files changed, 0 insertions, 131 deletions
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 ---- -<div>{{CSSRef}}{{deprecated_header}}</div> - -<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> - -<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> - -<p>パーセント値で指定された長さは、<strong>初期ビューポート</strong>からの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。</p> - -<p>モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。</p> - -<pre class="brush: css no-line-numbers">@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> - -{{csssyntax}} - -<h2 id="Examples">例</h2> - -<h3 id="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3> - -<pre class="brush: css">@viewport { - min-width: 640px; - max-width: 800px; -} - -@viewport { - zoom: 0.75; - min-zoom: 0.5; - max-zoom: 0.9; -} - -@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> |
