diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-18 23:16:22 +0900 |
---|---|---|
committer | potappo <potappo@gmail.com> | 2021-10-24 12:30:46 +0900 |
commit | 6edcb46b0c5b0a2062112bc98b76660713796d33 (patch) | |
tree | 3aba449f18d6f35bc2c3df896f502c972da4561b /files/ja/glossary/main_axis/index.md | |
parent | a41c517202ac5cb97533cd3149621c7e4c7ffdd9 (diff) | |
download | translated-content-6edcb46b0c5b0a2062112bc98b76660713796d33.tar.gz translated-content-6edcb46b0c5b0a2062112bc98b76660713796d33.tar.bz2 translated-content-6edcb46b0c5b0a2062112bc98b76660713796d33.zip |
CSS Box Alignment に関する用語集の項目を更新
2021/10/18 時点の英語版に同期
Diffstat (limited to 'files/ja/glossary/main_axis/index.md')
-rw-r--r-- | files/ja/glossary/main_axis/index.md | 59 |
1 files changed, 25 insertions, 34 deletions
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)_ |