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

1 files changed, 69 insertions, 80 deletions

diff --git a/files/ja/web/css/layout_cookbook/column_layouts/index.md b/files/ja/web/css/layout_cookbook/column_layouts/index.md
index 868f6d0610..60ac4e37d0 100644
--- a/files/ja/web/css/layout_cookbook/column_layouts/index.md
+++ b/files/ja/web/css/layout_cookbook/column_layouts/index.md
@@ -3,130 +3,119 @@ title: 欄レイアウト
 slug: Web/CSS/Layout_cookbook/Column_layouts
 tags:
   - CSS
-  - Layout
-  - Multi-col
+  - ガイド
+  - レイアウト
+  - 段組み
   - columns
-  - cookbook
-  - flexbox
-  - grid
+  - 料理帳
+  - フレックスボックス
+  - グリッド
 translation_of: Web/CSS/Layout_cookbook/Column_layouts
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary"><span class="seoSummary">多くの場合、いくつかの欄を含むレイアウトを作成する必要があります。 CSS にはこれを行うためのいくつかの方法があります。 グリッド、フレックスボックス、段組みのレイアウトのどれを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらのオプションについて説明します。</span></p>
+いくつかの欄を含むレイアウトを作成する必要があることがよくあります。 CSS にはこれを行うためのいくつかの方法があります。 グリッド、フレックスボックス、段組みのレイアウトのどれを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらの選択肢について説明します。
 
-<p><img alt="コンテナ内に2つの欄を持つ3種類のレイアウトスタイル。" src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></p>
+![コンテナー内に 2 つの欄を持つ 3 種類のレイアウトスタイル。](cookbook-multiple-columns.png)
 
-<h2 id="Requirements" name="Requirements">必要条件</h2>
+## 要件
 
-<p>欄（columns）で達成したいと思うかもしれないデザインパターンがいくつかあります。</p>
+欄 (columns) で達成したいと思うかもしれないデザインパターンがいくつかあります。
 
-<ul>
- <li>新聞のような欄（段）に分割されたコンテンツの連続したスレッド。</li>
- <li>すべての高さが等しい、欄（列）として配置された一並びの項目。</li>
- <li>行と列で並べられた複数行の列。</li>
-</ul>
+- 新聞のような段に分割されたコンテンツの連続したスレッド。
+- すべての高さが等しい、欄（列）として配置された一並びの項目。
+- 行と列で並べられた複数行の列。
 
-<h2 id="The_recipes" name="The_recipes">レシピ</h2>
+## レシピ
 
-<p>要件を満たすためには、さまざまなレイアウト方法を選択する必要があります。</p>
+要件を満たすためには、さまざまなレイアウト方法を選択する必要があります。
 
-<h3 id="A_continuous_thread_of_content_—_multi-column_layout" name="A_continuous_thread_of_content_—_multi-column_layout">コンテンツの連続したスレッド — 段組みレイアウト</h3>
+### コンテンツの連続したスレッド — 段組みレイアウト
 
-<p>段組みレイアウト（multi-column layout、multicol）を使用して段を作成した場合、テキストは各段を順番に埋める連続したストリームのままです。 段はすべて同じサイズである必要があり、個々の段または個々の段のコンテンツをターゲットにすることはできません。</p>
+段組みレイアウト (multi-column layout, multicol) を使用して段を作成した場合、テキストは連続した流れのまま、それぞれの段を順番に埋めます。 段はすべて同じサイズである必要があり、個々の段または個々の段のコンテンツをターゲットにすることはできません。
 
-<p>{{cssxref("column-gap")}} プロパティを使用して段間のギャップを制御したり、{{cssxref("column-rule")}} を使用して段間に線を追加したりできます。</p>
+{{cssxref("column-gap")}} プロパティを使用して段間の幅を制御したり、{{cssxref("column-rule")}} を使用して段間に線を追加したりすることができます。
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}
 
-<div class="note">
-<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">この例をダウンロードする</a></p>
-</div>
+> **Callout:**
+>
+> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html)
 
-<p>次の場合に段組みを使用してください。</p>
+次のような場合には、段組みを使用してください。
 
-<ul>
- <li>テキストを新聞のような段に表示したい。</li>
- <li>段に分割したい小さい項目のセットを持っている。</li>
- <li>個々の欄ボックスを装飾のターゲットにする必要がない。</li>
-</ul>
+- テキストを新聞のような段に表示したい。
+- 段に分割したい一連の小さな項目がある。
+- 個々の段ボックスを装飾のターゲットにする必要がない。
 
-<h3 id="A_single_row_of_items_with_equal_heights_—_flexbox" name="A_single_row_of_items_with_equal_heights_—_flexbox">同じ高さの単一行の項目 — フレックスボックス</h3>
+### 同じ高さの単一行の項目 — フレックスボックス
 
-<p>フレックスボックス（flexbox）は、{{cssxref("flex-direction")}} を <code>row</code> に設定することでコンテンツを列に分割するために使用できますが、フレックスボックスはフレックスコンテナ内の要素をターゲットにし、それぞれの直接の子を新しい列に配置します。 これは段組みで見たものとは異なる振る舞いです。</p>
+フレックスボックス (flexbox) は、{{cssxref("flex-direction")}} を `row` に設定することでコンテンツを列に分割するために使用できますが、フレックスボックスはフレックスコンテナー内の要素を対象として、それぞれの直接の子を新しい列に配置します。 これは段組みとは動作が異なります。
 
