From 6edcb46b0c5b0a2062112bc98b76660713796d33 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 18 Oct 2021 23:16:22 +0900 Subject: CSS Box Alignment に関する用語集の項目を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/10/18 時点の英語版に同期 --- files/ja/glossary/alignment_container/index.md | 16 ++--- files/ja/glossary/alignment_subject/index.md | 40 +++++------ files/ja/glossary/cross_axis/basics3.png | Bin 0 -> 2818 bytes files/ja/glossary/cross_axis/basics4.png | Bin 0 -> 2753 bytes files/ja/glossary/cross_axis/index.md | 89 +++++++++---------------- files/ja/glossary/fallback_alignment/index.md | 29 ++++++++ files/ja/glossary/main_axis/basics1.png | Bin 0 -> 2378 bytes files/ja/glossary/main_axis/basics2.png | Bin 0 -> 3101 bytes files/ja/glossary/main_axis/index.md | 59 +++++++--------- 9 files changed, 110 insertions(+), 123 deletions(-) create mode 100644 files/ja/glossary/cross_axis/basics3.png create mode 100644 files/ja/glossary/cross_axis/basics4.png create mode 100644 files/ja/glossary/fallback_alignment/index.md create mode 100644 files/ja/glossary/main_axis/basics1.png create mode 100644 files/ja/glossary/main_axis/basics2.png (limited to 'files/ja/glossary') 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 --- -

アラインメントコンテナーの四角形の中では、アラインメントサブジェクトが整列されます。これはレイアウトのモードによって定義されます。通常はアラインメントサブジェクトが内包されているブロックのことを指します。ボックスの writing mode は外側のコンテナーによって決定されます。

+**配置コンテナー**は、中に[配置対象物](/ja/docs/Glossary/Alignment_Subject)が配置される矩形です。これはレイアウトモードによって定義されます。通常は配置対象物を包含しているブロックのことを指します。ボックスの書字方向は外側のコンテナーによって決定されます。 -

関連項目

+## 関連情報 - +- [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 --- -

CSS Box Alignment の中では、アラインメントサブジェクトはプロパティによって整列されるものです。

+[CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)では、**配置対象物**はそのプロパティによって配置されるものを指します。 -

{{cssxref("justify-self")}} や {{cssxref("align-self")}} が設定されている場合、アラインメントサブジェクトはこれらのプロパティが設定されているボックスのマージンボックスです。そのボックスの writing mode を使用します。

+{{cssxref("justify-self")}} や {{cssxref("align-self")}} が設定されている場合、配置対象物はこれらのプロパティが設定されているボックスのマージンボックスです。そのボックスの書字方向を使用します。 -

{{cssxref("justify-content")}} や {{cssxref("align-content")}}の場合は、ボックスの writing mode も使用されます。アラインメントサブジェクトの定義は使用されているレイアウトのモードによります。

+{{cssxref("justify-content")}} や {{cssxref("align-content")}} の場合は、ボックスの書字方向も使用されます。配置対象物の定義は、使用されているレイアウトモードによります。 -
-
ブロックコンテナー ( テーブルセルを含む )
-
シングルユニットとしてのブロックのコンテンツ全体です。
-
マルチカラムコンテナー
-
カラムボックスです。間にスペースが挿入されているカラムボックスは、関連するカラムギャップに追加されます。
-
フレックスコンテナー
-
{{cssxref("justify-content")}} の場合は、それぞれのフレックス行の中のフレックスアイテムです。
- {{cssxref("align-content")}} の場合は、フレックス行です。ただし、複数行のフレックスコンテナーにだけ効果を発揮します。
-
グリッドコンテナー
-
適切な軸のグリッドトラックです。トラック間にスペースを挿入すると、関連するガターに追加されます。折りたたまれたガターはスペース挿入の単一の機会です。
-
+- ブロックコンテナー (テーブルセルを含む) + - : 単一のユニットとしてのブロックの内容物全体です。 +- 段組みコンテナー + - : 段ボックスです。段ボックスの間に挿入されたスペースが、関連する段間に追加されます。 +- フレックスコンテナー + - : {{cssxref("justify-content")}} の場合は、それぞれのフレックス行の中のフレックスアイテムです。 + {{cssxref("align-content")}} の場合は、フレックス行です。ただし、複数行のフレックスコンテナーにだけ効果を発揮します。 +- グリッドコンテナー + - : 適切な軸のグリッドトラックです。トラック間にスペースを挿入すると、関連する溝に追加されます。溝が折り畳まれている場合は、スペースを挿入する唯一の機会として扱われます。 -

