CSS Box Alignment に関する用語集の項目を更新

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

9 files changed, 110 insertions, 123 deletions

diff --git a/files/ja/glossary/alignment_container/index.md b/files/ja/glossary/alignment_container/index.md
index 8751607926..a7bccdecaa 100644
--- a/files/ja/glossary/alignment_container/index.md
+++ b/files/ja/glossary/alignment_container/index.md
@@ -1,17 +1,15 @@
 ---
-title: Alignment container
+title: Alignment container (配置コンテナー)
 slug: Glossary/Alignment_Container
 tags:
-  - Alignment container
+  - 配置コンテナー
   - CSS
-  - Glossary
-  - alignment
+  - 用語集
+  - 配置
 translation_of: Glossary/Alignment_Container
 ---
-<p><strong>アラインメントコンテナー</strong>の四角形の中では、<a href="/ja/docs/Glossary/Alignment_Subject">アラインメントサブジェクト</a>が整列されます。これはレイアウトのモードによって定義されます。通常はアラインメントサブジェクトが内包されているブロックのことを指します。ボックスの writing mode は外側のコンテナーによって決定されます。</p>
+**配置コンテナー**は、中に[配置対象物](/ja/docs/Glossary/Alignment_Subject)が配置される矩形です。これはレイアウトモードによって定義されます。通常は配置対象物を包含しているブロックのことを指します。ボックスの書字方向は外側のコンテナーによって決定されます。
 
-<h2 id="Learn_more" name="Learn_more">関連項目</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li>
-</ul>
+- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)
diff --git a/files/ja/glossary/alignment_subject/index.md b/files/ja/glossary/alignment_subject/index.md
index e1bba10224..0ee4918792 100644
--- a/files/ja/glossary/alignment_subject/index.md
+++ b/files/ja/glossary/alignment_subject/index.md
@@ -1,33 +1,29 @@
 ---
-title: Alignment subject
+title: Alignment subject (配置対象物)
 slug: Glossary/Alignment_Subject
 tags:
-  - Alignment subject
+  - 配置対象物
   - CSS
-  - Glossary
-  - alignment
+  - 用語集
+  - 配置
 translation_of: Glossary/Alignment_Subject
 ---
-<p><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a> の中では、<strong>アラインメントサブジェクト</strong>はプロパティによって整列されるものです。</p>
+[CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)では、**配置対象物**はそのプロパティによって配置されるものを指します。
 
-<p>{{cssxref("justify-self")}} や {{cssxref("align-self")}} が設定されている場合、アラインメントサブジェクトはこれらのプロパティが設定されているボックスのマージンボックスです。そのボックスの writing mode を使用します。</p>
+{{cssxref("justify-self")}} や {{cssxref("align-self")}} が設定されている場合、配置対象物はこれらのプロパティが設定されているボックスのマージンボックスです。そのボックスの書字方向を使用します。
 
-<p>{{cssxref("justify-content")}} や {{cssxref("align-content")}}の場合は、ボックスの writing mode も使用されます。アラインメントサブジェクトの定義は使用されているレイアウトのモードによります。</p>
+{{cssxref("justify-content")}} や {{cssxref("align-content")}} の場合は、ボックスの書字方向も使用されます。配置対象物の定義は、使用されているレイアウトモードによります。
 