-<p>フレックス項目間に規則を追加する方法は現在ありません。 また、{{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティに対するブラウザーのサポートは制限されています。 したがって、項目間にギャップを作成するには、マージンを使用します。</p>
+フレックスアイテム間に段間線を追加する方法は今のところありません。 また、{{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティはブラウザーの対応が限られています。したがって、アイテム間に空間を作成するには、マージンを使用します。
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}
 
-<div class="note">
-<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">この例をダウンロードする</a></p>
-</div>
+> **Callout:**
+>
+> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html)
 
-<p>フレックスボックスを使用して、コンテナの {{cssxref("flex-wrap")}} プロパティを <code>wrap</code> に設定することで、フレックス項目が新しい行に折り返されるレイアウトを作成することもできます。 これらの新しいフレックスラインは、そのラインに沿ってのみスペースを配分します — 以下の例に示すように、新しいラインの項目は上のラインの項目と整列しません。 これがフレックスボックスが一次元として記述されている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、同時に両方ではありません。</p>
+コンテナーの {{cssxref("flex-wrap")}} プロパティを `wrap` に設定すると、フレックスボックスを使用して、フレックスアイテムが新しい行に折り返されるレイアウトを作成することもできます。新しい行は行内のみで空間を配分します。 — 以下の例に示すように、新しい行の項目は上の行の項目と整列しません。これがフレックスボックスが一次元と呼ばれている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、両方を同時に制御するようには設計されていません。
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}
 
-<div class="note">
-<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">この例をダウンロードする</a></p>
-</div>
+> **Callout:**
+>
+> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html)
 
-<p>次の場合にフレックスボックスを使用してください。</p>
+次のような場合には、フレックスボックスを使用してください。
 
-<ul>
- <li>単一行または単一列の項目。</li>
- <li>項目をレイアウトした後に交差軸（cross axis）上で整列をしたいとき。</li>
- <li>ラップされた項目がそれらのラインに沿ってだけスペースを共有し、他のラインの項目と並ばないことに満足しているとき。</li>
-</ul>
+- 1 行または 1 列のアイテム。
+- アイテムをレイアウトした後に交差軸 (cross axis) 方向に配置を行いたい場合。
+- 折り返された行のアイテムが、その行内のみで空間を共有し、他の行のアイテムとは並ばなくてもよい場合。
 
-<h3 id="Lining_items_up_in_rows_and_columns_—_grid_layout" name="Lining_items_up_in_rows_and_columns_—_grid_layout">項目を行と列に並べる — グリッドレイアウト</h3>
+### 項目を行と列に並べる — グリッドレイアウト
 
-<p>欲しいものが項目が行と列に並ぶレイアウトであるならば、CSS グリッドレイアウトを選ぶべきです。 グリッドレイアウトは、フレックスボックスがフレックスコンテナの直接の子に作用するのと同様の方法で、グリッドコンテナの直接の子に作用しますが、CSS グリッドでは、項目を行と列に並べることができます — これは2次元として記述されています。</p>
+欲しいものが項目が行と列に並ぶレイアウトであるならば、CSS グリッドレイアウトを選ぶべきです。 グリッドレイアウトは、フレックスボックスがフレックスコンテナの直接の子に作用するのと同様の方法で、グリッドコンテナの直接の子に作用しますが、CSS グリッドでは、項目を行と列に並べることができます — これは2次元として記述されています。
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}
 
-<div class="note">
-<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">この例をダウンロードする</a></p>
-</div>
+> **Callout:**
+>
+> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html)
 
-<p>次の場合にグリッドを使用してください。</p>
+次のような場合には、グリッドを使用してください。
 
-<ul>
- <li>複数行または複数列の項目用。</li>
- <li>ブロック軸とインライン軸の項目を揃えることができるようにする場合。</li>
- <li>項目を行と列に整列させたい場合。</li>
-</ul>
+- 複数行または複数列のアイテムのため。
+- ブロック軸とインライン軸のアイテムを揃えることができるようにする場合。
+- アイテムを行と列に整列させたい場合。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+## ブラウザーの互換性
 
-<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。
 
+#### column-width
 
+{{Compat("css.properties.column-width")}}
 
-<h4 id="column-width" name="column-width">column-width</h4>
+#### column-rule
 
-<p>{{Compat("css.properties.column-width")}}</p>
+{{Compat("css.properties.column-rule")}}
 
-<h4 id="column-rule" name="column-rule">column-rule</h4>
+#### flex
 
-<p>{{Compat("css.properties.column-rule")}}</p>
+{{Compat("css.properties.flex")}}
 
-<h4 id="flex" name="flex">flex</h4>
+#### flex-wrap
 
-<p>{{Compat("css.properties.flex")}}</p>
+{{Compat("css.properties.flex-wrap")}}
 
-<h4 id="flex-wrap" name="flex-wrap">flex-wrap</h4>
+#### grid-template-columns
 
-<p>{{Compat("css.properties.flex-wrap")}}</p>
+{{Compat("css.properties.grid-template-columns")}}
 
-<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>
+## MDN の関連資料
 
-<p>{{Compat("css.properties.grid-template-columns")}}</p>
-
-<h2 id="Resources_on_MDN" name="Resources_on_MDN">MDN にある資料</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトのガイド</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックスのガイド</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウトのガイド</a></li>
-</ul>
+- [段組みレイアウトのガイド](/ja/docs/Web/CSS/CSS_Columns)
+- [フレックスボックスのガイド](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)
+- [CSS グリッドレイアウトのガイド](/ja/docs/Web/CSS/CSS_Grid_Layout)