関連項目

+## 関連情報 - +- [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 Binary files /dev/null and b/files/ja/glossary/cross_axis/basics3.png differ 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 Binary files /dev/null and b/files/ja/glossary/cross_axis/basics4.png differ 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 --- -

{{glossary("flexbox", "フレックスボックス")}} における交差軸 (cross axis / クロス軸) は、{{glossary("main axis", "主軸")}} (main axis / メイン軸) と交差する軸で、{{cssxref("flex-direction")}} が row または row-reverse であるとき (つまり主軸が横方向であるとき)、縦方向の軸のことです。

- -

縦方向の交差軸

+{{glossary("flexbox", "フレックスボックス")}} における交差軸 (cross axis / クロス軸) は、{{glossary("main axis", "主軸")}} (main axis / メイン軸) と交差する軸で、{{cssxref("flex-direction")}} が `row` または `row-reverse` であるとき (つまり主軸が行方向であるとき)、列方向の軸のことです。 -

主軸が column または column-reverse の場合は、交差軸は横方向となります。

+![列方向の交差軸](basics3.png) -

横方向の交差軸

+主軸が `column` または `column-reverse` の場合は、交差軸は行方向となります。 -

交差軸方向のアイテムの位置合わせは、フレックスコンテナーの align-items プロパティかアイテムの align-self プロパティによって行われます。交差軸方向に余白がある複数行のフレックスコンテナーでは、align-content を使って行間を制御することができます。

+![行方向の交差軸](basics4.png) -

理解を深める

+交差軸方向のアイテムの配置は、フレックスコンテナーの `align-items` プロパティまたはアイテムの `align-self` プロパティによって行われます。交差軸方向に空間がある複数行のフレックスコンテナーでは、`align-content` を使って行の間を制御することができます。 -

プロパティリファレンス

+## 関連情報 -
- -
+### プロパティリファレンス -

関連情報

+- {{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")}} - +### 参考文献 - + - {{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 Binary files /dev/null and b/files/ja/glossary/main_axis/basics1.png differ 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 Binary files /dev/null and b/files/ja/glossary/main_axis/basics2.png differ 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 --- -

{{glossary("flexbox")}} における主軸は、{{cssxref("flex-direction")}} プロパティの設定方向によって定義されます。flex-direction が取り得る値は以下の四つです。

+{{glossary("flexbox")}} における主軸は、{{cssxref("flex-direction")}} プロパティの設定方向によって定義されます。`flex-direction` が取り得る値は以下の 4 つです。 - +- `row` +- `row-reverse` +- `column` +- `column-reverse` -

row または row-reverse を選んだ場合は、主軸はインライン要素の並ぶ方向に伸びる軸となります。

+`row` または `row-reverse` を選んだ場合は、主軸はインライン要素の並ぶ方向に伸びる軸となります。 -

flex-direction が row の場合の主軸

+![flex-direction が row の場合の主軸](basics1.png) -

column または column-reverse を選んだ場合は、ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となります。

+`column` または `column-reverse` を選んだ場合は、ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となります。 -

+![](basics2.png) -

アイテムの flex プロパティを使って、flex アイテム自体が使える幅を指定することで、主軸に沿ったサイズを制御することができます。また、アイテム間そしてアイテムの周囲の余白について、justify-content プロパティを使って制御することができます。

+アイテムの `flex` プロパティを使って、づレックスアイテム自体が使える幅を指定することで、主軸に沿ったサイズを制御することができます。また、アイテム間そしてアイテムの周囲の空間については、`justify-content` プロパティを使って制御することができます。 -

関連項目

+## 関連情報 -

プロパティリファレンス

+### プロパティリファレンス -
- -
+- {{cssxref("flex-basis")}} +- {{cssxref("flex-direction")}} +- {{cssxref("flex-grow")}} +- {{cssxref("flex-shrink")}} +- {{cssxref("justify-content")}} +- {{cssxref("flex")}} -

参考文献

+### 参考文献 - +- 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)_ -- cgit v1.2.3-54-g00ecf