From a41c517202ac5cb97533cd3149621c7e4c7ffdd9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 18 Oct 2021 12:37:35 +0900 Subject: CSS Box Alignment 関係の用語集の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/glossary/alignment_container/index.html | 17 ------ files/ja/glossary/alignment_container/index.md | 17 ++++++ files/ja/glossary/alignment_subject/index.html | 33 ---------- files/ja/glossary/alignment_subject/index.md | 33 ++++++++++ files/ja/glossary/cross_axis/index.html | 76 ------------------------ files/ja/glossary/cross_axis/index.md | 76 ++++++++++++++++++++++++ files/ja/glossary/main_axis/index.html | 52 ---------------- files/ja/glossary/main_axis/index.md | 52 ++++++++++++++++ 8 files changed, 178 insertions(+), 178 deletions(-) delete mode 100644 files/ja/glossary/alignment_container/index.html create mode 100644 files/ja/glossary/alignment_container/index.md delete mode 100644 files/ja/glossary/alignment_subject/index.html create mode 100644 files/ja/glossary/alignment_subject/index.md delete mode 100644 files/ja/glossary/cross_axis/index.html create mode 100644 files/ja/glossary/cross_axis/index.md delete mode 100644 files/ja/glossary/main_axis/index.html create mode 100644 files/ja/glossary/main_axis/index.md (limited to 'files/ja') diff --git a/files/ja/glossary/alignment_container/index.html b/files/ja/glossary/alignment_container/index.html deleted file mode 100644 index 8751607926..0000000000 --- a/files/ja/glossary/alignment_container/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Alignment container -slug: Glossary/Alignment_Container -tags: - - Alignment container - - CSS - - Glossary - - alignment -translation_of: Glossary/Alignment_Container ---- -

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

- -

関連項目

- - diff --git a/files/ja/glossary/alignment_container/index.md b/files/ja/glossary/alignment_container/index.md new file mode 100644 index 0000000000..8751607926 --- /dev/null +++ b/files/ja/glossary/alignment_container/index.md @@ -0,0 +1,17 @@ +--- +title: Alignment container +slug: Glossary/Alignment_Container +tags: + - Alignment container + - CSS + - Glossary + - alignment +translation_of: Glossary/Alignment_Container +--- +

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

+ +

関連項目

+ + diff --git a/files/ja/glossary/alignment_subject/index.html b/files/ja/glossary/alignment_subject/index.html deleted file mode 100644 index e1bba10224..0000000000 --- a/files/ja/glossary/alignment_subject/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Alignment subject -slug: Glossary/Alignment_Subject -tags: - - Alignment subject - - CSS - - Glossary - - alignment -translation_of: Glossary/Alignment_Subject ---- -

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

- -

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

- -

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

- -
-
ブロックコンテナー ( テーブルセルを含む )
-
シングルユニットとしてのブロックのコンテンツ全体です。
-
マルチカラムコンテナー
-
カラムボックスです。間にスペースが挿入されているカラムボックスは、関連するカラムギャップに追加されます。
-
フレックスコンテナー
-
{{cssxref("justify-content")}} の場合は、それぞれのフレックス行の中のフレックスアイテムです。
- {{cssxref("align-content")}} の場合は、フレックス行です。ただし、複数行のフレックスコンテナーにだけ効果を発揮します。
-
グリッドコンテナー
-
適切な軸のグリッドトラックです。トラック間にスペースを挿入すると、関連するガターに追加されます。折りたたまれたガターはスペース挿入の単一の機会です。
-
- -

関連項目

- - diff --git a/files/ja/glossary/alignment_subject/index.md b/files/ja/glossary/alignment_subject/index.md new file mode 100644 index 0000000000..e1bba10224 --- /dev/null +++ b/files/ja/glossary/alignment_subject/index.md @@ -0,0 +1,33 @@ +--- +title: Alignment subject +slug: Glossary/Alignment_Subject +tags: + - Alignment subject + - CSS + - Glossary + - alignment +translation_of: Glossary/Alignment_Subject +--- +

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

+ +

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

+ +

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

+ +
+
ブロックコンテナー ( テーブルセルを含む )
+
シングルユニットとしてのブロックのコンテンツ全体です。
+
マルチカラムコンテナー
+
カラムボックスです。間にスペースが挿入されているカラムボックスは、関連するカラムギャップに追加されます。
+
フレックスコンテナー
+
{{cssxref("justify-content")}} の場合は、それぞれのフレックス行の中のフレックスアイテムです。
+ {{cssxref("align-content")}} の場合は、フレックス行です。ただし、複数行のフレックスコンテナーにだけ効果を発揮します。
+
グリッドコンテナー
+
適切な軸のグリッドトラックです。トラック間にスペースを挿入すると、関連するガターに追加されます。折りたたまれたガターはスペース挿入の単一の機会です。
+
+ +

関連項目

+ + diff --git a/files/ja/glossary/cross_axis/index.html b/files/ja/glossary/cross_axis/index.html deleted file mode 100644 index 54f812182a..0000000000 --- a/files/ja/glossary/cross_axis/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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 であるとき (つまり主軸が横方向であるとき)、縦方向の軸のことです。

- -

縦方向の交差軸

- -

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

- -

横方向の交差軸

- -

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

- -

理解を深める

- -

プロパティリファレンス

- -
- -
- -

関連情報

- - - - diff --git a/files/ja/glossary/cross_axis/index.md b/files/ja/glossary/cross_axis/index.md new file mode 100644 index 0000000000..54f812182a --- /dev/null +++ b/files/ja/glossary/cross_axis/index.md @@ -0,0 +1,76 @@ +--- +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 であるとき (つまり主軸が横方向であるとき)、縦方向の軸のことです。

+ +

縦方向の交差軸

+ +

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

+ +

横方向の交差軸

+ +

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

+ +

理解を深める

+ +

プロパティリファレンス

+ +
+ +
+ +

関連情報

+ + + + diff --git a/files/ja/glossary/main_axis/index.html b/files/ja/glossary/main_axis/index.html deleted file mode 100644 index e948fcbfe7..0000000000 --- a/files/ja/glossary/main_axis/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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 が取り得る値は以下の四つです。

- - - -

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

- -

flex-direction が row の場合の主軸

- -

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

- -

- -

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

- -

関連項目

- -

プロパティリファレンス

- -
- -
- -

参考文献

- - diff --git a/files/ja/glossary/main_axis/index.md b/files/ja/glossary/main_axis/index.md new file mode 100644 index 0000000000..e948fcbfe7 --- /dev/null +++ b/files/ja/glossary/main_axis/index.md @@ -0,0 +1,52 @@ +--- +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 が取り得る値は以下の四つです。

+ + + +

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

+ +

flex-direction が row の場合の主軸

+ +

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

+ +

+ +

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

+ +

関連項目

+ +

プロパティリファレンス

+ +
+ +
+ +

参考文献

+ + -- cgit v1.2.3-54-g00ecf