-<dl>
- <dt>ブロックコンテナー ( テーブルセルを含む )</dt>
- <dd>シングルユニットとしてのブロックのコンテンツ全体です。</dd>
- <dt>マルチカラムコンテナー</dt>
- <dd>カラムボックスです。間にスペースが挿入されているカラムボックスは、関連するカラムギャップに追加されます。</dd>
- <dt>フレックスコンテナー</dt>
- <dd>{{cssxref("justify-content")}} の場合は、それぞれのフレックス行の中のフレックスアイテムです。<br>
- {{cssxref("align-content")}} の場合は、フレックス行です。ただし、複数行のフレックスコンテナーにだけ効果を発揮します。</dd>
- <dt>グリッドコンテナー</dt>
- <dd>適切な軸のグリッドトラックです。トラック間にスペースを挿入すると、関連するガターに追加されます。折りたたまれたガターはスペース挿入の単一の機会です。</dd>
-</dl>
+- ブロックコンテナー (テーブルセルを含む)
+  - : 単一のユニットとしてのブロックの内容物全体です。
+- 段組みコンテナー
+  - : 段ボックスです。段ボックスの間に挿入されたスペースが、関連する段間に追加されます。
+- フレックスコンテナー
+  - : {{cssxref("justify-content")}} の場合は、それぞれのフレックス行の中のフレックスアイテムです。
+    {{cssxref("align-content")}} の場合は、フレックス行です。ただし、複数行のフレックスコンテナーにだけ効果を発揮します。
+- グリッドコンテナー
+  - : 適切な軸のグリッドトラックです。トラック間にスペースを挿入すると、関連する溝に追加されます。溝が折り畳まれている場合は、スペースを挿入する唯一の機会として扱われます。
 
-<h2 id="Learn_more" name="Learn_more">関連項目</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li>
-</ul>
+- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)
diff --git a/files/ja/glossary/cross_axis/basics3.png b/files/ja/glossary/cross_axis/basics3.png
new file mode 100644
index 0000000000..eeff0ddc92
--- /dev/null
+++ b/files/ja/glossary/cross_axis/basics3.png
diff --git a/files/ja/glossary/cross_axis/basics4.png b/files/ja/glossary/cross_axis/basics4.png
new file mode 100644
index 0000000000..5fd131c247
--- /dev/null
+++ b/files/ja/glossary/cross_axis/basics4.png
diff --git a/files/ja/glossary/cross_axis/index.md b/files/ja/glossary/cross_axis/index.md
index 54f812182a..cc62bc21bb 100644
--- a/files/ja/glossary/cross_axis/index.md
+++ b/files/ja/glossary/cross_axis/index.md
@@ -3,74 +3,47 @@ title: Cross Axis (交差軸)
 slug: Glossary/Cross_Axis
 tags:
   - CSS
-  - Glossary
-  - cross axis
-  - flexbox
-  - クロス軸
-  - フレックスボックス
+  - 用語集
   - 交差軸
+  - フレックスボックス
+  - クロス軸
 translation_of: Glossary/Cross_Axis
 ---
-<p>{{glossary("flexbox", "フレックスボックス")}} における交差軸 (cross axis / クロス軸) は、{{glossary("main axis", "主軸")}} (main axis / メイン軸) と交差する軸で、{{cssxref("flex-direction")}} が <code>row</code> または <code>row-reverse</code> であるとき (つまり主軸が横方向であるとき)、縦方向の軸のことです。</p>
-
-<p><img alt="縦方向の交差軸" src="https://mdn.mozillademos.org/files/15710/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+{{glossary("flexbox", "フレックスボックス")}} における交差軸 (cross axis / クロス軸) は、{{glossary("main axis", "主軸")}} (main axis / メイン軸) と交差する軸で、{{cssxref("flex-direction")}} が `row` または `row-reverse` であるとき (つまり主軸が行方向であるとき)、列方向の軸のことです。
 
-<p>主軸が <code>column</code> または <code>column-reverse</code> の場合は、交差軸は横方向となります。</p>
+![列方向の交差軸](basics3.png)
 
-<p><img alt="横方向の交差軸" src="https://mdn.mozillademos.org/files/15711/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+主軸が `column` または `column-reverse` の場合は、交差軸は行方向となります。
 
-<p>交差軸方向のアイテムの位置合わせは、フレックスコンテナーの <code>align-items</code> プロパティかアイテムの <code>align-self</code> プロパティによって行われます。交差軸方向に余白がある複数行のフレックスコンテナーでは、<code>align-content</code> を使って行間を制御することができます。</p>
+![行方向の交差軸](basics4.png)
 
-<h2 id="Learn_more" name="Learn_more">理解を深める</h2>
+交差軸方向のアイテムの配置は、フレックスコンテナーの `align-items` プロパティまたはアイテムの `align-self` プロパティによって行われます。交差軸方向に空間がある複数行のフレックスコンテナーでは、`align-content` を使って行の間を制御することができます。
 
