CSS Box Alignments 関係の文書を更新

- 2021/10/17 時点の英語版に同期
- 一部および画像は新規翻訳

12 files changed, 380 insertions, 237 deletions

diff --git a/files/ja/web/css/css_box_alignment/align-container-subjects.png b/files/ja/web/css/css_box_alignment/align-container-subjects.png
new file mode 100644
index 0000000000..8b4cb125bb
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/align-container-subjects.png
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
index 2cb47a5709..4dc5b13a72 100644
--- a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
@@ -2,79 +2,71 @@
 title: ブロック、絶対配置、表レイアウトのブロック配置
 slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
 tags:
+  - ブロック
   - CSS
-  - ブロックレイアウト
-  - ボックス配置
+  - ガイド
   - 絶対配置
+  - ボックス配置
   - 表
 translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
 ---
-<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置仕様書</a>は、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方法に共通のボックス配置の共通機能について説明している、中心となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページを併せて読んでください。</p>
-
-<div class="note">
-<p><strong>Note</strong>: At the time of writing (May 2018), there is no real support for the box alignment properties in block layout. This document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.</p>
-</div>
-
-<h2 id="align-content_and_justify-content" name="align-content_and_justify-content">align-content と justify-content</h2>
+[ボックス配置仕様書](/ja/docs/Web/CSS/CSS_Box_Alignment)は、様々なレイアウト方式でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方式に共通のボックス配置の共通機能について説明している、中心となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを併せて読んでください。
 
-<p>The {{cssxref("justify-content")}} property does not apply to block containers or table cells.</p>
+> **Note:** 執筆時点 (2018 年 5 月) では、ブロックレイアウトのボックス配置プロパティへの対応は実際にはありません。この文書では完全性を保つために、仕様がこれらのプロパティをどのように実装することを期待しているかを詳細に説明していますが、仕様やブラウザーの実装が発展するにつれて変更される可能性があります。
 
-<p>The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as <code>space-between</code>, <code>space-around</code> or <code>space-evenly</code> is requested then the fallback alignment will be used, as the content is treated as a single <a href="/ja/docs/Glossary/Alignment_Subject">alignment subject</a>.</p>
+## align-content と justify-content
 
-<h2 id="justify-self">justify-self</h2>
+{{cssxref("justify-content")}} プロパティは、ブロックコンテナーや表のセルには適用されません。
 
-<p>The {{cssxref("justify-self")}} property is used to align an item inside its containing block on the inline axis.</p>
+{{cssxref("align-content")}} プロパティは、ブロック軸に適用され、ボックスの内容物をそのコンテナー内で整列させるためのものです。`space-between`、`space-around`、`space-evenly` などの内容物配分方法が要求されている場合は、内容物が 1 つの[配置対象物](/ja/docs/Glossary/Alignment_Subject)として扱われるため、代替配置が使用されます。
 
-<p>This property does not apply to floated elements or table cells.</p>
+## justify-self
 
-<h3 id="Absolutely_positioned_elements" name="Absolutely_positioned_elements">絶対配置要素</h3>
+{{cssxref("justify-self")}} プロパティは、インライン軸上で包含ブロックの内部にアイテムを配置するために使用されます。
 
-<p>The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to <code>stretch</code>, unless the positioned item is a replaced element, in which case it resolves to <code>start</code>.</p>
+このプロパティは浮動要素や表のセルには適用されません。
 
-<h2 id="align-self">align-self</h2>
+## align-self
 
-<p>The {{cssxref("align-self")}} property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. It also does not apply to table cells.</p>
+{{cssxref("align-self")}} プロパティは、ブロックレベルボックスには (浮動要素を含め) 適用されません。ブロック軸に複数のアイテムがあるからです。表のセルにも適用されません。
 
-<h3 id="Absolutely_positioned_elements_2" name="Absolutely_positioned_elements_2">絶対配置要素</h3>
+### 絶対配置要素
 
-<p>The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to <code>stretch</code>, unless the positioned item is a replaced element, in which case it resolves to <code>start</code>.</p>
+配置コンテナーは、上、左、下、右のオフセット値を考慮して位置指定されたブロックです。normal キーワードは `stretch` に解決されますが、その位置指定アイテムが置換要素である場合は `start` に解決されます。
 
-<h2 id="Aligning_in_these_layout_methods_today">Aligning in these layout methods today</h2>
+## 現在のレイアウト方法での整列
 
-<p>As we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.</p>
+現在、ブラウザーはブロックレイアウトでのボックス配置に対応していないため、整列には既存の配置方法のいずれかを使用するか、コンテナー内の 1 つのアイテムでもフレックスボックスで指定された配置プロパティを使用するためにフレックスアイテムにするかのいずれかを選択できます。
 
