2021/08/24 時点の英語版に同期

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>&lt;meta name="viewport"&gt;</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>&lt;meta name="viewport"&gt;</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)