-<h3 id="Property_reference" name="Property_reference">プロパティリファレンス</h3>
+## 関連情報
 
-<div class="index">
-<ul>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("flex-wrap")}}</li>
- <li>{{cssxref("flex-direction")}}</li>
- <li>{{cssxref("flex")}}</li>
-</ul>
-</div>
+### プロパティリファレンス
 
-<h3 id="Further_reading" name="Further_reading">関連情報</h3>
+- {{cssxref("align-content")}}
+- {{cssxref("align-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("flex-wrap")}}
+- {{cssxref("flex-direction")}}
+- {{cssxref("flex")}}
+- {{cssxref("flex-basis")}}
+- {{cssxref("flex-flow")}}
+- {{cssxref("flex-grow")}}
+- {{cssxref("flex-shrink")}}
+- {{cssxref("justify-content")}}
+- {{cssxref("order")}}
 
-<ul>
- <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
- <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></em></li>
- <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></em></li>
-</ul>
+### 参考文献
 
-<section id="Quick_links">
-<ol>
- <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
+- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- CSS フレックスボックスガイド: _[フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_
+- [用語集](/ja/docs/Glossary)
 
-  <ol>
-   <li>{{Glossary("Cross Axis", "交差軸")}}</li>
-   <li>{{Glossary("Flex")}}</li>
-   <li>{{Glossary("Flex Container", "フレックスコンテナー")}}</li>
-   <li>{{Glossary("Flex Item", "フレックスアイテム")}}</li>
-   <li>{{Glossary("Grid", "グリッド")}}</li>
-  </ol>
- </li>
- <li>関連する CSS プロパティ
-  <ol>
-   <li>{{cssxref("align-content")}}</li>
-   <li>{{cssxref("align-items")}}</li>
-   <li>{{cssxref("align-self")}}</li>
-   <li>{{cssxref("flex")}}</li>
-   <li>{{cssxref("flex-basis")}}</li>
-   <li>{{cssxref("flex-direction")}}</li>
-   <li>{{cssxref("flex-flow")}}</li>
-   <li>{{cssxref("flex-grow")}}</li>
-   <li>{{cssxref("flex-shrink")}}</li>
-   <li>{{cssxref("flex-wrap")}}</li>
-   <li>{{cssxref("justify-content")}}</li>
-   <li>{{cssxref("order")}}</li>
-  </ol>
- </li>
-</ol>
-</section>
+  - {{Glossary("Flex")}}
+  - {{Glossary("Flex Container", "フレックスコンテナー")}}
+  - {{Glossary("Flex Item", "フレックスアイテム")}}
+  - {{Glossary("Grid", "グリッド")}}
diff --git a/files/ja/glossary/fallback_alignment/index.md b/files/ja/glossary/fallback_alignment/index.md
new file mode 100644
index 0000000000..7124577d38
--- /dev/null
+++ b/files/ja/glossary/fallback_alignment/index.md
@@ -0,0 +1,29 @@
+---
+title: Fallback alignment (代替配置)
+slug: Glossary/Fallback_Alignment
+tags:
+  - CSS
+  - 用語集
+  - 配置
+translation_of: Glossary/Fallback_Alignment
+---
+[CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)では、代替配置を要求された配置が実現できない場合に対処するために指定します。例えば、`justify-content: space-between` を指定した場合、複数の[配置対象物](/ja/docs/Glossary/Alignment_Subject)が存在しなければなりません。存在しない場合は、代替配置が使用されます。これは、以下のように配置方法ごとに決まります。
+
+- first baseline
+  - : `start`
+- last baseline
+  - : `safe end`
+- Baseline
+  - : `start`
+- space-between
+  - : `flex-start` (start)
+- space-around
+  - : `center`
+- space-evenly
+  - : `center`
+- stretch
+  - : `flex-start` (start)
+
+## 関連情報
+
+- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)
diff --git a/files/ja/glossary/main_axis/basics1.png b/files/ja/glossary/main_axis/basics1.png
new file mode 100644
index 0000000000..ffdb088e93
--- /dev/null
+++ b/files/ja/glossary/main_axis/basics1.png
diff --git a/files/ja/glossary/main_axis/basics2.png b/files/ja/glossary/main_axis/basics2.png
new file mode 100644
index 0000000000..d9a24c2cb6
--- /dev/null
+++ b/files/ja/glossary/main_axis/basics2.png
diff --git a/files/ja/glossary/main_axis/index.md b/files/ja/glossary/main_axis/index.md
index e948fcbfe7..f508800faa 100644
--- a/files/ja/glossary/main_axis/index.md
+++ b/files/ja/glossary/main_axis/index.md
@@ -3,50 +3,41 @@ title: Main Axis (主軸)
 slug: Glossary/Main_Axis
 tags:
   - CSS
-  - Glossary
-  - Main axis
-  - flexbox
+  - 用語集
+  - 主軸
+  - フレックスボックス
 translation_of: Glossary/Main_Axis
 ---
-<p>{{glossary("flexbox")}} における主軸は、{{cssxref("flex-direction")}} プロパティの設定方向によって定義されます。<code>flex-direction</code> が取り得る値は以下の四つです。</p>
+{{glossary("flexbox")}} における主軸は、{{cssxref("flex-direction")}} プロパティの設定方向によって定義されます。`flex-direction` が取り得る値は以下の 4 つです。
 
-<ul>
- <li><code>row</code></li>
- <li><code>row-reverse</code></li>
- <li><code>column</code></li>
- <li><code>column-reverse</code></li>
-</ul>
+- `row`
+- `row-reverse`
+- `column`
+- `column-reverse`
 
-<p><code>row</code> または <code>row-reverse</code> を選んだ場合は、主軸はインライン要素の並ぶ方向に伸びる軸となります。</p>
+`row` または `row-reverse` を選んだ場合は、主軸はインライン要素の並ぶ方向に伸びる軸となります。
 
-<p><img alt="flex-direction が row の場合の主軸" src="https://mdn.mozillademos.org/files/15708/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+![flex-direction が row の場合の主軸](basics1.png)
 
-<p><code>column</code> または <code>column-reverse</code> を選んだ場合は、ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となります。</p>
+`column` または `column-reverse` を選んだ場合は、ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となります。
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15709/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+![](basics2.png)
 
-<p>アイテムの <code>flex</code> プロパティを使って、flex アイテム自体が使える幅を指定することで、主軸に沿ったサイズを制御することができます。また、アイテム間そしてアイテムの周囲の余白について、<code>justify-content</code> プロパティを使って制御することができます。</p>
+アイテムの `flex` プロパティを使って、づレックスアイテム自体が使える幅を指定することで、主軸に沿ったサイズを制御することができます。また、アイテム間そしてアイテムの周囲の空間については、`justify-content` プロパティを使って制御することができます。
 
-<h2 id="Learn_more" name="Learn_more">関連項目</h2>
+## 関連情報
 
-<h3 id="Property_reference" name="Property_reference">プロパティリファレンス</h3>
+### プロパティリファレンス
 
-<div class="index">
-<ul>
- <li>{{cssxref("flex-basis")}}</li>
- <li>{{cssxref("flex-direction")}}</li>
- <li>{{cssxref("flex-grow")}}</li>
- <li>{{cssxref("flex-shrink")}}</li>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("flex")}}</li>
- <li></li>
-</ul>
-</div>
+- {{cssxref("flex-basis")}}
+- {{cssxref("flex-direction")}}
+- {{cssxref("flex-grow")}}
+- {{cssxref("flex-shrink")}}
+- {{cssxref("justify-content")}}
+- {{cssxref("flex")}}
 
-<h3 id="Further_reading" name="Further_reading">参考文献</h3>
+### 参考文献
 
-<ul>
- <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">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">Aligning items in a flex container</a></em></li>
- <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
-</ul>
+- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- CSS フレックスボックスガイド: _[主軸に沿ったフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_