CSS 画像の文書を更新

- 2021/10/16 時点の英語版に同期

1 files changed, 39 insertions, 85 deletions

diff --git a/files/ja/web/css/css_images/index.md b/files/ja/web/css/css_images/index.md
index a55ff99d7d..1b2f8d66e4 100644
--- a/files/ja/web/css/css_images/index.md
+++ b/files/ja/web/css/css_images/index.md
@@ -4,103 +4,57 @@ slug: Web/CSS/CSS_Images
 tags:
   - CSS
   - CSS 画像
-  - Reference
+  - ガイド
   - 概要
+  - Reference
 translation_of: Web/CSS/CSS_Images
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary"><ruby><strong>CSS 画像</strong><rp> (</rp><rt>CSS Images</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("&lt;image&gt;")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。</p>
+**CSS 画像** (CSS Images) は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("&lt;image&gt;")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="Properties" name="Properties">プロパティ</h3>
+### プロパティ
 
-<div class="index">
-<ul>
- <li>{{CSSxRef("image-orientation")}}</li>
- <li>{{CSSxRef("image-rendering")}}</li>
- <li>{{CSSxRef("image-resolution")}}</li>
- <li>{{CSSxRef("object-fit")}}</li>
- <li>{{CSSxRef("object-position")}}</li>
-</ul>
-</div>
+- {{CSSxRef("image-orientation")}}
+- {{CSSxRef("image-rendering")}}
+- {{CSSxRef("image-resolution")}}
+- {{CSSxRef("object-fit")}}
+- {{CSSxRef("object-position")}}
 
-<h3 id="Functions" name="Functions">関数</h3>
+### 関数
 
-<div class="index">
-<ul>
- <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
- <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
- <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
- <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
- <li>{{CSSxRef("conic-gradient")}}</li>
- <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
- <li>{{CSSxRef("url", "url()")}}</li>
- <li>{{CSSxRef("element", "element()")}}</li>
- <li>{{CSSxRef("_image", "image()")}}</li>
- <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
-</ul>
-</div>
+- {{CSSxRef("gradient/linear-gradient()", "linear-gradient()")}}
+- {{CSSxRef("gradient/radial-gradient()", "radial-gradient()")}}
+- {{CSSxRef("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}
+- {{CSSxRef("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}
+- {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}}
+- {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- {{CSSxRef("url()", "url()")}}
+- {{CSSxRef("element()", "element()")}}
+- {{CSSxRef("image/image()", "image()")}}
+- {{CSSxRef("cross-fade()", "cross-fade()")}}
 
-<h3 id="Data_types" name="Data_types">データ型</h3>
+### データ型
 
-<div class="index">
-<ul>
- <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
- <li>{{CSSxRef("&lt;image&gt;")}}</li>
-</ul>
-</div>
+- {{CSSxRef("&lt;gradient&gt;")}}
+- {{CSSxRef("&lt;image&gt;")}}
 
-<h2 id="Guides" name="Guides">ガイド</h2>
+## ガイド
 
-<dl>
- <dt><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></dt>
- <dd>特殊な CSS 画像型である<em>グラデーション</em>と、その作り方や使い方を紹介します。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS での画像スプライトの実装</a></dt>
- <dd>単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。</dd>
-</dl>
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+  - : 特殊な CSS 画像型である*グラデーション*と、その作り方や使い方を紹介します。
+- [CSS での画像スプライトの実装](/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
+  - : 単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。
 
-<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 Images")}}</td>
-   <td>{{Spec2("CSS4 Images")}}</td>
-   <td>{{CSSxRef("image-resolution")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("_image", "image()")}} を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Images")}}</td>
-   <td>{{Spec2("CSS3 Images")}}</td>
-   <td>{{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td>
-   <td>{{Spec2("Compat")}}</td>
-   <td><code>-webkit</code> の接頭辞が付いたグラデーション値の関数を標準化</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}</td>
-   <td>{{Spec2("CSS3 Values")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#url", "&lt;url&gt;")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+| 仕様書                                                           | 状態                     | 備考                                                                                                                               |
+| ---------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS4 Images")}}                                      | {{Spec2("CSS4 Images")}} | {{CSSxRef("image-resolution")}}, {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}}, {{CSSxRef("image/image()", "image()")}} を追加                            |
+| {{SpecName("CSS3 Images")}}                                      | {{Spec2("CSS3 Images")}} | {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加 |
+| {{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}} | {{Spec2("Compat")}}      | `-webkit` の接頭辞が付いたグラデーション値の関数を標準化                                                                           |
+| {{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}              | {{Spec2("CSS3 Values")}} |                                                                                                                                    |
+| {{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}        | {{Spec2("CSS2.1")}}      |                                                                                                                                    |
+| {{SpecName("CSS1", "#url", "&lt;url&gt;")}}                      | {{Spec2("CSS1")}}        | 初回定義                                                                                                                           |