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

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

3 files changed, 31 insertions, 58 deletions

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", "グリッド")}}