initial commit

13 files changed, 1047 insertions, 0 deletions

diff --git a/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html
new file mode 100644
index 0000000000..ac905fc918
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -0,0 +1,56 @@
+---
+title: パンくずナビゲーション
+slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+tags:
+  - CSS
+  - Layout
+  - Navigation
+  - cookbook
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">パンくず（Breadcrumb）ナビゲーションは、来た道をたどって開始ページまで戻ることができるパンくずリストを提供することによって、ユーザーがウェブサイト内の自分の位置を理解するのに役立ちます。</span></p>
+
+<p><img alt="リンクを区切り文字を付けてインラインで表示" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>項目は通常、個々のページ間の階層を示すために、区切り文字を付けてインラインで表示されます。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>このパターンは単純なフレックスレイアウトを使用してレイアウトされており、CSS の1行でナビゲーションがどのように行われるかを示しています。 区切り文字は CSS 生成コンテンツを使用して追加されます。 区切り文字は好きなものに変更することができます。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
+
+<p><code>aria-label</code> 属性および <code>aria-current</code> 属性を使用して、このナビゲーションが何であるか、そして現在のページが構造のどこにあるのかをユーザーが理解できるようにしています。 詳細については関連リンクを参照してください。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="Flexbox" name="Flexbox">フレックスボックス</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">パンくずリストの提供</a>（英語）</li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">aria-current 属性の使用</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/card/index.html b/files/ja/web/css/layout_cookbook/card/index.html
new file mode 100644
index 0000000000..4c6d015537
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/card/index.html
@@ -0,0 +1,86 @@
+---
+title: カード
+slug: Web/CSS/Layout_cookbook/Card
+tags:
+  - CSS
+  - CSS Grid
+  - card
+  - cookbook
+  - css layout
+translation_of: Web/CSS/Layout_cookbook/Card
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary"><span class="seoSummary">このパターンは、オプションのフッター付きの「カード」コンポーネントのリストです。</span></p>
+
+<p><img alt="1行に3つのカードコンポーネント" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>カードコンポーネントには、見出し、画像、コンテンツ、フッターなど、さまざまなコンテンツを含めることができます。</p>
+
+<p>各カードは同じ高さでなければならず、フッターはカードの一番下に固定する必要があります。</p>
+
+<p>カードのコレクションに追加すると、カードは2次元に並ぶ必要があります。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>このカードは、1次元レイアウトであるにもかかわらず <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>を使用してレイアウトされています。 これは、グリッドトラックに対してコンテンツのサイズ変更の使用が可能になるためです。 単一列グリッドを設定するときは、次のようにします。</p>
+
+<pre class="brush: css">.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}</pre>
+
+<p>見出しトラックは {{cssxref("max-content")}} に設定されているため、伸縮は行われません。 画像は 200 ピクセルの高さのトラック内に収めることにしました。 それから、その次のトラック（コンテンツが存在する場所）を <code>1fr</code> に設定します。 これは、残りのスペースを占有することを意味します。</p>
+
+<p>暗黙的にグリッドに作成された行はデフォルトで自動サイズ変更されるため、トラックにフッターがある場合は自動サイズ変更されます。 したがって、これは追加されたコンテンツにフィットします。</p>
+
+<div class="note">
+<p><strong>注</strong>: 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 グリッドレベル 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。</p>
+</div>
+
+<h2 id="Useful_fallbacks_or_alternative_methods" name="Useful_fallbacks_or_alternative_methods">便利な代替方法</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>を使ってカードをレイアウトすることもでき、その場合は、コンテンツ領域を大きくし、他の項目は大きくしないようにする必要があります。 これはカードをレイアウトするための合理的な方法ですが、私は、項目に規則を追加する必要があるのではなく、コンテナからトラックを制御できることをやや好みます。</p>
+
+<p>全体的なレイアウトのためにフレックスボックスを使うことができますが、これは最終的なフレックス行の上で伸縮するカードをもたらすでしょう。 あるいは、<a href="/ja/docs/Web/CSS/CSS_Columns">CSS 段組み</a>を使用することもできます — これにより、カードが段の上にレイアウトされることになりますが、これは問題になる場合もあれば、そうでない場合もあります。</p>
+
+<p>これらの各レイアウト方法のデモについては、<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">欄のレシピ</a>を参照してください。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
+
+<p>カードの内容によっては、アクセシビリティを高めるためにできること、あるいはすべきことがあるかもしれません。 これらの問題のとても詳細な説明については、Heydon Pickering による<a href="https://inclusive-components.design/cards/">包括的なコンポーネント: カード</a>（英語）を参照してください。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h4 id="grid-template-rows" name="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}、{{Cssxref("grid-template-rows")}}、{{Cssxref("grid-gap")}}</li>
+ <li><a href="https://inclusive-components.design/cards/">包括的なコンポーネント: カード</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/center_an_element/index.html b/files/ja/web/css/layout_cookbook/center_an_element/index.html
new file mode 100644
index 0000000000..c813da5cbe
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/center_an_element/index.html
@@ -0,0 +1,59 @@
+---
+title: 要素を中央に配置
+slug: Web/CSS/Layout_cookbook/Center_an_element
+tags:
+  - CSS
+  - Layout
+  - Recipe
+  - box alignment
+  - centering
+  - cookbook
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Center_an_element
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方を中央に配置するのは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。</p>
+
+<p><img alt="大きなボックスの中央に配置された要素" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>項目を別のボックスの縦横の中央に配置する。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>あるボックスを別のボックスの中央に配置するには、コンテナをフレックスコンテナにします。 次に、ブロック軸（交差軸）の中央に配置するには {{cssxref("align-items")}} を <code>center</code> に設定し、インライン軸（主軸）の中央に配置するには {{cssxref("justify-content")}} を <code>center</code> に設定します。</p>
+
+<p>ここで使用されているボックス配置プロパティはブロックレイアウトにも適用されるように指定されているため、将来的には親をフレックスコンテナに変える必要なしに要素を中央に配置できるようになるかもしれません。 ただし、現在ブロックレイアウトでのボックス配置プロパティのサポートは制限されているため、現在フレックスボックスを使用して中央に配置するのがこれを達成するための最も堅牢な方法です。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="align-items" name="align-items">align-items</h4>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h4 id="justify-content" name="justify-content">justify-content</h4>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h2 id="Resources_on_MDN" name="Resources_on_MDN">MDN にある資料</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスボックスでのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS ボックス配置のガイド</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/column_layouts/index.html b/files/ja/web/css/layout_cookbook/column_layouts/index.html
new file mode 100644
index 0000000000..868f6d0610
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/column_layouts/index.html
@@ -0,0 +1,132 @@
+---
+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>
+
+<p class="summary"><span class="seoSummary">多くの場合、いくつかの欄を含むレイアウトを作成する必要があります。 CSS にはこれを行うためのいくつかの方法があります。 グリッド、フレックスボックス、段組みのレイアウトのどれを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらのオプションについて説明します。</span></p>
+
+<p><img alt="コンテナ内に2つの欄を持つ3種類のレイアウトスタイル。" src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></p>
+
+<h2 id="Requirements" name="Requirements">必要条件</h2>
+
+<p>欄（columns）で達成したいと思うかもしれないデザインパターンがいくつかあります。</p>
+
+<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>
+
+<p>{{cssxref("column-gap")}} プロパティを使用して段間のギャップを制御したり、{{cssxref("column-rule")}} を使用して段間に線を追加したりできます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">この例をダウンロードする</a></p>
+</div>
+
+<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>
+
+<p>フレックス項目間に規則を追加する方法は現在ありません。 また、{{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティに対するブラウザーのサポートは制限されています。 したがって、項目間にギャップを作成するには、マージンを使用します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>フレックスボックスを使用して、コンテナの {{cssxref("flex-wrap")}} プロパティを <code>wrap</code> に設定することで、フレックス項目が新しい行に折り返されるレイアウトを作成することもできます。 これらの新しいフレックスラインは、そのラインに沿ってのみスペースを配分します — 以下の例に示すように、新しいラインの項目は上のラインの項目と整列しません。 これがフレックスボックスが一次元として記述されている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、同時に両方ではありません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>次の場合にフレックスボックスを使用してください。</p>
+
+<ul>
+ <li>単一行または単一列の項目。</li>
+ <li>項目をレイアウトした後に交差軸（cross axis）上で整列をしたいとき。</li>
+ <li>ラップされた項目がそれらのラインに沿ってだけスペースを共有し、他のラインの項目と並ばないことに満足しているとき。</li>
+</ul>
+
+<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>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>次の場合にグリッドを使用してください。</p>
+
+<ul>
+ <li>複数行または複数列の項目用。</li>
+ <li>ブロック軸とインライン軸の項目を揃えることができるようにする場合。</li>
+ <li>項目を行と列に整列させたい場合。</li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+
+
+<h4 id="column-width" name="column-width">column-width</h4>
+
+<p>{{Compat("css.properties.column-width")}}</p>
+
+<h4 id="column-rule" name="column-rule">column-rule</h4>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
+
+<h4 id="flex" name="flex">flex</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h4 id="flex-wrap" name="flex-wrap">flex-wrap</h4>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>
+
+<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>
diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
new file mode 100644
index 0000000000..e420bcc7b3
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
@@ -0,0 +1,66 @@
+---
+title: Cookbook template
+slug: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
+tags:
+  - CSS
+  - Contribute
+  - Layout
+  - Template
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
+---
+<p>{{CSSRef}}</p>
+
+<div class="note"><strong>注</strong>: これは CSS 料理帳のページのテンプレートページです。 新しい料理帳のページを作成するときに、これを生のテンプレートとして使用してください。<br>
+<em>イタリック体のコメントは、テンプレートの一部の使い方に関する情報です。</em></div>
+
+<p class="summary"><span class="seoSummary"><em>このレシピが解決する問題の説明または、あなたが実証しているパターンの説明。</em></span></p>
+
+<h2 id="Requirements">Requirements</h2>
+
+<p><em>このパターンには何を含める必要がありますか、それともどのような問題を解決する必要がありますか？ それをここにリストします。</em></p>
+
+<h2 id="Recipe">Recipe</h2>
+
+<p><em>下の例のパスを変更して、マージされた例を指すようにします。 最後のパラメータは実際のサンプルの高さで、必要に応じて変更できます。</em></p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<p><em>マージされたダウンロードバージョンを指すようにリンクを変更します。</em></p>
+
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Download the example</a></p>
+
+<h2 id="Choices_made">Choices made</h2>
+
+<p><em>パターンを作成したときの決定を説明してください。 なぜあなたは特定の方法を選んだのですか？ あなたがここに追加の例を追加したい場合 — 例えば代替のあるバージョン — ぜひ追加してください。 パターンは非常に単純なものからより複雑なものまで多岐にわたるので、このセクションは意図的に緩めています。</em></p>
+
+<h2 id="Useful_fallbacks_or_alternative_methods">Useful fallbacks or alternative methods</h2>
+
+<p><em>レシピを構築するための有用な代替方法、またはサポートしていないブラウザーをサポートする必要がある場合に使用する代替レシピがある場合は、それらをここの別のセクションに含めてください。</em></p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p><em>アクセシビリティに関して注意すべき点がある場合に、これを含めます。 あなたのパターンに関係がなければ、これは省略することができます。</em></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The various layout methods have different browser support. See the charts below for details on basic support for the properties used.</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p><em>以下の例で align-items を含めたように、使用した重要なプロパティの互換データ（compat data）を含めます。</em></p>
+
+<h4 id="align-items">align-items</h4>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><em>関連プロパティのリンク: {{Cssxref("example-property")}}</em></li>
+ <li><em>コンテキストでプロパティを使用方法を示す記事へのリンク: "Using … article"</em></li>
+ <li><em>非常に良い外部リンク。 外部リンクを恐れてはいけませんが、それらは傑出したものであるべきであり、細かい点を述べるだけのものではありません。</em></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html
new file mode 100644
index 0000000000..ac347af90a
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html
@@ -0,0 +1,106 @@
+---
+title: レシピを投稿する
+slug: Web/CSS/Layout_cookbook/Contribute_a_recipe
+tags:
+  - CSS
+  - Contribute
+  - Layout
+  - Templates
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">レイアウト料理帳の一例を提供したい場合は、このページでは、あなたの例を公開するための手順について説明します。</span></p>
+
+<h2 id="What_makes_a_good_recipe" name="What_makes_a_good_recipe">何が良いレシピになりますか？</h2>
+
+<p><strong>あらゆる便利なウェブデザインのパターンの最も単純なバージョンです</strong>。 含まれている CSS の各行は、パターンを示すのを助けるためにそこにあるべきですので、例をきれいに見せるためだけのものは省略してください。 アイデアは、誰かがパターンを手に取り、自分のスタイルでサイトでそれを使用できるということです。</p>
+
+<h2 id="Steps_to_publish_a_recipe" name="Steps_to_publish_a_recipe">レシピを公開する手順</h2>
+
+<p>英語で考えるんだ！ — en-US のページを作ります。</p>
+
+<p>GitHub のアカウントで MDN のアカウントを作ります。</p>
+
+<p>MDN の編集機能はもちろん GitHub と Git の扱いにも慣れている必要があります。</p>
+
+<p>レシピの名前とスラグ、例に使うファイル名を以下を読みながら決めます。</p>
+
+<p>レシピは以下で構成されています。</p>
+
+<ol>
+ <li>実例（live example）は、<a href="https://github.com/mdn/css-examples">CSS Examples GitHub リポジトリ</a>に保存します。</li>
+ <li>その例のダウンロード可能なバージョンも、CSS Examples リポジトリに保存します。</li>
+ <li><a href="/ja/docs/Web/CSS/Layout_cookbook">CSS レイアウト料理帳</a>の中のページで、詳細は次のとおりです。
+  <ol>
+   <li> 要件（Requirements）</li>
+   <li>レシピ（Recipe）</li>
+   <li>行った選択（Choices made）</li>
+   <li>便利な代替方法（Useful fallbacks or alternative methods）</li>
+   <li>アクセシビリティへの懸念（Accessibility concerns）</li>
+   <li>ブラウザー実装状況（Browser compatibility）</li>
+   <li>関連情報（See also）</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="1._Build_your_pattern" name="1._Build_your_pattern">1. パターンを作ります</h3>
+
+<p>あなたの例をレシピに変える前に、まずパターンを単純な HTML ページとして作成します。 何を示そうとしているのかを考え、できるだけ単純にします。 誰もがこれらに精通しているわけではないので、（BEM など）特定の CSS の規約を使用しないでください。 必要以上に複雑に見えることがあります。</p>
+
+<p>HTML と CSS が有効であることを確認し、複数のブラウザーでテストしてください。 どこでもサポートされていない CSS プロパティを使用していても問題ありません！ ページを作成するときにブラウザーのサポート情報を含めることができます。 場合によっては、代替のサポートを含む、例の2番目のバージョンを作成すると便利な場合があります。</p>
+
+<h3 id="2._Creating_a_live_example" name="2._Creating_a_live_example">2. 実例を作成する</h3>
+
+<p>料理帳のページや MDN の他の場所で見ることができる実例は、訪問者が必要なすべてのコードに圧倒されることなくコードで遊んで関連部分を変更することを可能にします。 あなたのレシピは一つ以上の例として示されます。</p>
+
+<p><a href="https://github.com/mdn/css-examples">CSS Examples リポジトリ</a>をフォークして（右上の Fork ボタンを押すと自分のアカウントにコピーが作られます）、<code>css-cookbook</code> フォルダを調べてください。 出発点としてコピーできる <code><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html">cookbook-template.html</a></code> ファイルがあります。 これを <code>css-cookbook</code> ディレクトリにあなたのパターンにとって意味のある名前で保存してください。 テンプレート（template）は、さまざまなパーツを適切な場所に追加するのに役立つようにコメントされています。</p>
+
+<p>これの重要なパーツは次のとおりです。</p>
+
+<p>エディタパネルのスタイル用のスタイルシート、基本的な body のスタイル、およびエディタ機能用の JavaScript ファイルがあります。 これらのファイルはそのままにしておきます。</p>
+
+<p>head の中には2つのスタイルのブロックがあります。 1つ目は、ページへの訪問者がこの例で遊ぶために変更する必要がないものです。 2つ目は、実例で遊びたい項目のどれかです。 通常、1つ目のブロックに実例の CSS をすべて追加してから、2番目のブロックに移動する必要がある規則のセットを選択します。 2番目のブロックの規則は、パターンの基本となる規則、おそらくユーザーが CSS の値を変更してパターンの更新を確認できるような規則にする必要があります。</p>
+
+<p>コンポーネント用の HTML を2回追加する必要があります。 最初に <code>preview</code> クラスの <code>section</code> の中に、次に <code>playable-html</code> クラスの <code>textarea</code> の中にです。</p>
+
+<p>head の中の2番目のブロックからの <code>editable</code> クラスの CSS も、<code>playable-css</code> クラスの <code>textarea</code> にコピーする必要があります。</p>
+
+<p>単純な例は <code><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a></code> で、これは<a href="/ja/docs/Web/CSS/Layout_cookbook/Center_an_element">要素を中央に配置</a>のページに埋め込まれています。 これを使用して、さまざまな細部を正しく追加する方法を確認できます。</p>
+
+<p>リポジトリをフォークしたので、私たちの CSS と JavaScript ファイルをあなたの例と一緒に持っているなら、ブラウザーであなたの実例を開くと、ページに含まれている時と全く同じように動くのを見るでしょう。</p>
+
+<h4 id="Useful_tips" name="Useful_tips">役に立つヒント</h4>
+
+<ol>
+ <li><code>textarea</code> 内で CSS と HTML をインデントしないでください。 代わりにラインの先頭にぶつけてください。 レンダリングすると見栄えがよくなります。</li>
+ <li>必要な画像がある場合は、例と共にディレクトリにポップします。 または、すでにそこにあるものを使用することを歓迎します。</li>
+ <li>インラインスタイルで高さを変更して、<code>textarea</code> の高さを調整できます。</li>
+</ol>
+
+<h3 id="3._Create_a_downloadable_version" name="3._Create_a_downloadable_version">3. ダウンロード版を作成する</h3>
+
+<p>実例にはすべての実例コードが含まれているので、そのすべてを含まない簡単な例を訪問者に提供したいと思います。 実例を <code>--download</code> を付けてコピーしてください。 例えば、<code>center.html</code> には <code>center--download.html</code> という名前のダウンロードバージョンがあります。 このファイルはあなたの最初の例と似ています。 これは単一の HTML ページとしてのパターンの基本バージョンです。 含まれたスタイルシートにある body の CSS 規則を含めると便利かもしれません。 <code><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html">cookbook-template--download.html</a></code> を見ればこれらは出発点として含まれています。</p>
+
+<h3 id="4._Make_a_Pull_Request_with_your_example" name="4._Make_a_Pull_Request_with_your_example">4. あなたの例でプルリクエストをする</h3>
+
+<p><a href="https://github.com/mdn/css-examples">CSS Examples リポジトリ</a>でプルリクエスト（Pull Request、PR）を作成してください。 このようにして、ページを作成する前に必要になる可能性のある例の変更を手助けすることができます。 さらに、この例は実際のものである必要があり、最初に作成するのが理にかなっています。 プルリクエストにパターンの説明とあなたが何を示しているかを含めてください。</p>
+
+<h3 id="5._Create_your_page" name="5._Create_your_page">5. ページを作成する</h3>
+
+<p>あなたの例がマージされたら、あなたのページを作成することができます。 そのためには<a href="/ja/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page-creation_permissions">ページ作成権限</a>付き MSDN アカウントが必要です。 その後、そのページを CSS 料理帳のページのサブページとして作成できます。 <a href="/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">ここに料理帳のページ用のテンプレートがあります</a>。</p>
+
+<p>テンプレートは各セクションの一部になるべきものを説明し、より多くの助けを得るために他の料理帳の例を参照することができます。 これらのページのいずれかの編集ボタンをクリックすると、実装状況データを埋め込むために使用されるマクロや実例などが表示されます。</p>
+
+<p>MDN Wiki の使用に関する一般的なガイダンスが必要な場合は、こちらのヘルプページを参照してください。</p>
+
+<p>質問をする必要がある場合、または誰かにあなたのページを見てもらいたい場合は、<a href="https://discourse.mozilla.org/c/mdn">MDN 談話</a>（Discourse）を利用するか、<a href="/ja/docs/MDN/Community/Conversations#Chat_in_IRC">IRC でチャット</a>してください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">料理帳ページのテンプレート</a></li>
+ <li><a href="https://github.com/mdn/css-examples">CSS Examples リポジトリ</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/grid_wrapper/index.html b/files/ja/web/css/layout_cookbook/grid_wrapper/index.html
new file mode 100644
index 0000000000..4d49e35c4d
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/grid_wrapper/index.html
@@ -0,0 +1,90 @@
+---
+title: グリッドラッパー
+slug: Web/CSS/Layout_cookbook/Grid_wrapper
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。</span></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p dir="ltr" id="docs-internal-guid-30ae4ecd-7fff-36c2-da7d-0fbb6ec4feae">このレシピでは、CSS グリッドの {{cssxref("minmax")}} 関数を使用して、{{cssxref("grid-template-columns")}} プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の（グリッドレイアウトに使う6つの）列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位（ピクセル、em、rem）を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。</p>
+
+<p dir="ltr">外側の2つの列の最大サイズは <code>1fr</code> です。 つまり、グリッドコンテナ内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。</p>
+
+<h2 id="Useful_fallbacks_or_alternative_methods" name="Useful_fallbacks_or_alternative_methods">便利な代替方法</h2>
+
+<p>このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の <code>auto</code> の {{cssxref("margin")}} とともに <code>max-width</code> を設定すると便利です。</p>
+
+<pre class="brush: css">.grid {
+  max-width: 1200px;
+  margin: 0 auto; // コンテナを水平方向に中央揃え
+}
+
+/* ブラウザーがグリッドをサポートしている場合は、max-width と margin を取り除く */
+@supports (display: grid) {
+  .grid {
+    display: grid;
+    /* 他のグリッドのコードはここへ */
+    max-width: none;
+    margin: 0;
+  }
+}</pre>
+
+<p><code>full-width</code> 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます（<a href="https://una.im/">Una Kravets</a> の好意による）。</p>
+
+<pre class="brush: css">.item {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}</pre>
+
+<p>これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
+
+<p>グリッドを使用すると（理由の範囲内で）項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です（詳細については、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドのレイアウトとアクセシビリティ</a>を参照）。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout" id="docs-internal-guid-ae8eafc9-7fff-65b9-8d8c-bb5f1e3c874c">MDN の CSS グリッドレイアウト</a></li>
+ <li>記事:<a href="https://css-irl.info/more-flexibility-with-minmax/"> CSS グリッド: minmax() によるさらなる柔軟性</a>（英語）</li>
+ <li>記事: <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">CSS グリッドを使った脱出</a>（英語）</li>
+</ul>
+
+<p> </p>
diff --git a/files/ja/web/css/layout_cookbook/index.html b/files/ja/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..9b98903a2b
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/index.html
@@ -0,0 +1,86 @@
+---
+title: CSS レイアウト料理帳
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - cookbook
+  - レイアウト
+  - レシピ
+  - 料理帳
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">CSS レイアウト料理帳は、よくあるレイアウトパターンや、あなた自身のサイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。 プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: CSS のレイアウトが初めてならば、最初に <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト学習モジュール</a>を見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。</p>
+</div>
+
+<h2 id="The_Recipes" name="The_Recipes">レシピ</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">レシピ</th>
+   <th scope="col">説明</th>
+   <th scope="col">レイアウト方法</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Media_objects">メディアオブジェクト</a></td>
+   <td>一方が画像でもう一方が説明テキストである二列のボックス。 例えば Facebook の投稿やツイート。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>, {{cssxref("float")}} による代替, {{cssxref("fit-content")}} による寸法制御</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">欄</a></td>
+   <td>段組みレイアウト、フレックスボックス、グリッドの選択</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>, <a href="/ja/docs/Web/CSS/CSS_Columns">段組み</a>, <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Center_an_element">要素を中央に配置</a></td>
+   <td>アイテムを水平および垂直方向に中央に配置する方法</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>, <a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Sticky_footers">張り付くフッター</a></td>
+   <td>コンテンツが短い場合にコンテナーまたはビューポートの最下部に配置されるフッターの作成。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>, <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Split_Navigation">ナビゲーションの分割</a></td>
+   <td>一部のリンクが他と視覚的に分割されているナビゲーションパターン。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">パンくずナビゲーション</a></td>
+   <td>来訪者がページ階層の上の階層に戻ることができるリンクのリストの作成。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/List_group_with_badges">バッジ付きリストグループ</a></td>
+   <td>カウントを表示するバッジの付いたアイテムのリスト。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>, <a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Pagination">ページ付け</a></td>
+   <td>コンテンツのページへのリンク (検索結果など)。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>, <a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Card">カード</a></td>
+   <td>カードのグリッドで表示されるカードコンポーネント。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Grid_wrapper">グリッドラッパー</a></td>
+   <td>グリッドコンテンツを中央のラッパー内に配置するためのもので、はみ出すこともできます。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribute_a_Recipe" name="Contribute_a_Recipe">レシピにご協力を</h2>
+
+<p>MDN 全体として、上記にあるものと同じ形式のレシピを提供していただけると助かります。 例を書くテンプレートやガイドラインは<a href="/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe">こちらのページを見て</a>ください。</p>
diff --git a/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html
new file mode 100644
index 0000000000..f822596444
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html
@@ -0,0 +1,60 @@
+---
+title: バッジ付きリストグループ
+slug: Web/CSS/Layout_cookbook/List_group_with_badges
+tags:
+  - CSS
+  - Layout
+  - box alignment
+  - cookbook
+  - flexbox
+  - lists
+translation_of: Web/CSS/Layout_cookbook/List_group_with_badges
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary"><span class="seoSummary">このレシピでは、カウントを示すバッジ付きのリストグループのパターンを作成します。</span></p>
+
+<p><img alt="テキストの右側に表示されるカウントを示すバッジ付きの項目のリスト。" src="https://mdn.mozillademos.org/files/16255/list-group-badges.png" style="height: 423px; width: 791px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>項目のコンテンツ量に関係なく、リスト項目の右側にバッジを並べて表示する必要があります。 1行のコンテンツでも、複数行のコンテンツでも、バッジは常に垂直方向の中央に配置する必要があります。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>フレックスボックスは、この特定のパターンを簡単にし、またレイアウトの変更を容易にします。</p>
+
+<p>テキストとバッジが正しく並ぶようにするために、{{cssxref("justify-content")}} プロパティに <code>space-between</code> の値を使用します。 これにより、項目間に余分なスペースが入ります。 実際の例では、このプロパティを削除すると、テキストが1行より短い項目のバッジがテキストの末尾に移動します。</p>
+
+<p>コンテンツを垂直方向に揃えるには、{{cssxref("align-items")}} プロパティを使用してテキストとバッジを交差軸上で揃えます。 代わりに、バッジをコンテンツの上部に揃える場合は、これを <code>align-items: flex-start</code> に変更します。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="justify-content" name="justify-content">justify-content</h4>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h4 id="align-items" name="align-items">align-items</h4>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスボックスでのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/media_objects/index.html b/files/ja/web/css/layout_cookbook/media_objects/index.html
new file mode 100644
index 0000000000..3fbb3dc75d
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/media_objects/index.html
@@ -0,0 +1,89 @@
+---
+title: 'レシピ: メディアオブジェクト'
+slug: Web/CSS/Layout_cookbook/Media_objects
+tags:
+  - CSS
+  - Layout
+  - Media object
+  - Recipe
+  - cookbook
+  - fit-content
+  - float
+  - grid
+translation_of: Web/CSS/Layout_cookbook/Media_objects
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><em>メディアオブジェクト</em>は、ウェブ上のいたるところで見られるパターンです。 <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Nicole Sullivan によって命名</a>され、それは一方の側に画像を、そして他方の側に説明的なテキストを有する Facebook の投稿やツイートのような2列のボックスを指します。</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+
+<h2 id="Requirements" name="Requirements">必要条件</h2>
+
+<p>メディアオブジェクトのパターンには、次の特性の一部または全部が必要です。</p>
+
+<ul>
+ <li>モバイルでは積み重ね、デスクトップでは2列です。</li>
+ <li>画像は左右どちらでもかまいません。</li>
+ <li>画像は小さい場合も大きい場合もあります。</li>
+ <li>メディアオブジェクトはネストできます。</li>
+ <li>メディアオブジェクトは、どちらの側が最も高いかに関係なく、コンテンツをクリアする（区切る）必要があります。</li>
+</ul>
+
+<h2 id="The_recipe" name="The_recipe">レシピ</h2>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>必要に応じて2次元でレイアウトを制御できるため、メディアオブジェクトに<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッドレイアウト</a>を使用することを選択しました。 つまり、フッターがあり、その上に短いコンテンツがある場合、そのフッターはそのメディアオブジェクトの下部にまで押し下げられます。</p>
+
+<p>グリッドレイアウトを使用するもう1つの理由は、画像のトラックのサイズ変更に {{cssxref("fit-content")}} を使用できるようにするためです。 最大サイズが 200 ピクセルの <code>fit-content</code> を使用すると、アイコンのような小さい画像がある場合、トラックはその画像のサイズ、つまり <code>max-content</code> のサイズと同じサイズになります。 画像が大きい場合、トラックは 200 ピクセルで拡大しなくなり、画像には 100% の {{cssxref("max-width")}} が適用されるため、列の内側に収まるように縮小されます。</p>
+
+<p>レイアウトを実現するために {{cssxref("grid-template-areas")}} を使用することで、CSS でこのパターンを見ることができます。 max-width が 500 ピクセルになったら、グリッドを定義します。 そのため、より小さいデバイスではメディアオブジェクトが積み重ねられます。</p>
+
+<p>パターンのオプションはそれを反転して画像を反対側に切り替えることです — これはレイアウトを反映させる反転グリッドテンプレートを定義する <code>media-flip</code> クラスを追加することによって行われます。</p>
+
+<p>あるメディアオブジェクトを別のメディアオブジェクトの中にネストするときは、通常のレイアウトでは2番目のトラックに、反転したときは最初のトラックに配置する必要があります。</p>
+
+<h2 id="Fallbacks" name="Fallbacks">代替方法</h2>
+
+<p>サポートしたいブラウザーに応じて、このパターンにはいくつかの代替方法があります。 良いキャッチオールは、画像を左に浮かべること、そしてそれがフロートを含むことを確実にするためにボックスに clearfix ハックを追加することです。</p>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>浮動要素がグリッド項目になると、そのフロートは適用されなくなるため、フロートを除去するために特別なことをする必要はありません。</p>
+
+<p>する必要があるのは、項目に適用されているすべてのマージンと、グリッドのコンテキストで必要としていないすべての幅を取り除くことです（グリッドでそれを制御するための {{cssxref("gap")}} プロパティがあり、トラックがサイズを制御します）。</p>
+
+<h2 id="Relevant_resources_on_MDN" name="Relevant_resources_on_MDN">MDN の関連資料</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">プログレッシブエンハンスメントとグリッドレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域の使用</a></li>
+ <li><a href="/ja/docs/Web/CSS/fit-content">fit-content</a></li>
+ <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用しているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<p>このページの互換性テーブルは構造化データから生成されます。 データに貢献したい場合は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックして、プルリクエストを送ってください。</p>
+
+<h4 id="grid-template-areas" name="grid-template-areas">grid-template-areas</h4>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h4 id="float" name="float">float</h4>
+
+<p>{{Compat("css.properties.float")}}</p>
diff --git a/files/ja/web/css/layout_cookbook/pagination/index.html b/files/ja/web/css/layout_cookbook/pagination/index.html
new file mode 100644
index 0000000000..60821375f6
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/pagination/index.html
@@ -0,0 +1,85 @@
+---
+title: ページ付け
+slug: Web/CSS/Layout_cookbook/Pagination
+tags:
+  - CSS
+  - Layout
+  - cookbook
+  - flexbox
+  - pagination
+translation_of: Web/CSS/Layout_cookbook/Pagination
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">この料理帳のパターンは、ページ付け（pagination）を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。</p>
+
+<p><img alt="ページ付きリスト内のページのセットへのリンク" src="https://mdn.mozillademos.org/files/16279/pagination.png" style="height: 192px; width: 950px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>ページ付けのパターンは通常、項目を1行に表示します。 スクリーンリーダーを使用している人がページ付けであることを理解できるようにするために、項目を {{htmlelement("nav")}} 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に1行として表示します。</p>
+
+<p>通常、ページ付けのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>このパターンは、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>を使用してレイアウトされています — 一方のフレックスコンテナは別のフレックスコンテナの中にネストされています。 {{htmlelement("nav")}} 要素は、{{cssxref("justify-content")}} プロパティを使用してリストを中央に配置できるように、フレックスコンテナとして指定されています。</p>
+
+<p>リスト自体も、項目を行としてレイアウトするためのフレックスコンテナになります。 項目を配置するために、フレックス項目には {{cssxref("margin")}} を使用します。</p>
+
+<h2 id="Alternative_methods" name="Alternative_methods">代替方法</h2>
+
+<p>{{cssxref("column-gap")}} プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。</p>
+
+<pre class="brush: css">.pagination {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+</pre>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
+
+<p>スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、<code>&lt;nav&gt;</code> 要素に <code>aria-label="pagination"</code> を追加しました。</p>
+
+<p>スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に <code>aria-hidden</code> 属性を設定しました。</p>
+
+<p>このドキュメントの最後にある「関連情報」セクションには、関連するアクセシビリティのトピックへのリンクがあります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p><em>Include the compat data for key properties you used, as in the example below which includes align-items.</em></p>
+</div>
+
+<h4 id="justify-content" name="justify-content">justify-content</h4>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h4 id="column-gap_in_Flex_layout" name="column-gap_in_Flex_layout">フレックスレイアウトの column-gap</h4>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("justify-content")}}、{{Cssxref("column-gap")}}</li>
+ <li><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">ARIA を知る: 「Hidden」対「None」</a>（英語）</li>
+ <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">スクリーンリーダーのユーザーには見えないコンテンツ</a>（英語）</li>
+ <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">アクセシビリティを意識した CSS の書き方</a>（英語）（<a href="https://frasco.io/writing-css-with-accessibility-in-mind-4fc82b26aecb">日本語訳</a>）</li>
+ <li><a href="https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">アクセシビリティ（a11y）スタイルガイド: ページ付け</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/split_navigation/index.html b/files/ja/web/css/layout_cookbook/split_navigation/index.html
new file mode 100644
index 0000000000..beb0d732d9
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/split_navigation/index.html
@@ -0,0 +1,55 @@
+---
+title: ナビゲーションの分割
+slug: Web/CSS/Layout_cookbook/Split_Navigation
+tags:
+  - CSS
+  - Layout
+  - Navigation
+  - Recipe
+  - cookbook
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">1つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。</span></p>
+
+<p><img alt="2つのグループに分けられた項目。" src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>一般的なナビゲーションのパターンは、ある要素を他の要素から押しのけることです。 2セットの項目を2つの別々のフレックスコンテナにする必要なく、フレックスボックスを使用してこれを実現できます。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。</p>
+
+<p>自動マージンは、適用される方向に利用可能なすべてのスペースを吸収します。 これは、自動マージンを使ってブロックを中央に配置する方法です — ブロックの両側にスペースをすべて取ろうとすると、ブロックが中央に押し込まれます。</p>
+
+<p>この場合、左の自動マージンは利用可能なスペースをすべて占め、項目を右に押します。 リスト内の任意の項目にクラス <code>push</code> を適用できます。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="Flexbox" name="Flexbox">フレックスボックス</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/sticky_footers/index.html b/files/ja/web/css/layout_cookbook/sticky_footers/index.html
new file mode 100644
index 0000000000..07ce9b5e34
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/sticky_footers/index.html
@@ -0,0 +1,77 @@
+---
+title: 固定フッター
+slug: Web/CSS/Layout_cookbook/Sticky_footers
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - cookbook
+  - flexbox
+  - grid
+  - sticky footer
+translation_of: Web/CSS/Layout_cookbook/Sticky_footers
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。</span></p>
+
+<p><img alt="ボックスの底に押し込まれた張り付くフッター" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>固定フッターのパターンは、次の要件を満たす必要があります。</p>
+
+<ul>
+ <li>コンテンツが短い場合、フッターはビューポートの下部に固定されます。</li>
+ <li>ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。</li>
+</ul>
+
+<h2 id="The_recipe" name="The_recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">この例をダウンロードする</a></p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: この例と以下の例では、ライブ例がうまくいくように、<code>min-height: 100%</code> に設定された <code>wrapper</code> を使用しています。 また、{{htmlelement("body")}} で {{cssxref("min-height")}} を <code>100vh</code> に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。</p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 <code>.wrapper</code> の最小の高さは <code>100%</code> です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。</p>
+
+<p>グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは <code>1fr</code> トラックに、フッターは最後の自動サイズ調整トラックに入ります。<code>1fr</code> トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。</p>
+
+<h2 id="Alternate_method" name="Alternate_method">代替方法</h2>
+
+<p>グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+
+<p>フレックスボックスの例は同じように始まりますが、<code>.wrapper</code> では <code>display: grid</code> ではなく <code>display: flex</code> を使用し、<code>flex-direction</code> を <code>column</code> に設定します。次に、メインコンテンツを <code>flex-grow: 1</code> に設定し、他の2つの要素を <code>flex-shrink: 0</code> に設定します — これにより、コンテンツがメイン領域いっぱいになったときにそれらが小さく縮小されるのを防ぎます。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<h4 id="grid-template-rows" name="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h4 id="flex-direction" name="flex-direction">flex-direction</h4>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h4 id="flex-grow" name="flex-grow">flex-grow</h4>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h4 id="flex-shrink" name="flex-shrink">flex-shrink</h4>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Resources_on_MDN" name="Resources_on_MDN">MDN にある資料</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+</ul>