-<p>Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A {{cssxref("margin")}} of <code>auto</code> will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center:</p>
+フレックスボックスが導入される前のブロックの水平方向の整列は、ブロックに auto のマージンを設定する方法が一般的でした。{{cssxref("margin")}} を `auto` に設定すると、その次元で利用可能なすべての空間を吸収するため、左右のマージンを自動に設定すると、ブロックを中央に配置することができます。
 
-<pre class="brush: css">.container {
+```css
+.container {
   width: 20em;
   margin-left: auto;
   margin-right: auto;
 }
-</pre>
+```
 
-<p>In table layout, you have access to the {{cssxref("vertical-align")}} property to align the contents of a cell inside that cell.</p>
+表レイアウトでは、{{cssxref("vertical-align")}} プロパティを使用して、セルの内容をそのセル内で配置させることができます。
 
-<p>For many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. In the example below, a container with a single item inside has been turned into a flex container for the purpose of being able to use the alignment properties.</p>
+多くの利用場面では、ブロックコンテナーをフレックスアイテムに変えることで、求めていた配置機能が得られます。以下の例では、アイテムが 1 つだけ入っているコンテナーを、配置プロパティを使用できるようにするためにフレックスコンテナーに変えています。
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+### CSS プロパティ
 
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("align-self")}}</li>
-</ul>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
 
-<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3>
+### 用語集の項目
 
-<ul>
- <li><a href="/ja/docs/Glossary/Alignment_Subject">Alignment subject</a></li>
- <li><a href="/ja/docs/Glossary/Alignment_Container">Alignment container</a></li>
- <li><a href="/ja/docs/Glossary/Fallback_Alignment">Fallback alignment</a></li>
-</ul>
+- [配置対象物](/ja/docs/Glossary/Alignment_Subject)
+- [配置コンテナー](/ja/docs/Glossary/Alignment_Container)
+- [代替配置](/ja/docs/Glossary/Fallback_Alignment)
 
