initial commit

7 files changed, 618 insertions, 0 deletions

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
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>height</strong></code> は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。</p>
+
+<p>ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* 1つの値 */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>使用値は他の CSS 記述子の値から計算されます。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>負の数ではない絶対的または相対的な長さです。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_minimum_and_maximum_height" name="Setting_minimum_and_maximum_height">高さの最小値と最大値の設定</h3>
+
+<pre class="brush: css notranslate">@viewport {
+  height: 500px;
+}</pre>
+
+<h2 id="Specifications" name="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('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.viewport.height")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
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
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<div class="blockIndicator 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 notranslate">@viewport {
+  width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
+}
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: <code>&lt;meta name="viewport"&gt;</code> タグを使用すると、 <code>@viewport</code> より優先します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。</p>
+
+<p><code>1.0</code> または <code>100%</code> の<em>ズーム倍率</em>はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。</p>
+
+<h3 id="Descriptors" name="Descriptors">記述子</h3>
+
+<p>現時点では <code>@viewport</code> のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 <code>@viewport</code> は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd><code>min-width</code> と <code>max-width</code> の両方を設定するための一括指定です。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd><code>min-height</code> と <code>max-height</code> の両方を設定するための一括指定です。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>ズームの初期値を設定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>ズームの最小値を設定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>ズームの最大値を設定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>ユーザーがズーム倍率を変更できるか否かを制御します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dd>文書の向きを制御します。</dd>
+ <dt>{{cssxref("@viewport/viewport-fit", "viewport-fit")}}</dt>
+ <dd>長方形ではないディスプレイでの文書の表示を制御します。</dd>
+</dl>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_viewport_size_zoom_and_orientation" name="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3>
+
+<pre class="brush: css notranslate">@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" name="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>{{cssxref("@viewport/viewport-fit", "viewport-fit")}} 記述子を定義。</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" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}、特に <code>&lt;meta name="viewport"&gt;</code> の項目</li>
+ <li><a href="/ja/docs/Mobile/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a></li>
+</ul>
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
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <code><strong>max-height</strong></code> 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。</p>
+
+<p>最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* Keyword value */
+max-height: auto;
+
+/* &lt;length&gt; values */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* &lt;percentage&gt; value */
+max-height: 75%;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>使用する値は他の CSS 記述子の値から計算されます。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>負ではない絶対値または相対値。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@viewport {
+  max-height: 600px;
+}</pre>
+
+<h2 id="Specifications" name="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('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("css.at-rules.viewport.max-height")}}</p>
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
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>min-zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。</p>
+
+<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+max-zoom: auto;
+
+/* &lt;number&gt; 値 */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* &lt;percentage&gt; 値 */
+max-zoom: 150%;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>非負の数値で、表示倍率の上限です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>非負のパーセント値で、表示倍率の上限です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_max-zoom" name="Setting_max-zoom">max-zoom の設定</h3>
+
+<pre class="notranslate"><code>@viewport {
+  max-zoom: 1.5;
+}</code>
+</pre>
+
+<h2 id="Specifications" name="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('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
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
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>min-zoom</code></strong> 記述子は、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。</p>
+
+<p><em>表示倍率</em> が <code>1.0</code> 又は <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* キーワード値 */
+min-zoom: auto;
+
+/* &lt;number&gt; 値 */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* &lt;percentage&gt; 値 */
+min-zoom: 150%;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>非負の数値で、表示倍率の下限です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>非負のパーセント値で、表示倍率の下限です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p>
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
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>CSS の <strong><code>viewport-fit</code></strong> {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css; no-line-numbers">/* キーワード値 */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。</dd>
+ <dt><code>contain</code></dt>
+ <dd>ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。</dd>
+ <dt><code>cover</code></dt>
+ <dd>ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用するために強く推奨されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">auto | contain | cover
+</pre>
+
+<div class="hidden">この記述子はまだ <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a> に追加されていません。</div>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>viewport-fit</code> 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用してください。</p>
+
+<h2 id="Specifications" name="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", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("env", "env()")}}</li>
+</ul>
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
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義された文書の表示倍率の初期値を設定します。</p>
+
+<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+zoom: auto;
+
+/* &lt;number&gt; 値 */
+zoom: 0.8;
+zoom: 2.0;
+
+/* &lt;percentage&gt; 値 */
+zoom: 150%;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>表示倍率として使われる非負の数値です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>表示倍率として使われる非負のパーセント値です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_viewport_zoom_factor" name="Setting_viewport_zoom_factor">ビューポートの zoom 係数の設定</h3>
+
+<pre class="notranslate"><code>@viewport {
+  zoom: 2.0;
+}</code></pre>
+
+<h2 id="Specifications" name="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('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.viewport.zoom")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>