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

1 files changed, 72 insertions, 105 deletions

diff --git a/files/ja/web/css/css_display/index.html b/files/ja/web/css/css_display/index.html
index a5964ac3b0..3d10f7c800 100644
--- a/files/ja/web/css/css_display/index.html
+++ b/files/ja/web/css/css_display/index.html
@@ -4,110 +4,77 @@ slug: Web/CSS/CSS_Display
 tags:
   - CSS
   - CSS 表示方法
-  - Overview
-  - Reference
+  - ガイド
+  - 概要
+  - リファレンス
 translation_of: Web/CSS/CSS_Display
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS 表示方法</strong>は CSS のモジュールの一つで、 CSS 整形ボックスツリーがどのように文書の要素ツリーから生成されるかを定義し、制御するプロパティを定義します。</p>
-
-<h2 id="Reference" name="Reference">リファレンス</h2>
-
-<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
-
-<div class="index">
-<ul>
- <li>{{CSSxRef("display")}}</li>
-</ul>
-</div>
-
-<h3 id="CSS_data_types" name="CSS_data_types">CSS データ型</h3>
-
-<div class="index">
-<ul>
- <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-</ul>
-</div>
-
-<h2 id="Guides" name="Guides">ガイド</h2>
-
-<h3 id="CSS_Flow_Layout_(display_block_display_inline)" name="CSS_Flow_Layout_(display_block_display_inline)">CSS フローレイアウト (<code style="white-space: nowrap;">display: block</code>, <code style="white-space: nowrap;">display: inline</code>)</h3>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロックおよびインラインレイアウト</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">フローレイアウトとオーバーフロー</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">フローレイアウトと書字方向</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフローの外</a></li>
-</ul>
-
-<h3 id="display_flex"><code style="white-space: nowrap;">display: flex</code></h3>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">クロスブラウザーのフレックスボックスのミックスイン</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの順序の設定</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法の関係</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">フレックスボックスの典型的な使用例</a></li>
-</ul>
-
-<h3 id="display_grid"><code style="white-space: nowrap;">display: grid</code></h3>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">グリッドレイアウトと他のレイアウト方法との関係</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトのボックス配置</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
-</ul>
-
-<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 Display", "#the-display-properties", "display")}}</td>
-   <td>{{Spec2("CSS3 Display")}}</td>
-   <td><code style="white-space: nowrap;">run-in</code>, <code>flow</code>, <code style="white-space: nowrap;">flow-root</code>, <code>contents</code> および複数キーワードの値を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "visuren.html#display-prop", "display")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>テーブルモデルの値と <code style="white-space: nowrap;">inline-block</code> を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#display", "display")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>初回定義。基本的な値: <code>none</code>, <code>block</code>, <code>inline</code>, <code style="white-space: nowrap;">list-item</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>CSS Display 仕様書 Level 3 に加え、他の仕様書でも display の様々な値の動作を定義しています。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.properties.display", 10)}}</p>
+{{CSSRef}}
+
+**CSS 表示方法** (CSS Display) は CSS のモジュールの一つで、 CSS の整形ボックスツリーがどのように文書の要素ツリーから生成されるかを定義し、制御するプロパティを定義します。
+
+## リファレンス
+
+### CSS プロパティ
+
+- {{CSSxRef("display")}}
+
+### CSS データ型
+
+- {{CSSxRef("&lt;display-outside&gt;")}}
+- {{CSSxRef("&lt;display-inside&gt;")}}
+- {{CSSxRef("&lt;display-listitem&gt;")}}
+- {{CSSxRef("&lt;display-box&gt;")}}
+- {{CSSxRef("&lt;display-internal&gt;")}}
+- {{CSSxRef("&lt;display-legacy&gt;")}}
+
+## ガイド
+
+- [Adapting to the two-value syntax of display](/ja/docs/Web/CSS/display/two-value_syntax_of_display)
+
+### CSS フローレイアウト (`display: block`, `display: inline`)
+
+- [通常フローでのブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
+- [フローレイアウトとオーバーフロー](/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow)
+- [フローレイアウトと書字方向](/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes)
+- [整形コンテキストの紹介](/ja/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts)
+- [フロー内とフローの外](/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow)
+
+### `display: flex`
+
+- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+- [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)
+- [主軸に沿ったフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)
+- [フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)
+- [フレックスアイテムの並べ替え](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)
+- [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods)
+- [フレックスボックスの後方互換性](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox)
+- [フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox)
+
+### `display: grid`
+
+- [グリッドレイアウトの基本概念](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+- [グリッドレイアウトと他のレイアウト方法との関係](/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+- [線に基づく配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- [グリッドテンプレート領域](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+- [名前付きグリッド線を使用したレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+- [グリッドレイアウトでの自動配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+- [グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+- [グリッドと論理的な値と書字方向](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes)
+- [CSS グリッドレイアウトとアクセシビリティ](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+- [CSS グリッドレイアウトとプログレッシブエンハンスメント](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
+- [グリッドを使用したよくあるレイアウトの実現](/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
+
+## 仕様書
+
+| 仕様書                                                             | 状態                      | 備考                                                                     |
+| ------------------------------------------------------------------ | ------------------------- | ------------------------------------------------------------------------ |
+| {{SpecName("CSS3 Display", "#the-display-properties", "display")}} | {{Spec2("CSS3 Display")}} | `run-in`, `flow`, `flow-root`, `contents` および複数のキーワード値を追加 |
+| {{SpecName("CSS2.1", "visuren.html#display-prop", "display")}}     | {{Spec2("CSS2.1")}}       | テーブルモデルの値と `inline-block` を追加                               |
+| {{SpecName("CSS1", "#display", "display")}}                        | {{Spec2("CSS1")}}         | 初回定義。基本的な値: `none`, `block`, `inline`, `list-item`             |
+
+CSS Display 仕様書 Level 3 に加え、他の仕様書でも display の様々な値の動作を定義しています。
+
+## ブラウザーの互換性
+
+{{Compat("css.properties.display", 10)}}