-<p>{{CSSRef}}</p>
+{{CSSRef}}
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
new file mode 100644
index 0000000000..4bd3cca603
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
@@ -0,0 +1,98 @@
+---
+title: フレックスボックスでのボックス配置
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+tags:
+  - CSS
+  - ガイド
+  - ボックス配置
+  - フレックスボックス
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+---
+{{CSSRef}}
+
+[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを合わせてお読みください。
+
+## 基本的な例
+
+この例では、3 つのフレックスアイテムが {{cssxref("justify-content")}} を使用して主軸に、 {{cssxref("align-items")}} を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された `align-items` の値を上書きし、 {{cssxref("align-self")}} で `center` に設定しています。
+
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}
+
+## 軸と flex-direction
+
+フレックスボックスは文書の書字方向を尊重しますので、英語の場合で {{cssxref("justify-content")}} が `flex-end` に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 {{cssxref("flex-direction")}} が `row` に設定されていた場合、この配置はインライン方向になります。
+
+しかし、フレックスボックスでは `flex-direction` を `column` に設定することで、主軸を変更することができます。この場合、 `justify-content` はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差じっくについて次のように考えると最も簡単です。
+
+- 主軸 = `flex-direction` で設定された向き = `justify-content` で配置
+- 交差軸 = 主軸と交差 = `align-content`, `align-self`/`align-items` で配置
+
+### 主軸の配置
+
+- {{cssxref("justify-content")}}
+
+### 交差軸の配置
+
+- {{cssxref("align-self")}}
+- {{cssxref("align-items")}}
+- {{cssxref("align-content")}}
+
+### フレックスボックスには justify-self はない
+
+主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。`justify-content` プロパティは、どのように残りの領域を使用するかを制御します。`justify-content: flex-end` に設定すると、余分な領域はアイテムの前に配置され、`justify-content: space-around` に設定すると、その大きさアイテムの両側に配置される、などです。
+
+つまり、常にアイテムのグループ全体が動き回るよう配分されるため、`justify-self` プロパティはフレックスボックスでは意味を持ちません。
+
+交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 `align-self` は意味を持ちます。
+
+## alignment および auto のマージン
+
+`justify-self` プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに `auto` を使用することができます。 `auto` に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを `auto` に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。
+
+開始点に配置された一連のフレックスアイテムのうち、1 つのアイテムで {{cssxref("margin")}} を `auto` に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、空間に収まるように縮小します。
+
+{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}
+
+## `gap` プロパティ
+
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+### アイテム間における固定幅の間隔の作成
+
+主軸では、`column-gap` プロパティは兄弟アイテムの間に固定幅の間隔を作成します。
+
+交差軸では、`row-gap` プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには `flex-wrap` を `wrap` に設定する必要があります。
+
+{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/gap.html", '100%', 700)}}
+
+## リファレンス
+
+### CSS プロパティ
+
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("place-content")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("align-items")}}
+- {{cssxref("place-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+### 用語集の項目
+
+- {{Glossary("Cross axis", "交差軸")}}
+- {{Glossary("Main axis", "主軸")}}
+
+## ガイド
+
+- [フレックスボックスでの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)
+
+## 外部リソース
+
+- [Box alignment cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)
+- [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
+- [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/block_axis.png b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/block_axis.png
new file mode 100644
index 0000000000..8eb84a0d2b
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/block_axis.png
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
new file mode 100644
index 0000000000..a36b5ea7f3
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
@@ -0,0 +1,100 @@
+---
+title: グリッドレイアウトでのボックス配置
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout
+tags:
+  - CSS
+  - ガイド
+  - ボックス配置
+  - グリッド
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout
+---
+{{CSSRef}}
+
+[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、 [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)においてボックス配置がどのように働くかを探ります。
+
+このページの目的は、CSS グリッドレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを合わせてお読みください。
+
+## 基本的な例
+
+このグリッドレイアウトの例では、固定幅のトラックをインライン (主) 軸にレイアウトした後、グリッドコンテナーに余分な空間があります。この空間を `justify-content` で分配しています。ブロック (交差) 軸では、グリッド領域内のアイテムの配置を `align-items` で制御しています。最初のアイテムは、グループに設定された `align-items` の値を、`align-self` を `center` に設定することでオーバーライドしています。
+
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}
+
+## グリッド軸
+
+2 次元のレイアウト手法であるグリッドレイアウトでは、アイテムを配置する軸が常に 2 つあります。これを実現するために、すべてのボックス配置プロパティを利用することができます。
+
+インライン軸は、使用されている書字方向において、文中の単語が走る方向に対応する軸です。したがって、英語やアラビア語のような横書きの言語では、インラインの方向は水平方向になります。縦書きの場合は、インライン軸は縦方向になります。
+
+![](inline_axis.png)
+
+インライン軸上に配置するには `justify-` で始まるプロパティ、{{cssxref("justify-content")}}、{{cssxref("justify-items")}}、{{cssxref("justify-self")}} を使用します。
+
+ブロック軸は、ブロックがページの下に表示される方向にインライン軸と交差しています。例えば、英語の段落は縦に 1 つずつ表示されます。つまり、これがブロック軸です。
+
+ブロック軸上でものを揃えるには、`align-` で始まるプロパティ、{{cssxref("align-content")}}、{{cssxref("align-items")}}、{{cssxref("align-self")}} を使用します。
+
+![](block_axis.png)
+
+## 自己配置
+
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
+- {{cssxref("place-self")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("align-items")}}
+- {{cssxref("place-items")}}
+
+これらのプロパティは、アイテムが配置されたグリッド領域内に整列させるためのものです。`align-items` および `justify-items` プロパティはグリッドコンテナーに適用され、グループとして `align-self` および `justify-self` プロパティを設定します。つまり、すべてのグリッドアイテムの配置を一度に設定し、異なる配置が必要なアイテムは、個々のグリッドアイテムのルールに `align-self` または `justify-self` プロパティを適用してオーバーライドすることができるのです。
+
+`align-self` および `justify-self` の初期値は `stretch` で、アイテムはグリッド領域全体に伸縮します。この規則の例外は、アイテムが固有のアスペクト比を持っている場合、例えば画像などです。この場合、画像が歪まないように、アイテムは両方の次元で `start` に揃えられます。
+
+## 内容物の配置
+
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("place-content")}}
+
+これらのプロパティは、グリッドトラックを分配するための空間が余っている場合に、トラックの位置を調整するためのものです。このシナリオは、定義したトラックの合計がグリッドコンテナーの幅の合計よりも小さい場合に発生します。
+
+## gap と古い grid-gap プロパティ
+
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+グリッド仕様書は、もとは {{cssxref("row-gap", "grid-row-gap")}}、{{cssxref("column-gap", "grid-column-gap")}}、{{cssxref("gap", "grid-gap")}} の各プロパティの定義がありました。これらはボックス配置仕様書に移され、{{cssxref("row-gap")}}、{{cssxref("column-gap")}}、{{cssxref("gap")}} と改名されました。これによって、他のレイアウト方式でもアイテム間の溝に使用することができるようになりました。
+
+更新されたプロパティは、まだすべてのブラウザーには実装されていません。したがって、グリッドレイアウトで gap のプロパティを使用する場合は、完全な互換性を確保するために、`grid-row-gap`、`grid-column-gap`、`grid-gap` の各バージョンを使用する必要があります。ベンダー接頭辞と同じように、両方を使用してプロパティを重複利用することもできます。
+
+## リファレンス
+
+### CSS プロパティ
+
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("place-content")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("align-items")}}
+- {{cssxref("place-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
+- {{cssxref("place-self")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+### 用語集の項目
+
+- [交差軸](/ja/docs/Glossary/Cross_Axis)
+- [主軸](/ja/docs/Glossary/Main_Axis)
+
+## ガイド
+
+- [グリッドレイアウトでの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+
+## 外部リソース
+
+- [Box alignment cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)
+- [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
+- [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/inline_axis.png b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/inline_axis.png
new file mode 100644
index 0000000000..9d377bcc91
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/inline_axis.png
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
index 569a5e52af..3e8ee3c802 100644
--- a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
@@ -3,49 +3,39 @@ title: 段組みレイアウトでのボックス配置
 slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
 tags:
   - CSS
-  - CSS ボックス配置
-  - CSS 段組みレイアウト
+  - ガイド
+  - ボックス配置
   - 段組み
 translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>仕様書では、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、<a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>のコンテキストでボックス配置がどのように動作するかを探ります。このページとしての目的は、段組みレイアウトとボックス配置に特有のことを探ることですので、レイアウト方法をまたがるボックス配置の共通の機能の詳細を詳説している、中心となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページと併せて読んでください。</p>
+[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、[段組みレイアウト](/ja/docs/Web/CSS/CSS_Columns)のコンテキストにおいてボックス配置がどのように働くかを探ります。このページとしての目的は、段組みレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを合わせてお読みください。
 
-<p>段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置主題は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。</p>
+段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置対象物は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。
 
-<div class="note">
-<p><strong>メモ</strong>: 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。</p>
-</div>
+> **Note:** 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。
 
-<h2 id="align-content_and_justify-content" name="align-content_and_justify-content">align-content と justify-content</h2>
+## align-content と justify-content
 
-<p>{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。</p>
+{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。
 
-<p><code>justify-content</code> に <code>normal</code> または <code>stretch</code> 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。</p>
+`justify-content` に `normal` または `stretch` 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。
 
-<h2 id="column-gap">column-gap</h2>
+## column-gap
 
-<p>段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方法の gap プロパティと統合されました。他のレイアウト方法では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。</p>
+段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方式の gap プロパティと統合されました。他のレイアウト方式では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+### CSS プロパティ
 
-<div class="index">
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("column-gap")}}</li>
-</ul>
-</div>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("column-gap")}}
 
-<h3 id="Glossary_Entries" name="Glossary_Entries">用語集</h3>
+### 用語集の項目
 
-<div class="index">
-<ul>
- <li><a href="/ja/docs/Glossary/Alignment_Subject">配置主題</a></li>
- <li><a href="/ja/docs/Glossary/Alignment_Container">配置コンテナー</a></li>
- <li><a href="/ja/docs/Glossary/Fallback_Alignment">代替配置</a></li>
-</ul>
-</div>
+- [配置対象物](/ja/docs/Glossary/Alignment_Subject)
+- [配置コンテナー](/ja/docs/Glossary/Alignment_Container)
+- [代替配置](/ja/docs/Glossary/Fallback_Alignment)
diff --git a/files/ja/web/css/css_box_alignment/index.md b/files/ja/web/css/css_box_alignment/index.md
index a220b68112..830ea9735c 100644
--- a/files/ja/web/css/css_box_alignment/index.md
+++ b/files/ja/web/css/css_box_alignment/index.md
@@ -4,250 +4,213 @@ slug: Web/CSS/CSS_Box_Alignment
 tags:
   - CSS
   - CSS ボックス配置
-  - alignment
-  - box alignment
   - グリッドレイアウト
+  - ガイド
+  - 配置
+  - ボックス配置
   - フレックスボックス
-  - 段組みレイアウト
+  - 段組み
 translation_of: Web/CSS/CSS_Box_Alignment
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary"><ruby>CSS ボックス配置<rp> (</rp><rt>CSS Box Alignment</rt><rp>) </rp></ruby>モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。</p>
+CSS ボックス配置 (CSS Box Alignment) モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。
 
-<div class="note">
-<p><strong>メモ</strong>: ボックス配置がどのように適用されるかは、各レイアウト方法のドキュメントに詳しく記載されています。</p>
-</div>
+> **Note:** ボックス配置がどのように適用されるかは、各レイアウト方式のドキュメントに詳しく記載されています。
 
-<h2 id="古い配置方法">古い配置方法</h2>
+## 古い配置方法
 
-<p>CSS は伝統的に、配置機能がとても制約されていました。 {{cssxref("text-align")}} を使用してテキストの配置を指定したり、 {{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、 {{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置は<a href="https://www.w3.org/TR/css-inline-3/">インラインレイアウト</a>および <a href="https://www.w3.org/TR/css-text-3/">CSS テキスト</a>モジュールによってカバーされるようになり、ボックス配置の最初で、完全な水平方向と垂直方向の配置の機能を持ちました。</p>
+CSS は伝統的に、配置機能がとても制約されていました。{{cssxref("text-align")}} を使用してテキストの配置を指定したり、{{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、{{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置は[インラインレイアウト](https://www.w3.org/TR/css-inline-3/)および [CSS テキスト](https://www.w3.org/TR/css-text-3/)モジュールによってカバーされるようになり、ボックス配置の初期に、完全な水平方向と垂直方向の配置の機能を持ちました。
 
-<p>先に<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>を学んでいるのであれば、これらのプロパティはフレックスボックスの使用の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル1に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。</p>
+先に[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)を学んでいるのであれば、これらのプロパティはフレックスボックスの仕様の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル 1 に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。
 
-<h2 id="Basic_examples" name="Basic_examples">基本的な例</h2>
+## 基本的な例
 
-<p>次の例は、ボックス配置のプロパティの一部が<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッド</a>と<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>にどのように適用されるかを示しています。</p>
+次の例は、ボックス配置のプロパティの一部が[グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)と[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)にどのように適用されるかを示しています。
 
-<h3 id="CSS_grid_layout_alignment_example" name="CSS_grid_layout_alignment_example">CSS グリッドレイアウトの配置の例</h3>
+## CSS グリッドレイアウトの配置の例
 
-<p>グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナ内に余分な空白が残っています。この空白は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を <code>center</code> に設定して、グループに設定された <code>align-items</code> 値を上書きしています。</p>
+グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナー内に余分な空間が残っています。この空間は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を `center` に設定して、グループに設定された `align-items` 値を上書きしています。
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 700)}}
 
-<h3 id="Flexbox_Alignment_Example" name="Flexbox_Alignment_Example">フレックスボックスの配置の例</h3>
+### フレックスボックスの配置の例
 
-<p>この例では、3 つのフレックスアイテムが <code>justify-content</code> を使用して主軸上に配置され、 <code>align-items</code> を使用して交差軸上に配置されています。 最初のアイテムは<code>align-self</code> を <code>center</code> に設定して、グループに設定された <code>align-items</code> を上書きしています。</p>
+この例では、3 つのフレックスアイテムが `justify-content` を使用して主軸上に配置され、 `align-items` を使用して交差軸上に配置されています。 最初のアイテムはグループに設定された `align-items` を、 `align-self` を `center` に設定することで上書きしています。
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 700)}}
 
-<h2 id="Key_concepts_and_terminology" name="Key_concepts_and_terminology">主要概念と用語</h2>
+## 主要概念と用語
 
-<p>この仕様書では、個別のレイアウト方法の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方法に共通する、いくつかの重要な概念もあります。</p>
+この仕様書では、個別のレイアウト方式の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方式に共通する、いくつかの重要な概念もあります。
 
-<h3 id="Relationship_to_writing_modes" name="Relationship_to_writing_modes">書字方向との関連</h3>
+## 書字方向との関連
 
-<p>配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の距離の開始と終了によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。</p>
+配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の方向の先頭や末尾によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。
 
-<h3 id="Two_dimensions_of_alignment" name="Two_dimensions_of_alignment">二次元の配置</h3>
+### 二次元の配置
 
-<p>ボックス配置プロパティを使用すると、コンテンツは二本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの一本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。</p>
+ボックス配置プロパティを使用すると、コンテンツは 2 本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの 1 本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p>
+![](two-axes.png)
 
-<p>インライン軸上でアイテムを整列するときは、 <code>justify-</code> で始まるプロパティを使用します。</p>
+インライン軸上でアイテムを整列するときは、 `justify-` で始まるプロパティを使用します。
 
-<ul>
- <li>{{cssxref("justify-items")}}</li>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("justify-content")}}</li>
-</ul>
+- {{cssxref("justify-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("justify-content")}}
 
-<p>ブロック軸上でアイテムを整列するときは、 <code>align-</code> で始まるプロパティを使用します。</p>
+ブロック軸上でアイテムを整列するときは、 `align-` で始まるプロパティを使用します。
 
-<ul>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("align-content")}}</li>
-</ul>
+- {{cssxref("align-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("align-content")}}
 
-<p>フレックスボックスはさらに複雑であり、 {{cssxref("flex-direction")}} が <code>row</code> に設定されている場合に上記のものが当てはまります。フレックスボックスが <code>column</code> に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。 <code>justify-</code> プロパティは常に主軸上で、 <code>align-</code> プロパティは交差軸上で配置するために使用されます。</p>
+フレックスボックスはさらに複雑であり、上記のことが言えるのは {{cssxref("flex-direction")}} が `row` に設定されている場合です。フレックスボックスが `column` に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。`justify-` プロパティは常に主軸上で、`align-` プロパティは交差軸上で配置するために使用されます。
 
-<h3 id="The_alignment_subject" name="The_alignment_subject">配置対象物</h3>
+### 配置対象物
 
-<p><ruby><strong>配置対象物</strong><rp> (</rp><rt>alignment subject</rt><rp>) </rp></ruby>とは、配置が行われるもののことです。 <code>justify-self</code> または <code>align-self</code> の場合、あるいは <code>justify-items</code> または <code>align-items</code> によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。 <code>justify-content</code> および <code>align-content</code> プロパティはレイアウト方法ごとに異なります。</p>
+**配置対象物** (alignment subject) とは、配置が行われるもののことです。`justify-self` または `align-self` の場合、あるいは `justify-items` または `align-items` によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。`justify-content` および `align-content` プロパティはレイアウト方式ごとに異なります。
 
-<h3 id="The_alignment_container" name="The_alignment_container">配置コンテナー</h3>
+### 配置コンテナー
 
-<p><ruby><strong>配置コンテナー</strong><rp> (</rp><rt>alignment container</rt><rp>) </rp></ruby>は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を内包するブロックになります。配置コンテナーには一つまたは多数の配置対象物を含めることができます。</p>
+**配置コンテナー** (alignment container) は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を包含するブロックになります。配置コンテナーには 1 つまたは多数の配置対象物を含めることができます。
 
-<p>下の画像は、内側に2つの整列対象がある配置コンテナーの例です。</p>
+下の画像は、内側に 2 つの配置対象物がある配置コンテナーの例です。
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>
+![](align-container-subjects.png)
 
-<h3 id="Fallback_alignment" name="Fallback_alignment">代替配置</h3>
+### 代替配置
 
-<p>実現できない配置を設定した場合、<strong>代替配置</strong>が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方法ごとに個別に定義されており、それぞれのページで詳しく説明されています。</p>
+実現できない配置を設定した場合、**代替配置**が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方式ごとに個別に定義されており、それぞれのページで詳しく説明されています。
 
-<h2 id="Types_of_alignment" name="Types_of_alignment">配置の種類</h2>
+## 配置の種類
 
-<p>この仕様書が詳述している配置には、3つの異なる種類があります。これらはキーワード値を使用します。</p>
+この仕様書が詳述している配置には、3 つの異なる種類があります。これらはキーワード値を使用します。
 
-<ul>
- <li><ruby><strong>位置指定配置</strong><rp> (</rp><rt>Positional alignment</rt><rp>)</rp></ruby>: 配置対象物の位置を、配置コンテナーからの相対で指定します。</li>
- <li><ruby><strong>ベースライン配置</strong><rp> (</rp><rt>Baseline alignment</rt><rp>)</rp></ruby>: これらのキーワードは、配置コンテナー内にある複数の配置対象物のベースラインの関係で配置を定義します。</li>
- <li><ruby><strong>分配配置</strong><rp> (</rp><rt>Distributed alignment</rt><rp>)</rp></ruby>: これらのキーワードは、配置対象物間の空白の分配で配置を定義します。</li>
-</ul>
+- **位置指定配置** (Positional alignment): 配置対象物の位置を、配置コンテナーからの相対で指定します。
+- **ベースライン配置** (Baseline alignment): これらのキーワードは、配置コンテナー内にある複数の配置対象物のベースラインの関係で配置を定義します。
+- **分配配置** (Distributed alignment): これらのキーワードは、配置対象物間の空間の分配で配置を定義します。
 
-<h3 id="Positional_alignment_keyword_values" name="Positional_alignment_keyword_values">位置指定配置のキーワード値</h3>
+### 位置指定配置のキーワード値
 
-<p>以下の値は位置指定配置のために定義されており、 <code>justify-content</code> および <code>align-content</code> による内容の配置、そして <code>justify-self</code> および <code>align-self</code> による自己配置の値として使用することができます。</p>
+以下の値は位置指定配置のために定義されており、`justify-content` および `align-content` による内容の配置、そして `justify-self` および `align-self` による自己配置の値として使用することができます。
 
-<ul>
- <li><code>center</code></li>
- <li><code>start</code></li>
- <li><code>end</code></li>
- <li><code>self-start</code></li>
- <li><code>self-end</code></li>
- <li><code>flex-start</code> フレックスボックスのみ</li>
- <li><code>flex-end</code> フレックスボックスのみ</li>
- <li><code>left</code></li>
- <li><code>right</code></li>
-</ul>
+- `center`
+- `start`
+- `end`
+- `self-start`
+- `self-end`
+- `flex-start` フレックスボックスのみ
+- `flex-end` フレックスボックスのみ
+- `left`
+- `right`
 
-<p>画面の物理的な属性に関連する <code>left</code> と <code>right</code> の物理値を除いて、他のすべての値は論理値であり、内容の書字方向に関連します。</p>
+画面の物理的な属性に関連する `left` と `right` の物理値を除いて、他のすべての値は論理値であり、内容物の書字方向に関連します。
 
-<p>たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて <code>justify-content</code> に <code>start</code> を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ <code>start</code> の値は、アラビア語の文がページの右側から始まるので、右に移動します。</p>
+たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて `justify-content` に `start` を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ `start` の値は、アラビア語の文がページの右側から始まるので、右に移動します。
 
-<p>どちらの例も <code>justify-content: start</code> ですが、開始位置は書字方向によって異なります。</p>
+どちらの例も `justify-content: start` ですが、開始位置は書字方向によって異なります。
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>
+![](writing-mode-start.png)
 
-<h3 id="Baseline_alignment" name="Baseline_alignment">ベースライン配置</h3>
+### ベースライン配置
 
-<p>ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは <code>justify-content</code> および <code>align-content</code> による内容の配置、そして <code>justify-self</code> および <code>align-self</code> による自己配置の値として使用することができます。</p>
+ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは `justify-content` および `align-content` による内容の配置、そして `justify-self` および `align-self` による自己配置の値として使用することができます。
 
-<ul>
- <li><code>baseline</code></li>
- <li><code>first baseline</code></li>
- <li><code>last baseline</code></li>
-</ul>
+- `baseline`
+- `first baseline`
+- `last baseline`
 
-<p><code>justify-content</code> または <code>align-content</code> のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方法で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。</p>
+`justify-content` または `align-content` のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方式で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。
 
-<p>ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は <code>justify-self</code> または <code>align-self</code> を使用する場合、あるいは <code>justify-items</code> または <code>align-items</code> を使用してこれらの値をグループとして設定する場合に行われます。</p>
+ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は `justify-self` または `align-self` を使用する場合、あるいは `justify-items` または `align-items` を使用してこれらの値をグループとして設定する場合に行われます。
 
-<h3 id="Distributed_alignment" name="Distributed_alignment">分配配置</h3>
+### 分配配置
 
-<p><strong>分配配置キーワード</strong> は <code>align-content</code> および <code>justify-content</code> で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。</p>
+**分配配置キーワード** は `align-content` および `justify-content` で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。
 
-<ul>
- <li><code>stretch</code></li>
- <li><code>space-between</code></li>
- <li><code>space-around</code></li>
- <li><code>space-evenly</code></li>
-</ul>
+- `stretch`
+- `space-between`
+- `space-around`
+- `space-evenly`
 
-<p>たとえばフレックスレイアウトでは、初期値の場合アイテムを <code>flex-start</code> で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 <code>flex-direction</code> が <code>row</code> のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。</p>
+たとえばフレックスレイアウトでは、初期値の場合アイテムを `flex-start` で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 `flex-direction` が `row` のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>
+![](justify-content-start.png)
 
-<p>フレックスコンテナーに <code>justify-content: space-between</code> を設定すると、余白はアイテム間に分配されます。</p>
+フレックスコンテナーに `justify-content: space-between` を設定すると、余白はアイテム間に分配されます。
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>
+![](justify-content-space-between.png)
 
-<p>これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。</p>
+これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。
 
-<h2 id="Overflow_alignment" name="Overflow_alignment">配置があふれた場合</h2>
+## 配置があふれた場合
 
-<p><code>safe</code> および <code>unsafe</code> キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 <code>safe</code> キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 <code>start</code> で配置します。</p>
+`safe` および `unsafe` キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 `safe` キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 `start` で配置します。
 
-<p><code>unsafe</code> を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。</p>
+`unsafe` を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。
 
-<h2 id="Gaps_between_boxes" name="Gaps_between_boxes">ボックス間のギャップ</h2>
+## ボックス間のギャップ
 
-<p>ボックス配置仕様書には、 <code>gap</code>, <code>row-gap</code>, <code>column-gap</code> も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方法で、行または列内のアイテム間で一貫したギャップを設定します。</p>
+ボックス配置仕様書には、 `gap`, `row-gap`, `column-gap` も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方式で、行または列内のアイテム間で一貫したギャップを設定します。
 
-<p><code>gap</code> プロパティは <code>row-gap</code> と <code>column-gap</code> の一括指定で、両プロパティを一度に設定することができます。</p>
+`gap` プロパティは `row-gap` と `column-gap` の一括指定で、以下のプロパティを一度に設定することができます。
 
-<ul>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
 
-<p>以下の例では、グリッドレイアウトで <code>gap</code> の一括指定を使用して、行トラック間に <code>10px</code> のギャップと列トラック間に <code>2em</code> のギャップを設定します。</p>
+以下の例では、グリッドレイアウトで `gap` の一括指定を使用して、行トラック間に `10px` のギャップと列トラック間に `2em` のギャップを設定します。
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 700)}}
 
-<p>この例では、 {{cssxref("gap")}} に加えて {{cssxref("grid-gap")}} プロパティを使用しています。 <code>gap</code> プロパティはもともとグリッドレイアウト仕様書の中で <code>grid-</code> という接頭辞をつけられていました。ブラウザーによってはこれらの接頭辞がついたバージョンにしか対応していません。</p>
+> **Note:** 初期のグリッドの実装は `-gap` プロパティに `grid-` 接頭辞を付けていました。すべてのブラウザーが接頭辞なしのプロパティに対応していますが、例やチュートリアルでは古いプロパティである {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, {{cssxref("gap", "grid-gap")}} を見かけることがあるかもしれません。接頭辞つきのものは接頭辞なしの物の別名として保持される予定です。
 
-<ul>
- <li>{{cssxref("grid-row-gap")}}</li>
- <li>{{cssxref("grid-column-gap")}}</li>
- <li>{{cssxref("grid-gap")}}</li>
-</ul>
+また、スペース配分キーワードを使用したり、アイテムに余白を設けたりすると、表示される視覚的な溝が大きくなる場合がありますので注意してください。
 
-<p>接頭辞がついたバージョンは接頭辞がないバージョンの別名として保持されています。 <code>grid-gap</code> プロパティの次に <code>gap</code> を同じ値で追加すれば、ベンダー接頭辞と同じように使用できます。</p>
+## レイアウト別の配置詳細ページ
 
-<p>また、スペース配分キーワードを使用した場合やアイテムにマージンを追加したりした場合など、表示される視覚的なギャップが広がることもあります。</p>
+CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。
 
-<h2 id="Pages_detailing_individual_alignment_properties" name="Pages_detailing_individual_alignment_properties">レイアウト別の配置詳細ページ</h2>
+- [フレックスボックスでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [CSS グリッドレイアウトでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout)
+- [段組みレイアウトでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout)
+- [ブロック、絶対配置、表レイアウトのブロック配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables)
 
-<p>CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。</p>
+## リファレンス
 
-<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/Box_Alignment_In_Grid_Layout">CSS グリッドレイアウトでのボックス配置</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">段組みレイアウトでのボックス配置</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">ブロック、絶対配置、表レイアウトのブロック配置</a></li>
-</ul>
+## CSS プロパティ
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("place-content")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("align-items")}}
+- {{cssxref("place-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
+- {{cssxref("place-self")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
 
-<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+### 用語集の項目
 
-<div class="index">
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("place-content")}}</li>
- <li>{{cssxref("justify-items")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("place-items")}}</li>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("place-self")}}</li>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
-</div>
+- {{Glossary("Cross axis", "交差軸")}}
+- {{Glossary("Main axis", "主軸")}}
+- {{Glossary("Alignment container", "配置コンテナー")}}
+- {{Glossary("Alignment subject", "配置対象物")}}
+- {{Glossary("Fallback alignment", "代替配置")}}
 
-<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3>
+## ガイド
 
-<div class="index">
-<ul>
- <li>{{Glossary("Cross axis", "交差軸")}}</li>
- <li>{{Glossary("Main axis", "主軸")}}</li>
- <li>{{Glossary("Alignment container", "配置コンテナー")}}</li>
- <li>{{Glossary("Alignment subject", "配置対象物")}}</li>
- <li>{{Glossary("Fallback alignment", "代替配置")}}</li>
-</ul>
-</div>
+- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- CSS Flexbox guide: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- CSS グリッド guide: _[CSS グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_
 
-<h2 id="Guides" name="Guides">ガイド</h2>
+## 外部リソース
 
-<ul>
- <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
- <li>CSS Flexbox guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></em></li>
- <li>CSS Grid guide: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトのボックス配置</a></em></li>
-</ul>
-
-<h2 id="External_Resources" name="External_Resources">外部リソース</h2>
-
-<ul>
- <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li>
- <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box alignment</a></li>
- <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box alignment</a></li>
-</ul>
+- [Box alignment cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)
+- [CSS Grid, Flexbox and Box alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
+- [Thoughts on partial implementations of Box alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)
diff --git a/files/ja/web/css/css_box_alignment/justify-content-space-between.png b/files/ja/web/css/css_box_alignment/justify-content-space-between.png
new file mode 100644
index 0000000000..d8e0f042ad
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/justify-content-space-between.png
diff --git a/files/ja/web/css/css_box_alignment/justify-content-start.png b/files/ja/web/css/css_box_alignment/justify-content-start.png
new file mode 100644
index 0000000000..e034f6d83d
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/justify-content-start.png
diff --git a/files/ja/web/css/css_box_alignment/two-axes.png b/files/ja/web/css/css_box_alignment/two-axes.png
new file mode 100644
index 0000000000..dcc1036bf2
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/two-axes.png
diff --git a/files/ja/web/css/css_box_alignment/writing-mode-start.png b/files/ja/web/css/css_box_alignment/writing-mode-start.png
new file mode 100644
index 0000000000..0ecb5ca119
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/writing-mode-start.png