CSS Values and Units の文書を更新

- 2021/11/19 時点の英語版に同期

1 files changed, 35 insertions, 56 deletions

diff --git a/files/ja/web/css/dimension/index.md b/files/ja/web/css/dimension/index.md
index 89792d3a7e..2ca81eeb18 100644
--- a/files/ja/web/css/dimension/index.md
+++ b/files/ja/web/css/dimension/index.md
@@ -1,80 +1,59 @@
 ---
-title: dimension
+title: <dimension>
 slug: Web/CSS/dimension
 tags:
   - CSS
-  - CSS Data Type
   - CSS データ型
-  - Reference
+  - データ型
+  - リファレンス
   - dimension
-  - unit
-  - value
-  - 値
   - 単位
+  - 値
+browser-compat: css.types.dimension
 translation_of: Web/CSS/dimension
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>&lt;dimension&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{CSSxRef("&lt;number&gt;")}} とそれに添付された単位を表します (10px など)。</p>
+**`<dimension>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 {{CSSxRef("&lt;number&gt;")}} とそれに添付された単位を表します (`10px` など)。
 
-<p>CSS は dimension を使用して、距離 ({{CSSxRef("&lt;length&gt;")}})、時間 ({{CSSxRef("&lt;time&gt;")}})、周期 ({{CSSxRef("&lt;frequency&gt;")}})、解像度 ({{CSSxRef("&lt;resolution&gt;")}})、その他の量を指定します。</p>
+CSS は `<dimension>` を使用して、長さ ({{CSSxRef("&lt;length&gt;")}})、時間 ({{CSSxRef("&lt;time&gt;")}})、周期 ({{CSSxRef("&lt;frequency&gt;")}})、解像度 ({{CSSxRef("&lt;resolution&gt;")}})、その他の量を指定します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p><code>&lt;dimension&gt;</code> の構文は、 {{CSSxRef("&lt;number&gt;")}} とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。</p>
+`<dimension>` の構文は、 {{CSSxRef("&lt;number&gt;")}} とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Valid_dimensions" name="Valid_dimensions">妥当な dimension</h3>
+### 有効な dimension
 
-<pre class="syntaxbox example-good">12px      12ピクセル
+```css example-good
+12px      12 ピクセル
 1rem      1rem
-1.2pt     1.2ポイント
-2200ms    2200ミリ秒
-200hz     200ヘルツ
-200Hz     200ヘルツ (値は大文字小文字の区別なし)
-</pre>
+1.2pt     1.2 ポイント
+2200ms    2200 ミリ秒
+5s        5 秒
+200hz     200 ヘルツ
+200Hz     200 ヘルツ (値は大文字小文字の区別なし)
+```
 
-<h3 id="Invalid_dimensions" name="Invalid_dimensions">妥当ではない dimension</h3>
+### 無効な dimension
 
-<pre class="syntaxbox example-bad">12 px       単位は数値の直後に来る必要がある。
+```css example-bad
+12 px       単位は数値の直後に来る必要がある。
 12"px"      単位は識別子であり、引用符で囲まない。
-</pre>
+3sec        秒の単位は "s" であり "sec" ではない。
+```
+
+## 仕様書
+
+{{Specifications}}
 
-<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("CSS4 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
-   <td>{{Spec2("CSS4 Values")}}</td>
-   <td><code>cap</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code>, <code>vi</code>, <code>vb</code> を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
-   <td>{{Spec2("CSS3 Values")}}</td>
-   <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code> を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "syndata.html#numbers", "&lt;dimension&gt;")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Numbers and Length において定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "", "&lt;dimension&gt;")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>"length units" のもとに初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Compat}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## 関連情報
 
-<p>{{Compat("css.types.dimension")}}</p>
+- [CSS データ型](/ja/docs/Web/CSS/CSS_Types)
+- [CSS を使用した HTML のスタイル付けの学習](/ja/docs/Learn/CSS)
+- CSS の長さ ({{CSSxRef("&lt;length&gt;")}}), 時間 ({{CSSxRef("&lt;time&gt;")}}), 周期 ({{CSSxRef("&lt;frequency&gt;")}}), 解像度 ({{CSSxRef("&lt;resolution&gt;")}})