diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-03 02:17:02 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-11 00:03:00 +0900 |
| commit | 56128e4c267e489e08b5e7108362c6c04b35c362 (patch) | |
| tree | 9a8c6e174651a289f17bc02cae0dd29c93e4785f /files/ja/web/css | |
| parent | 76c96022ca053fb17e38e3025d4007361a40e924 (diff) | |
| download | translated-content-56128e4c267e489e08b5e7108362c6c04b35c362.tar.gz translated-content-56128e4c267e489e08b5e7108362c6c04b35c362.tar.bz2 translated-content-56128e4c267e489e08b5e7108362c6c04b35c362.zip | |
CSS フレックスボックス関係の文書を更新
- 2021/11/01 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css')
45 files changed, 1237 insertions, 1442 deletions
diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align1.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align1.png Binary files differnew file mode 100644 index 0000000000..11544c7fdf --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align1.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align10.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align10.png Binary files differnew file mode 100644 index 0000000000..649a93b863 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align10.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align11.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align11.png Binary files differnew file mode 100644 index 0000000000..82698ad482 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align11.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align2.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align2.png Binary files differnew file mode 100644 index 0000000000..6b18306def --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align2.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align3.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align3.png Binary files differnew file mode 100644 index 0000000000..dd0d03ca00 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align3.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align4.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align4.png Binary files differnew file mode 100644 index 0000000000..4101fc2f36 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align4.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align5.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align5.png Binary files differnew file mode 100644 index 0000000000..4f6527ac15 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align5.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align6.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align6.png Binary files differnew file mode 100644 index 0000000000..eba412b6af --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align6.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align7.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align7.png Binary files differnew file mode 100644 index 0000000000..4e562a48a0 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align7.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align8.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align8.png Binary files differnew file mode 100644 index 0000000000..ad26082b21 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align8.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align9.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align9.png Binary files differnew file mode 100644 index 0000000000..a9ef5380b9 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align9.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics5.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics5.png Binary files differnew file mode 100644 index 0000000000..ad26082b21 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics5.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics6.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics6.png Binary files differnew file mode 100644 index 0000000000..00fe14b399 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics6.png diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md index 725f3b0e12..eeffb82d47 100644 --- a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -2,222 +2,203 @@ title: フレックスコンテナー内のアイテムの配置 slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container tags: - - Align + - 配置 - CSS - Flex - - Guide + - ガイド - align-content - align-items - align-self - alignment - - flexbox + - フレックスボックス - justify - justify-content - - フレックスボックス - - 配置 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container --- -<p>{{CSSRef}}</p> - -<p class="summary">フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。正しい縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて位置合わせや行端揃えのプロパティがどのように働くかを詳しくみていきます。</p> +{{CSSRef}} -<p>ボックスを中央寄せするには、 <code>align-items</code> プロパティを使って交差軸 (今回の場合は縦軸) 上の位置合わせをし、 <code>justify-content</code> プロパティで主軸 (今回の場合は横軸) 上の位置合わせをします。</p> +フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。正しい縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて位置合わせや行端揃えのプロパティがどのように働くかを詳しくみていきます。 -<p><img alt="中央寄せされたボックスをもつコンテナ要素" src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> +ボックスを中央寄せするには、`align-items` プロパティを使って交差軸上 (今回の場合は縦軸上) の位置合わせをし、`justify-content` プロパティで主軸上 (今回の場合は横軸上) の位置合わせをします。 -<p>以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。</p> + -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> +以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。 -<h2 id="Properties_that_control_alignment" name="Properties_that_control_alignment">配置を制御するプロパティ</h2> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}} -<p>本ガイドで扱うプロパティは以下のとおりです。</p> +## 配置を制御するプロパティ -<ul> - <li>{{cssxref("justify-content")}} — 全アイテムの主軸上の配置を制御する。</li> - <li>{{cssxref("align-items")}} — 全アイテムの交差軸上の配置を制御する。</li> - <li>{{cssxref("align-self")}} — 個別のフレックスアイテムごとに交差軸上の配置を制御する</li> - <li>{{cssxref("align-content")}} — 仕様では「<ruby>フレックス行のパッキング<rp> (</rp><rt>packing flex lines</rt><rp>) </rp></ruby>」と説明されている。交差軸上でのフレックス行間の余白を制御する。</li> -</ul> +本ガイドで扱うプロパティは以下のとおりです。 -<p>また、 auto マージンがフレックスボックスでの位置合わせにどのように使えるかについても触れます。</p> +- {{cssxref("justify-content")}} — 全アイテムの主軸上の配置を制御する。 +- {{cssxref("align-items")}} — 全アイテムの交差軸上の配置を制御する。 +- {{cssxref("align-self")}} — 個別のフレックスアイテムごとに交差軸上の配置を制御する +- {{cssxref("align-content")}} — 仕様では「フレックス行のパッキング (packing flex lines)」と説明されている。交差軸上でのフレックス行間の余白を制御する。 +- {{cssxref("gap")}}, {{cssxref("column-gap")}}, {{cssxref("row-gap")}} — フレックスアイテム間に間隔または溝を生成するために使用する。 -<div class="note"> -<p><strong>メモ</strong>: フレックスボックスにおける各種の配置プロパティは、そのプロパティ定義専用の仕様である <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a> にも記載されています。この仕様が最終的には Flexbox Level 1 仕様で定義しているプロパティの定義を置き換えることが想定されています。</p> -</div> +また、auto マージンがフレックスボックスでの位置合わせにどのように使えるかについても触れます。 -<h2 id="The_Cross_Axis" name="The_Cross_Axis">交差軸</h2> +## 交差軸 -<p><code>align-items</code> プロパティと <code>align-self</code> プロパティは、交差軸 (cross axis: <code>flex-direction</code> が <code>row</code> のときは列に沿った、または <code>flex-direction</code> が <code>column</code> のときは行に沿った軸) 上でのフレックスアイテムの配置を制御します。</p> +`align-items` プロパティと `align-self` プロパティは、交差軸 (cross axis: `flex-direction` が `row` のときは列に沿った、または `flex-direction` が `column` のときは行に沿った軸) 上でのフレックスアイテムの配置を制御します。 -<p>もっとも単純なフレックスの例で、交差軸上の位置合わせを試してみましょう。<code>display: flex</code> をコンテナに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナの高さまでアイテムが伸張します。</p> +もっとも単純なフレックスの例で、交差軸上の位置合わせを試してみましょう。`display: flex` をコンテナーに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナーの高さまでアイテムが伸張します。 -<p><img alt="３つのアイテム中１つのアイテムにはほかのアイテムより高くなる要因となる追加のテキストが設定されている。" src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> + -<p><img alt="３つのアイテムとも 200 ピクセルの高さをもつ" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> + -<p>アイテムが同じ高さになるのは、交差軸での配置を制御する <code>align-items</code> プロパティの初期値が <code>stretch</code> となっているためです。</p> +アイテムが同じ高さになるのは、交差軸での配置を制御する `align-items` プロパティの初期値が `stretch` となっているためです。 -<p>アイテムの配置をコントロールするために、以下の値を使うことができます。</p> +アイテムの配置を制御するために、以下の値を使うことができます。 -<ul> - <li><code>align-items: flex-start</code></li> - <li><code>align-items: flex-end</code></li> - <li><code>align-items: center</code></li> - <li><code>align-items: stretch</code></li> - <li><code>align-items: baseline</code></li> -</ul> +- `align-items: flex-start` +- `align-items: flex-end` +- `align-items: center` +- `align-items: stretch` +- `align-items: baseline` -<p>以下の例では、<code>align-items</code> の値は <code>stretch</code> に設定されています。他の値についても試し、flex コンテナの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。</p> +以下の例では、`align-items` の値は `stretch` に設定されています。他の値についても試し、フレックスコンテナーの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} -<h3 id="Aligning_one_item_with_align-self" name="Aligning_one_item_with_align-self"><code>align-self</code> で個別のアイテムを位置合わせ</h3> +### `align-self` で個別のアイテムを位置合わせ -<p><code>align-items</code> プロパティはすべてのアイテムの <code>align-self</code> プロパティをまとめて設定します。つまり、<code>align-self</code> プロパティでは１つずつ個別のアイテムを対象として指定できます。<code>align-self</code> プロパティには、<code>align-items</code> プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための <code>auto</code> を使うことができます。</p> +`align-items` プロパティはすべてのアイテムの `align-self` プロパティをまとめて設定します。つまり、`align-self` プロパティでは 1 つずつ個別のアイテムを対象として指定できます。`align-self` プロパティには、`align-items` プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための `auto` を使うことができます。 -<p>次の例では、フレックスコンテナーには <code>align-items: flex-start</code> を設定していて、これはアイテムを交差軸上の始点に揃えます。<code>first-child</code> セレクタを使って最初のアイテムを対象として、 <code>align-self: stretch</code> を設定しており、また別のアイテムを <code>selected</code> クラスで選択して <code>align-self: center</code> を設定してます。 <code>align-items</code> の値を変更したり、個別のアイテムの <code>align-self</code> の値を変更して、どのように動作するかを試してみてください。</p> +次の例では、フレックスコンテナーには `align-items: flex-start` を設定していて、これはアイテムを交差軸上の始点に揃えます。`first-child` セレクターを使って最初のアイテムを対象として、 `align-self: stretch` を設定しており、また別のアイテムを `selected` クラスで選択して `align-self: center` を設定してます。 `align-items` の値を変更したり、個別のアイテムの `align-self` の値を変更して、どのように動作するかを試してみてください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} -<h3 id="Changing_the_main_axis" name="Changing_the_main_axis">主軸の変更</h3> +## 主軸の変更 -<p>ここまでは、 <code>flex-direction</code> が <code>row</code> で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。</p> +ここまでは、 `flex-direction` が `row` で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。 -<p><img alt="３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。" src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> + -<p><code>flex-direction</code> を <code>column</code> に変更した場合、<code>align-items</code> と <code>align-self</code> はアイテムの左右方向での位置合わせを行うようになります。</p> +`flex-direction` を `column` に変更した場合、`align-items` と `align-self` はアイテムの左右方向での位置合わせを行うようになります。 -<p><img alt="３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。水平方向の軸上で位置合わせされている。" src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> + -<p>次の例では <code>flex-direction: column</code> を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。</p> +次の例では `flex-direction: column` を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} -<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property" name="Aligning_content_on_the_cross_axis_—_the_align-content_property">交差軸上の位置合わせ — align-content プロパティ</h2> +## 交差軸上の位置合わせ — align-content プロパティ -<p>ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行のフレックスコンテナーがある場合、<code>align-content</code> プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「<a href="https://drafts.csswg.org/css-flexbox/#align-content-property">フレックス行のパッキング (packing flex lines)</a>」として説明されています。</p> +ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行のフレックスコンテナーがある場合、`align-content` プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「[フレックス行のパッキング (packing flex lines)](https://drafts.csswg.org/css-flexbox/#align-content-property)」として説明されています。 -<p><code>align-content</code> が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。</p> +`align-content` が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。 -<p><code>align-content</code> プロパティには以下の値を設定できます。</p> +`align-content` プロパティには以下の値を設定できます。 -<ul> - <li><code>align-content: flex-start</code></li> - <li><code>align-content: flex-end</code></li> - <li><code>align-content: center</code></li> - <li><code>align-content: space-between</code></li> - <li><code>align-content: space-around</code></li> - <li><code>align-content: stretch</code></li> - <li><code>align-content: space-evenly</code> (フレックスボックス仕様には含まれていない)</li> -</ul> +- `align-content: flex-start` +- `align-content: flex-end` +- `align-content: center` +- `align-content: space-between` +- `align-content: space-around` +- `align-content: stretch` +- `align-content: space-evenly` (フレックスボックス仕様には含まれていない) -<p>以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 <code>align-content</code> の値は <code>space-between</code> で、この場合は残る分配可能スペース (available space) はフレックス行の<em>間に</em>分配され、フレックス行自体はコンテナの交差軸上の始点と終点に密着して配置されます。</p> +以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 `align-content` の値は `space-between` で、この場合は残る分配可能な余白 (available space) はフレックス行の*間に*分配され、フレックス行自体はコンテナーの交差軸上の始点と末尾に密着して配置されます。 -<p><code>align-content</code> プロパティがどのように働くか、ほかの値を設定して確認してください。</p> +`align-content` プロパティがどのように働くか、ほかの値を設定して確認してください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} -<p>列に沿った軸の時にこのプロパティの効果がどのように変わるか、<code>flex-direction</code> を <code>column</code> に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分に余っているスペースが交差軸上に必要です。</p> +列に沿った軸の時にこのプロパティの効果がどのように変わるか、`flex-direction` を `column` に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分に余っているスペースが交差軸上に必要です。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} -<div class="note"> -<p><strong>注</strong>: <code>space-evenly</code> はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの互換性は、フレックスボックス仕様書に定義されている他の値より遅れています。</p> -</div> +> **Note:** `space-evenly` はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの対応は、フレックスボックス仕様書に定義されている他の値より遅れています。 -<p>上述の値についての詳細とブラウザー対応状況については <a href="/ja/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p> +上述の値についての詳細とブラウザーの対応状況については [MDN の `justify-content` のページ](/ja/docs/Web/CSS/justify-content)を参照してください。 -<h2 id="Aligning_content_on_the_main_axis" name="Aligning_content_on_the_main_axis">主軸上での位置合わせ</h2> +## 主軸上での位置合わせ -<p>ここまで交差軸上での位置合わせがどのように動くかを見てきましたが、ここでは主軸上での位置合わせについて見ていきます。使えるプロパティは <code>justify-content</code> の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 <code>justify-content</code> では、アイテムを表示するのに必要な分よりも大きいスペースがある場合の分配可能スペースの扱いを制御できます。</p> +ここまで交差軸上での位置合わせがどのように動くかを見てきましたが、ここでは主軸上での位置合わせについて見ていきます。使えるプロパティは `justify-content` の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 `justify-content` では、アイテムを表示するのに必要な分よりも大きい空間がある場合の分配可能な余白の扱いを制御できます。 -<p>コンテナに <code>display: flex</code> を設定した最初の例では、アイテムはコンテナの始点に一行に整列して表示されます。これは <code>justify-content</code> の初期値が <code>flex-start</code> であるためです。すべての分配可能スペースはアイテムの後ろに置かれます。</p> +コンテナーに `display: flex` を設定した最初の例では、アイテムはコンテナーの始点に一行に整列して表示されます。これは `justify-content` の初期値が `flex-start` であるためです。すべての分配可能な余白はアイテムの後ろに置かれます。 -<p><img alt="３つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナ内にある。分配可能スペースはアイテムの後ろに置かれる。" src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + -<p><code>justify-content</code> プロパティは <code>align-content</code> と同じ値を受け付けます。</p> +`justify-content` プロパティは `align-content` と同じ値を受け付けます。 -<ul> - <li><code>justify-content: flex-start</code></li> - <li><code>justify-content: flex-end</code></li> - <li><code>justify-content: center</code></li> - <li><code>justify-content: space-between</code></li> - <li><code>justify-content: space-around</code></li> - <li><code>justify-content: stretch</code></li> - <li><code>justify-content: space-evenly</code> (フレックスボックス仕様書には含まれていない)</li> -</ul> +- `justify-content: flex-start` +- `justify-content: flex-end` +- `justify-content: center` +- `justify-content: space-between` +- `justify-content: space-around` +- `justify-content: space-evenly` (フレックスボックス仕様書には含まれていない) -<p>次の例では、 <code>justify-content</code> の値は <code>space-between</code> となっています。アイテムを表示した後に余った分配可能スペースは、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と終点に揃えて並びます。</p> +次の例では、 `justify-content` の値は `space-between` となっています。アイテムを表示した後に余った分配可能な余白は、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と末尾に揃えて並びます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} -<p><code>flex-direction</code> が <code>column</code> に設定されて主軸がブロック方向となっているとき、<code>justify-content</code> はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。</p> +`flex-direction` が `column` に設定されて主軸がブロック方向となっているとき、`justify-content` はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} -<h3 id="Alignment_and_Writing_Modes" name="Alignment_and_Writing_Modes">配置と書字方向</h3> +## 配置と書字方向 -<p>上述の配置方法において、<code>flex-start</code> と <code>flex-end</code> はいずれも writing mode に対応したものとなります。<code>justify-content</code> の値が <code>flex-start</code> で、書字方向が英語のように左から右であれば、アイテムはコンテナーの左端から並べられます。</p> +上述の配置方法において、`flex-start` と `flex-end` はいずれも書字方向に対応したものとなります。`justify-content` の値が `start` で、書字方向が英語のような左書きであれば、アイテムはコンテナーの左端から並べられます。 -<p><img alt="３つのアイテムは左側に並んでいる" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + -<p>一方で writing mode がアラビア語のように右から左であれば、アイテムはコンテナの右端から並べられます。</p> +一方で書字方向がアラビア語のように右から左であれば、アイテムはコンテナーの右端から並べられます。 -<p><img alt="３つのアイテムは右側から並んでいる" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + -<p>以下の例ではフレックスアイテムを右から左に並べるために <code>direction</code> プロパティを <code>rtl</code> を設定しています。この設定を削除したり <code>justify-content</code> の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。</p> +以下の例ではフレックスアイテムを右から左に並べるために `direction` プロパティを `rtl` を設定しています。この設定を削除したり `justify-content` の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} -<h2 id="Alignment_and_flex-direction" name="Alignment_and_flex-direction">配置と flex-direction</h2> +## 配置と flex-direction -<p><code>flex-direction</code> プロパティを変更した場合にも、始点は変わります。例えば<code>row</code> の代わりに <code>row-reverse</code> を設定した場合などがこれにあたります。</p> +`flex-direction` プロパティを変更した場合にも、始点は変わります。例えば `row` の代わりに `row-reverse` を設定した場合などがこれにあたります。 -<p>次の例では、<code>flex-direction: row-reverse</code> と <code>justify-content: flex-end</code> を設定してアイテムをレイアウトしています。左から右の言語では、すべてのアイテムは左側に並びます。<code>flex-direction: row-reverse</code> の値を <code>flex-direction: row</code> に変更してみてください。アイテムが右側に移動することがわかります。</p> +次の例では、`flex-direction: row-reverse` と `justify-content: flex-end` を設定してアイテムをレイアウトしています。左書きの言語では、すべてのアイテムは左側に並びます。`flex-direction: row-reverse` の値を `flex-direction: row` に変更してみてください。アイテムが右側に移動することがわかります。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} -<p>こうした動作はすこし紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸・行方向の軸に沿ってフレックスアイテムが配置されます。<code>flex-start</code> は文の中でテキストが始まる側を示すことになります。</p> +こうした動作は少し紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸、行方向の軸に沿ってフレックスアイテムが配置されます。`flex-start` は文の中でテキストが始まる側を示すことになります。 -<p><img alt="左から始まり右で終わることを示す図" src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + -<p><code>flex-direction: column</code> を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は <code>flex-start</code> は段落が始まる先頭を示すことになります。</p> +`flex-direction: column` を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は `flex-start` は段落が始まる先頭を示すことになります。 -<p><img alt="上から始まり下で終わることを示す図" src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + -<p>flex-direction を逆方向に設定した場合、軸の終点側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。<code>flex-start</code> はその軸の終点側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。</p> +`flex-direction`を逆方向の値のいずれかに変更すると、軸の末尾側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。`flex-start` はその軸の末尾側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。 -<p><img alt="右から始まり左で終わることを示す図" src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + -<p><img alt="下から始まり上で終わることを示す図" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + -<h2 id="主軸上での位置合わせに_auto_マージンを使う">主軸上での位置合わせに auto マージンを使う</h2> +## 主軸上での位置合わせのための auto マージンの使用 -<p>主軸上ではアイテムは一つのグループとして扱われるため、<code>justify-items</code> プロパティや <code>justify-self</code> プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の位置合わせをすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。</p> +主軸上ではアイテムは一つのグループとして扱われるため、`justify-items` プロパティや `justify-self` プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の位置合わせをすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。 -<p>よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは <code>justify-self</code> プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。３つのアイテムが片方にあり、もう一方に２つのアイテムがあります。もし仮に <code>justify-self</code> がアイテム <em>d</em> に対して使えたとすると、意図したものであってもそうでなくても、それに続くアイテム <em>e</em> の配置も変わってしまうでしょう (訳註: プロパティ名で self = 自分自身と言っているのに他のアイテムにも影響を与えてしまう)。</p> +よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは `justify-self` プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。3 つのアイテムが片方にあり、もう一方に 2 つのアイテムがあります。もし仮に `justify-self` をアイテム _d_ に対して使うことができたとすると、意図したものであってもそうでなくても、それに続くアイテム _e_ の配置も変わってしまうでしょう。 -<p><img alt="２つのグループに分かれた５つのアイテム。３つは左側にあり、２つは右側にある。" src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> + -<p>4 つめのアイテムに対して <code>justify-content</code> ではなく <code>margin-left</code> に <code>auto</code> を設定すれば、先頭の３つから分離できます。auto マージンはマージンの方向に沿ったスペースをすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央そろえするときと同じです。両側のマージンが取れるだけのスペースをとろうとするために、ブロックが中央に押し出されることになります。</p> +4 つめのアイテムに対して `justify-content` ではなく `margin-left` に `auto` を設定すれば、先頭の 3 つから分離できます。auto マージンはマージンの方向に沿った余白をすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央揃えするときと同じです。両側のマージンが取れるだけの余白を取ろうとするために、ブロックが中央に押し出されることになります。 -<p>以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、<code>margin-left: auto</code> を設定した <code>push</code> クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。</p> +以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、`margin-left: auto` を設定した `push` クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} -<h2 id="Future_alignment_features_for_Flexbox" name="Future_alignment_features_for_Flexbox">フレックスボックスの配置機能の将来</h2> +## アイテム間に間隔を作成 -<p>この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、 <code>align-content</code> と <code>justify-content</code> プロパティに <code>space-evenly</code> が導入されていることも紹介しました。</p> +フレックスのアイテム間に間隔を作るには、{{cssxref("gap")}}、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}の各プロパティを使用します。{{cssxref("column-gap")}} プロパティは、主軸のアイテム間に間隔を作成します。{{cssxref("row-gap")}} プロパティは、{{cssxref("flex-wrap")}} が `wrap` に設定されている場合、フレックス行間に間隔を作成します。{{cssxref("gap")}} プロパティは、両方を一緒に設定する一括指定です。 -<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p> +{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/gap.html", '100%', 700)}} -<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p> -<h2 id="See_Also" name="See_Also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスボックスでのボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">グリッドレイアウトでのボックス配置</a></li> -</ul> +- [ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment) +- [フレックスボックスでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) +- [グリッドレイアウトでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout) diff --git a/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md index a93b005b5c..fc368a0ce1 100644 --- a/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md +++ b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md @@ -4,120 +4,120 @@ slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox tags: - '@supports' - CSS - - CSS Tables - - Flexible Boxes - - Floats - - Guide - - fallbacks - - feature queries - - flexbox + - CSS 表 + - フレックスボックス + - 浮動 + - ガイド + - 代替 + - 機能クエリー + - フレックスボックス - inline-block translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary">フレックスボックスは最新のブラウザーではとてもよく対応されていますが、いくつかの問題に遭遇する可能性があります。このガイドでは、フレックスボックスがブラウザーでどの程度対応されているかを見て、いくつかの潜在的な問題、リソース、回避策やフォールバックを作成するための方法を見ていきます。</p> +フレックスボックスは最新のブラウザーではとてもよく対応されていますが、いくつかの問題に遭遇する可能性があります。このガイドでは、フレックスボックスがブラウザーでどの程度対応されているかを見て、いくつかの潜在的な問題、リソース、回避策や代替を作成するための方法を見ていきます。 -<h2 id="The_history_of_flexbox" name="The_history_of_flexbox">フレックスボックスの歴史</h2> +## フレックスボックスの歴史 -<p>すべての CSS の仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。</p> +すべての CSS の仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。 -<p>過去、フレックスボックスはいくつかのブラウザーで実験的に実装されました。その際にはベンダー接頭辞が使われました。このような接頭辞は、他の実装と衝突することなく、仕様の実装をブラウザーエンジニアやウェブ開発者がテストして調査するためのものであり、本番で使うためのものではありませんでした。しかし、結局は本番で使用され、実験的な仕様が変更されるたびに本番のサイトを修正しなければなりませんでした。</p> +フレックスボックスは、いくつかのウェブブラウザーに実験的に実装されていました。当時、実験的な実装を行うための方法として、ベンダー接頭辞を使用していました。この接頭辞の考え方は、他の実装と衝突することなく、ブラウザのエンジニアやウェブ開発者が仕様の実装をテストし、検討できるようにすることでした。実験的に実装されたものを本番コードで使用することはないという考えでした。しかし、最終的には本番コードでも接頭辞が使用されるようになり、実験的な仕様の変更に伴い、サイトを更新する必要が出てきました。 -<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">2009 年の仕様</a>は、今とはだいぶ異なります。フレックスコンテナーの生成するには <code>display: box</code> を使い、数々の <code>box-*</code> プロパティがあり、今日のフレックスボックスと同じような機能を持っていました。</p> +[2009 年の仕様](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)は、今とはだいぶ異なります。フレックスコンテナーの生成するには `display: box` を使い、数々の `box-*` プロパティがあり、今日のフレックスボックスと同じような機能を持っていました。 -<p><a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">仕様変更</a>によって構文が <code>display: flexbox</code> へと変わりました。これもベンダー接頭辞つきでした。</p> +[仕様変更](https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)によって構文が `display: flexbox` へと変わりました。これもベンダー接頭辞つきでした。 -<p>最終的には、フレックスコンテナーの作成には <code>display: flex</code> を指定するという仕様に変わりました。仕様が固まってからは、最新の仕様に対するブラウザーの対応は良好です。</p> +最終的には、フレックスコンテナーの作成には `display: flex` を指定するという仕様に変わりました。仕様が固まってからは、最新の仕様に対するブラウザーの対応は良好です。 -<p>古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナーの指定方法の違いで簡単に見分けられます。 <code>display: box</code> や <code>display: flexbox</code> ならば、それは古い情報です。</p> +古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナーの指定方法の違いで簡単に見分けられます。 `display: box` や `display: flexbox` ならば、それは古い情報です。 -<h2 id="Status_in_browsers" name="Status_in_browsers">ブラウザーの状況</h2> +## ブラウザーの状況 -<p>フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダー接頭辞は不要です。 Safari が 2015 年に Safari 9 で対応したことで、有名なブラウザーはすべて接頭辞不要となりました。ただし、下記の 2 つのブラウザーでは、ブラウザー間の互換性にまだ注意が必要です。</p> +フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダー接頭辞は不要です。 Safari が 2015 年に Safari 9 で対応したことで、有名なブラウザーはすべて接頭辞不要となりました。ただし、下記の 2 つのブラウザーでは、ブラウザー間の互換性にまだ注意が必要です。 -<ul> - <li>Internet Explorer 10。<code>display: flexbox</code> の仕様で実装されていて、<code>-ms-</code> の接頭辞が必要です。</li> - <li>UC Browser。2009 年の <code>display: box</code> の仕様のままで、<code>-webkit-</code> の接頭辞が必要です。</li> -</ul> +- Internet Explorer 10。`display: flexbox` の仕様で実装されていて、`-ms-` の接頭辞が必要です。 +- UC Browser。2009 年の `display: box` の仕様のままで、`-webkit-` の接頭辞が必要です。 -<p>また、Internet Explorer 11 は最新の <code>display: flex</code> の仕様に対応していますが、その実装に多くのバグがあることにも注意してください。</p> +また、Internet Explorer 11 は最新の `display: flex` の仕様に対応していますが、その実装に多くのバグがあることにも注意してください。 -<h2 id="Common_issues" name="Common_issues">よくある問題</h2> +## よくある問題 -<p>フレックスボックスの問題の大部分は、開発中だった頃の仕様の変更や、実験段階の仕様を本番で使おうとすることに関連しています。IE10 や IE11 のような古いブラウザーへの後方互換性を確保したいなら、<a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> のサイトが役に立ちます。そこで挙げられているバグの多くが古いバージョンのブラウザーのものであり、現行のバージョンでは解決していることが分かると思います。バグにはそれぞれ回避策が示されているので、長い試行錯誤から救ってくれることでしょう。</p> +フレックスボックスに関する問題の大半は、開発中だった頃の仕様変更や、実験段階の仕様を本番で使おうとすることに関連しています。古いバージョンのブラウザー (特に IE10 と 11) との下位互換性を確保しようとしている場合は、[Flexbugs](https://github.com/philipwalton/flexbugs) のサイトが参考になります。掲載されているバグの多くは、古いブラウザーのバージョンに適用され、現行のブラウザーでは修正されていることがわかります。それぞれのバグには回避策が記載されているので、何時間も悩む必要はありません。 -<p>非常に古いブラウザーにも対応したいのなら、CSS での通常の指定に加えて、ベンダー接頭辞つきの指定を使ってください。フレックスボックスへの対応が広がっている現在、接頭辞が必要な場面はどんどん少なくなっていますが。</p> +非常に古いブラウザーにも対応したいのなら、CSS での通常の指定に加えて、ベンダー接頭辞つきの指定を使ってください。フレックスボックスへの対応が広がっている現在、接頭辞が必要な場面はどんどん少なくなっていますが。 -<pre class="brush: css notranslate">.wrapper { +```css +.wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -}</pre> +} +``` -<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> は、どの世代のブラウザーまで対応したいかに応じて必要な接頭辞を示してくれるので便利です。また、<a href="https://caniuse.com/#feat=flexbox">Can I Use</a> では、ブラウザーで接頭辞が削除された時期を調べることができます。</p> +[Autoprefixer Online](https://autoprefixer.github.io/) は、どの世代のブラウザーまで対応したいかに応じて必要な接頭辞を示してくれるので便利です。また、[Can I Use](https://caniuse.com/#feat=flexbox) では、ブラウザーで接頭辞が削除された時期を調べることができます。 -<h2 id="Useful_fallback_techniques" name="Useful_fallback_techniques">有用なフォールバック方法</h2> +## 有用な代替方法 -<p>フレックスボックスの適用が {{cssxref("display")}} プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることでフォールバックとすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。</p> +フレックスボックスの適用が {{cssxref("display")}} プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることで代替とすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。 -<h3 id="Floated_items" name="Floated_items">浮動アイテム</h3> +### 浮動アイテム -<blockquote> -<p>「float と clear はフレックスアイテムの浮動やその解除を行いません。また、フロー外へ出すこともしません」 - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Flex Containers</a></p> -</blockquote> +> 「float と clear はフレックスアイテムの浮動やその解除を行いません。また、フロー外へ出すこともしません」 - [3. Flex Containers](https://www.w3.org/TR/css-flexbox-1/#flex-containers) -<p>下記のライブサンプルでは、2 つのブロック要素を浮動させ、コンテナに <code>display: flex</code> を指定しています。これでアイテムはフレックスアイテムとなります。つまり両者は同じ高さに引き伸ばされます。float の効果は一切現れません。</p> +下記のライブサンプルでは、2 つのブロック要素を浮動させ、コンテナーに `display: flex` を指定しています。これでアイテムはフレックスアイテムとなります。つまり両者は同じ高さに引き伸ばされます。float の効果は一切現れません。 -<p>フォールバックの挙動を試すには、ラッパーから <code>display: flex</code> を削除してください。</p> +代替の挙動を試すには、ラッパーから `display: flex` を削除してください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}} -<h3 id="display_inline-block" name="display_inline-block">display: inline-block</h3> +### display: inline-block -<p><code>inline-block</code> のアイテムがフレックスアイテムになるとブロック要素になり、アイテム同士の間に空白が保持されるような <code>display: inline-block</code> の効果が現れなくなります。</p> +`inline-block` のアイテムがフレックスアイテムになるとブロック要素になり、アイテム同士の間に余白が保持されるような `display: inline-block` の効果が現れなくなります。 -<p><code>display: flex</code> を削除してフォールバックの挙動を確認してください。アイテム間に空白が追加されるはずです。これはインライン要素や <code>display: inine-block</code> を指定した要素の挙動と同じです。</p> +`display: flex` を削除して代替の挙動を確認してください。アイテム間に余白が追加されるはずです。これはインライン要素や `display: inine-block` を指定した要素の挙動と同じです。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}} -<h3 id="display_table-" name="display_table-">display: table-</h3> +### display: table- -<p>CSS のテーブル表示のプロパティは、フォールバックとしてはおそらく最も有用でしょう。なぜなら、高さを揃えるために引き伸ばすことや、縦方向の中央揃えなどのデザインパターンが可能であり、しかもそれが Internet Explorer 8 のような古いブラウザーでも動作するからです。</p> +CSS のテーブル表示のプロパティは、代替としてはおそらく最も有用でしょう。なぜなら、高さを揃えるために引き伸ばしたり、縦方向に中央揃えするなどのデザインパターンが可能であり、しかもそれが Internet Explorer 8 のような古いブラウザーでも動作するからです。 -<p>アイテムに <code>display: table-cell</code> を指定すれば、HTML のテーブルセルの性質を帯びることになります。CSS は 2 種類の無名のボックスを作ります。ひとつは <tr> の、もうひとつは <table> の役割を果たします。このおかげで、アイテムを実際の HTML 要素で包む必要はありません。これら無名ボックスは不可視でスタイルを指定することもできません。単にツリー構造を補うためのものなのです。</p> +アイテムに `display: table-cell` を指定すれば、HTML のテーブルセルの性質を帯びることになります。CSS では、これらの項目を表す無名のボックスを作成し、各項目を HTML のテーブルの行を表すラッパーとテーブル要素自体を表すラッパーで包む必要がないようにしています。これらの無名のボックスは、見ることもできないし、スタイルを決めることもできません。単にツリー構造を補うためのものなのです。 -<p>親要素に <code>display: flex</code> を指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナの直下の子要素のままなので、フレックスアイテムになることができます。なお、テーブル関連の機能は失われます。</p> +親要素に `display: flex` を指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナーの直下の子要素のままなので、フレックスアイテムになることができます。なお、テーブル関連の機能は失われます。 -<blockquote> -<p>「注: display の値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。例えば、2 つの隣り合うフレックスアイテムに display: table-cell を指定すると、display: block を指定された 2 つの別々の フレックスアイテムとなります。1 つの無名のテーブル要素にまとめて包まれることはありません」 - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Flex Items</a></p> -</blockquote> +> 「注: display の値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。例えば、2 つの隣り合うフレックスアイテムに display: table-cell を指定すると、display: block を指定された 2 つの別々の フレックスアイテムとなります。1 つの無名のテーブル要素にまとめて包まれることはありません」 - [4. Flex Items](https://www.w3.org/TR/css-flexbox-1/#flex-items) -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}} -<h3 id="The_vertical-align_property" name="The_vertical-align_property">vertical-align プロパティ</h3> +### vertical-align プロパティ -<p>下記のライブサンプルでは、<code>display: inline-block</code> の要素に対して {{cssxref("vertical-align")}} を指定しています。このプロパティは、<code>display: table-cell</code> と <code>display: inline-block</code> のどちらにも指定できます。<code>vertical-align</code> による縦方向の整列は、フレックスボックスよりも先に行われます。このプロパティはフレックスボックスには無視されるので、フォールバックとして <code>display: table-cell</code> や <code>display: inline-block</code> とともに使用できます。それによってフレックスボックスの整列系のプロパティが悪影響を受けることはありません。</p> +下記のライブサンプルでは、`display: inline-block` の要素に対して {{cssxref("vertical-align")}} を指定しています。このプロパティは、`display: table-cell` と `display: inline-block` のどちらにも指定できます。`vertical-align` による縦方向の整列は、フレックスボックスよりも先に行われます。このプロパティはフレックスボックスでは無視されるので、代替として `display: table-cell` や `display: inline-block` とともに使用できます。それによってフレックスボックスの配置プロパティが悪影響を受けることはありません。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}} -<h2 id="Feature_Queries_and_flexbox" name="Feature_Queries_and_flexbox">機能クエリとフレックスボックス</h2> +## 機能クエリーとフレックスボックス -<p>下記のように、フレックスボックスに対応しているかどうかを<a href="/ja/docs/Web/CSS/%40supports">機能クエリ</a>で検査できます。</p> +下記のように、フレックスボックスに対応しているかどうかを[機能クエリー](/ja/docs/Web/CSS/@supports)で検査できます。 -<pre class="brush: css notranslate">@supports (display: flex) { +```css +@supports (display: flex) { // 対応しているブラウザー向けのコード -}</pre> +} +``` -<p>Internet Explorer 11 は機能クエリに対応していませんが、フレックスボックスには対応していることに注意してください。IE11 のフレックスボックスの実装にはバグが多いため、フォールバックを採用することもあるでしょう。その場合は機能クエリを使って、対応しているブラウザーだけにフレックスボックスを適用することができます。ベンダー接頭辞が必要がブラウザーをサポート対象に含めたいなら、機能クエリにもベンダー接頭辞付きの条件を追加する必要があることを忘れないでください。下記の機能クエリは UC Browser を含みます。UC Browser は機能クエリと接頭辞付きの古い構文に対応しています。</p> +Internet Explorer 11 は機能クエリーに対応していませんが、フレックスボックスには対応していることに注意してください。IE11 のフレックスボックスの実装にはバグが多いため、代替を採用することもあるでしょう。その場合は機能クエリーを使って、対応しているブラウザーだけにフレックスボックスを適用することができます。ベンダー接頭辞が必要がブラウザーをサポート対象に含めたいなら、機能クエリーにもベンダー接頭辞付きの条件を追加する必要があることを忘れないでください。下記の機能クエリーは UC Browser を含みます。UC Browser は機能クエリーと接頭辞付きの古い構文に対応しています。 -<pre class="brush: css notranslate">@supports (display: flex) or (display: -webkit-box) { +```css +@supports (display: flex) or (display: -webkit-box) { // 対応しているブラウザー向けのコード -}</pre> +} +``` -<p>機能クエリについて詳しく知りたい場合は、Mozilla Hacks ブログの <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a> をご覧ください。</p> +機能クエリーについて詳しく知りたい場合は、Mozilla Hacks ブログの [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) をご覧ください。 -<h2 id="Conclusion" name="Conclusion">終わりに</h2> +## 終わりに -<p>このガイドで潜在的な問題やフォールバックについて学んだことで、フレックスボックスを本番で使う準備が整いました。このガイドは、問題に遭遇した場合、または古いブラウザーに対応する必要がある場合に役立ちます。</p> +このガイドでは、潜在的な問題や代替について説明してきましたが、フレックスボックスはすぐにでも本番で使用できる状態になっています。このガイドは、問題が発生した場合や古いブラウザーに対応する必要がある場合に役立ちます。 diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png Binary files differnew file mode 100644 index 0000000000..d5a5f920a4 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png Binary files differnew file mode 100644 index 0000000000..73793d400b --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png Binary files differnew file mode 100644 index 0000000000..69f19c1a19 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png Binary files differnew file mode 100644 index 0000000000..a2cf5f3f5c --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png Binary files differnew file mode 100644 index 0000000000..ad26082b21 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png Binary files differnew file mode 100644 index 0000000000..00fe14b399 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png Binary files differnew file mode 100644 index 0000000000..eba412b6af --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index d73d12b7d4..4b06ff6d80 100644 --- a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -4,234 +4,220 @@ slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox tags: - CSS - Flex - - Guide + - ガイド - axes - - concepts - - container - - flexbox + - 概念 + - コンテナー + - フレックスボックス translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary">通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間でスペースの分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。</p> +通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間で余白の分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。 -<p>フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が行と列の二次元を同時に制御するモデルであることと対照的です。</p> +フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)が行と列の二次元を同時に制御するモデルであることと対照的です。 -<h2 id="The_two_axes_of_flexbox" name="The_two_axes_of_flexbox">フレックスボックス 2 つの軸</h2> +## フレックスボックス 2 つの軸 -<p>フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は {{cssxref("flex-direction")}} プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作ではつねにこの軸について参照することになるので、最初にその動きを理解しましょう。</p> +フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は {{cssxref("flex-direction")}} プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作では常にこの軸について参照することになるので、最初にその動きを理解しましょう。 -<h3 id="The_main_axis" name="The_main_axis">主軸</h3> +### 主軸 -<p>主軸は <code>flex-direction</code> によって定義され、4 種類の値をとることができます。</p> +主軸は `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> を選択した場合、主軸は<strong>インライン要素の並ぶ方向</strong>に伸びる軸となります。</p> +`row` または `row-reverse` を選択した場合、主軸は**インライン要素の並ぶ方向**に伸びる軸となります。 -<p><img alt="flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。" src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + -<p><code>column</code> または <code>column-reverse</code> を選んだ場合は、ページの上から下に向かって<strong>ブロック要素の並ぶ方向</strong>に伸びる軸となります。</p> +`column` または `column-reverse` を選んだ場合は、ページの上から下に向かって**ブロック要素の並ぶ方向**に伸びる軸となります。 -<p><img alt="flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + -<h3 id="The_cross_axis" name="The_cross_axis">交差軸</h3> +### 交差軸 -<p>交差軸は主軸に垂直に交わる軸です。したがって、<code>flex-direction</code> (主軸) が <code>row</code> または <code>row-reverse</code> なら、交差軸は列に沿ったものになります。</p> +交差軸は主軸に垂直に交わる軸です。したがって、`flex-direction` (主軸) が `row` または `row-reverse` なら、交差軸は列に沿ったものになります。 -<p><img alt="flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + -<p>主軸が <code>column</code> または <code>column-reverse</code> であれば、交差軸は行の方向になります。</p> +主軸が `column` または `column-reverse` であれば、交差軸は行の方向になります。 -<p><img alt="flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + -<p>フレックスアイテムの整列と位置合わせを検討する際には、どの軸が重要なのかを理解することが重要です。フレックスボックスには、コンテンツを一方の軸または他方の軸に沿って揃えたり、位置合わせしたりするプロパティが用意されています。</p> +フレックスアイテムの整列と位置合わせを検討する際には、どの軸が重要なのかを理解することが重要です。フレックスボックスには、コンテンツを一方の軸または他方の軸に沿って揃えたり、位置合わせしたりするプロパティが用意されています。 -<h2 id="Start_and_end_lines" name="Start_and_end_lines">行の先頭と末尾</h2> +## 行の先頭と末尾 -<p>理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。</p> +理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。 -<p>フレックスボックスと書字方向の仕様の関係については、後に別の記事でくわしく触れますが、ここではフレックスアイテムを流し込む方向について、上下左右という言葉を使わない理由について説明します。</p> +後述する[フレックスボックスと他のレイアウト方法の関係を読む](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods#writing_modes)こともできますが、フレックスアイテムが流れる方向を説明するときに、左右や上下の話をしない理由は、以下の説明で理解できると思います。 -<p>もし <code>flex-direction</code> が <code>row</code> で言語が英語の場合、主軸の先頭は左で末尾は右になります。</p> +もし `flex-direction` が `row` で言語が英語の場合、主軸の先頭は左で末尾は右になります。 -<p><img alt="英語の場合、先頭は左" src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + -<p>一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。</p> +一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。 -<p><img alt="右から左に書く言語では、先頭は右" src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + -<p>いずれの場合でも、両言語ともに書字方向が横書きであるため、交差軸の先頭側は上で末尾側が下になります。</p> +両言語ともに書字方向が横書きであるため、いずれの場合でも、交差軸の先頭側は上で末尾側が下になります。 -<p>こうしてみると、左と右ではなく先頭と末尾で考えることが自然なものに思えます。この考え方は CSS グリッドレイアウトのような、同じパターンに従っているレイアウトメソッドを扱う際にも役立つでしょう。</p> +こうしてみると、左と右ではなく先頭と末尾で考えることが自然なものに思えます。この考え方は CSS グリッドレイアウトのような、同じパターンに従っているレイアウトメソッドを扱う際にも役立つでしょう。 -<h2 id="The_flex_container" name="The_flex_container">フレックスコンテナー</h2> +## フレックスコンテナー -<p>フレックスボックスを使ってレイアウトされる文書の領域は、<strong>フレックスコンテナー</strong>と呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して {{cssxref("display")}} プロパティの値を <code>flex</code> もしくは <code>inline-flex</code> に設定します。またこれにより、このコンテナー直下の子要素が <strong>フレックスアイテム</strong>となります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。</p> +フレックスボックスを使ってレイアウトされる文書の領域は、**フレックスコンテナー**と呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して {{cssxref("display")}} プロパティの値を `flex` もしくは `inline-flex` に設定します。またこれにより、このコンテナー直下の子要素が**フレックスアイテム**となります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。 -<ul> - <li>フレックスアイテムは行に沿って並んで表示されます (<code>flex-direction</code> プロパティの既定値は <code>row</code>)。</li> - <li>フレックスアイテムは主軸の先頭側を先頭に並びます。</li> - <li>フレックスアイテムは、主軸方向に伸張されませんが、収縮する場合があります。</li> - <li>フレックスアイテムは、交差軸の大きさを埋めるように伸張されます。</li> - <li>{{cssxref("flex-basis")}} プロパティは <code>auto</code> に設定されます。</li> - <li>{{cssxref("flex-wrap")}} プロパティは <code>nowrap</code> に設定されます。</li> -</ul> +- フレックスアイテムは行に沿って並んで表示されます (`flex-direction` プロパティの既定値は `row`)。 +- フレックスアイテムは主軸の先頭側を先頭に並びます。 +- フレックスアイテムは、主軸方向に伸張されませんが、収縮する場合があります。 +- フレックスアイテムは、交差軸の大きさを埋めるように伸張されます。 +- {{cssxref("flex-basis")}} プロパティは `auto` に設定されます。 +- {{cssxref("flex-wrap")}} プロパティは `nowrap` に設定されます。 -<p>その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより大きい場合には、すべてのアイテムが交差軸方向にその全高を埋めるように伸張されます。</p> +その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより大きい場合には、すべてのアイテムが交差軸方向にその全高を埋めるように伸張されます。 -<p>この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。</p> +この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} -<h3 id="Changing_flex-direction" name="Changing_flex-direction">flex-direction の変更</h3> +### flex-direction の変更 -<p>フレックスコンテナーに {{cssxref("flex-direction")}} プロパティを設定すると、フレックスアイテムが表示される方向を変更することができます。 <code>flex-direction: row-reverse</code> と設定することで、アイテムは行に沿って並ぶ点は変わりませんが、先頭と末尾が入れ替わります。</p> +フレックスコンテナーに {{cssxref("flex-direction")}} プロパティを設定すると、フレックスアイテムが表示される方向を変更することができます。 `flex-direction: row-reverse` と設定することで、アイテムは行に沿って並ぶ点は変わりませんが、先頭と末尾が入れ替わります。 -<p><code>flex-direction</code> を <code>column</code> に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 <code>column-reverse</code> では、さらに先頭と末尾が入れ替わります。</p> +`flex-direction` を `column` に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 `column-reverse` では、さらに先頭と末尾が入れ替わります。 -<p>次の例では、<code>flex-direction</code> が <code>row-reverse</code> に設定されています。他の値である <code>row</code>, <code>column</code>, <code>cokumn-reverse</code> で何が起こるか確かめてみてください。</p> +次の例では、`flex-direction` が `row-reverse` に設定されています。他の値である `row`, `column`, `cokumn-reverse` で何が起こるか確かめてみてください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}} -<h2 id="Multi-line_flex_containers_with_flex-wrap" name="Multi-line_flex_containers_with_flex-wrap">flex-wrap による複数行のフレックスコンテナー</h2> +## flex-wrap による複数行のフレックスコンテナー -<p>フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。スペースの分配はその行の中でのみ発生し、隣の行については参照されません。</p> +フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。余白の分配はその行の中でのみ発生し、隣の行については参照されません。 -<p>折り返しを発生させるには {{cssxref("flex-wrap")}} プロパティに値として <code>wrap</code> を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返しされます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるような幅をアイテムに設定しています。 <code>flex-wrap</code> を <code>wrap</code> に設定すると、アイテムが折り返します。初期値である <code>nowrap</code> に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 <code>nowrap</code> はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。</p> +折り返しを発生させるには {{cssxref("flex-wrap")}} プロパティに値として `wrap` を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返しされます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるような幅をアイテムに設定しています。 `flex-wrap` を `wrap` に設定すると、アイテムが折り返します。初期値である `nowrap` に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 `nowrap` はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}} -<p>フレックスアイテムの折り返しについての詳細は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a>を参照してください。</p> +フレックスアイテムの折り返しについての詳細は、[フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)を参照してください。 -<h2 id="The_flex-flow_shorthand" name="The_flex-flow_shorthand">flex-flow 一括指定プロパティ</h2> +## flex-flow 一括指定プロパティ -<p><code>flex-direction</code> と <code>flex-wrap</code> の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が <code>flex-direction</code> で、2 つ目の値が <code>flex-wrap</code> です。</p> +`flex-direction` と `flex-wrap` の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が `flex-direction` で、2 つ目の値が `flex-wrap` です。 -<p>以下の例で、1 つ目の値を <code>flex-direction</code> に使える値 (<code>row</code>, <code>row-reverse</code>, <code>column</code>, <code>column-reverse</code> のいずれか) に変更してみてください。また、2 つ目の値を <code>wrap</code> か <code>nowrap</code> に変更してみてください。</p> +以下の例で、1 つ目の値を `flex-direction` に使える値 (`row`, `row-reverse`, `column`, `column-reverse` のいずれか) に変更してみてください。また、2 つ目の値を `wrap` か `nowrap` に変更してみてください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}} -<h2 id="Properties_applied_to_flex_items" name="Properties_applied_to_flex_items">フレックスアイテムに適用されるプロパティ</h2> +## フレックスアイテムに適用されるプロパティ -<p>フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。</p> +フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。 -<ul> - <li>{{cssxref("flex-grow")}}</li> - <li>{{cssxref("flex-shrink")}}</li> - <li>{{cssxref("flex-basis")}}</li> -</ul> +- {{cssxref("flex-grow")}} +- {{cssxref("flex-shrink")}} +- {{cssxref("flex-basis")}} -<p>本ページでは、これらのプロパティについて簡単に触れます。<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸におけるフレックスアイテムの比率の制御</a>のガイドで、より完全な情報を得られます。</p> +本ページでは、これらのプロパティについて簡単に触れます。[主軸におけるフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)のガイドで、より完全な情報を得られます。 -<p>上述のプロパティについて理解する前に、<strong>分配可能スペース</strong> (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能スペースの分配のしかたを変えるということです。この分配可能スペースについての考え方は、アイテムの位置合わせについて考える時に重要になります。</p> +上述のプロパティについて理解する前に、**分配可能な余白** (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能な余白の分配のしかたを変えるということです。この分配可能な余白についての考え方は、アイテムの位置合わせについて考える時に重要になります。 -<p>たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能スペースが残っています。初期値を変更しなかった場合フレックスボックスは、スペースを最後のアイテムの後ろに配置します。</p> +たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能な余白が残っています。初期値を変更しなかった場合フレックスボックスは、余白を最後のアイテムの後ろに配置します。 -<p><img alt="このフレックスコンテナーは、アイテムを配置した後に分配可能スペースがある。" src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + -<p>そうではなく、アイテムを拡大してスペースを埋めたいときには、余っているスペースをアイテムに分配する方法が必要となります。それがアイテム自体に設定する <code>flex</code> プロパティが提供する機能です。</p> +そうではなく、アイテムを拡大して余白を埋めたいときには、余っている余白をアイテムに分配する方法が必要となります。それがアイテム自体に設定する `flex` プロパティが提供する機能です。 -<h3 id="The_flex-basis_property" name="The_flex-basis_property">flex-basis プロパティ</h3> +### flex-basis プロパティ -<p><code>flex-basis</code> は、そのアイテムの寸法を、使用しないスペースは分配可能スペースとして残すように定義します。このプロパティの初期値は auto で、この設定ではブラウザーはアイテムにサイズが設定されているかを確認します。上述の例では、すべてのアイテムが100ピクセルの幅に設定されているため、これが <code>flex-basis</code> として使われます。</p> +`flex-basis` は、そのアイテムの寸法を、使用しない余白は分配可能な余白として残すように定義します。このプロパティの初期値は `auto` で、この設定ではブラウザーはアイテムに寸法が設定されているかを確認します。上述の例では、すべてのアイテムが 100 ピクセルの幅に設定されているため、これが `flex-basis` として使われます。 -<p>アイテムにサイズが設定されていない場合は、その内容のサイズが <code>flex-basis</code> として使われます。<code>display: flex</code> を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要なスペースのみを使用して行の中に整列していたのは、この挙動のためです。</p> +アイテムに寸法が設定されていない場合は、その内容の大きさが `flex-basis` として使われます。`display: flex` を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要な余白のみを使用して行の中に整列していたのは、この挙動のためです。 -<h3 id="The_flex-grow_property" name="The_flex-grow_property">flex-grow プロパティ</h3> +### flex-grow プロパティ -<p><code>flex-grow</code> プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って <code>flex-basis</code> 以上に伸張することができます。これによって、アイテムが主軸に沿った分配可能スペースをすべて使うまで伸張するか、ほかのアイテムにも <code>flex-grow</code> が設定されていたときには一定の割合を使うように伸張するようになります。</p> +`flex-grow` プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って `flex-basis` 以上に伸張することができます。これによって、アイテムが主軸に沿った分配可能な余白をすべて使うまで伸張するか、ほかのアイテムにも `flex-grow` が設定されていたときには一定の割合を使うように伸張するようになります。 -<p>先ほどの例で、すべてのアイテムの <code>flex-grow</code> に 1 を設定すると、分配可能スペースはアイテム間で均等に分配され、主軸に沿ってコンテナーを埋めるように伸張されます。</p> +先ほどの例で、すべてのアイテムの `flex-grow` に 1 を設定すると、分配可能な余白はアイテム間で均等に分配され、主軸に沿ってコンテナーを埋めるように伸張されます。 -<p><code>flex-grow</code> プロパティは割合で余白を配分するために使うことができます。最初のアイテムの <code>flex-grow</code> に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに2/4 (先ほどの例では 200px 中の 100px ) が与えられ、残りの 2 つのアイテムに 1/4 (200px 中の 50px ) ずつが与えられます。</p> +flex-grow プロパティは割合で余白を分配するために使うことができます。最初のアイテムの `flex-grow` に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに2/4 (先ほどの例では 200px 中の 100px ) が与えられ、残りの 2 つのアイテムに 1/4 (200px 中の 50px ) ずつが与えられます。 -<h3 id="The_flex-shrink_property" name="The_flex-shrink_property">flex-shrink プロパティ</h3> +### flex-shrink プロパティ -<p><code>flex-grow</code> プロパティが主軸上のスペースの追加を扱う一方で、<code>flex-shrink</code> はスペースの取りあげ方をコントロールします。 アイテムを配置するのに十分なスペースがコンテナーになく、<code>flex-shrink</code> に正の整数が設定されていれば、アイテムは <code>flex-basis</code> よりも小さくなります。<code>flex-grow</code> と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまりより大きな値が flex-shrink に設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも速く収縮します。</p> +`flex-grow` プロパティが主軸上の余白の追加を扱う一方で、`flex-shrink` は余白の取りあげ方をコントロールします。 アイテムを配置するのに十分な余白がコンテナーになく、`flex-shrink` に正の整数が設定されていれば、アイテムは `flex-basis` よりも小さくなります。`flex-grow` と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまり `flex-shrink` により大きな値が設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも早く収縮します。 -<p>実際の収縮幅の計算にはアイテムの最小サイズが考慮されるため、<code>flex-shrink</code> の動作は <code>flex-grow</code> に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</a> の記事に書かれています。</p> +実際の収縮幅の計算にはアイテムの最小寸法が考慮されるため、`flex-shrink` の動作は `flex-grow` に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、[主軸に沿ったフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)の記事に書かれています。 -<div class="note"> -<p>注意: <code>flex-grow</code> や <code>flex-shrink</code> に指定する値は割合です。一般的には、たとえばあるアイテムを他の <code>flex: 1 1 200px</code> に設定したアイテムより２倍速く拡大させたいときには、<code>flex: 2 1 200px</code> を設定します。しかし、望むならば <code>flex: 10 1 200px</code> と <code>flex: 20 1 200px</code> という書き方もできます。</p> -</div> +> **Note:** `flex-grow` や `flex-shrink` に指定する値は割合です。一般的には、たとえばあるアイテムを他の `flex: 1 1 200px` に設定したアイテムより２倍速く拡大させたいときには、`flex: 2 1 200px` を設定します。しかし、望むならば `flex: 10 1 200px` と `flex: 20 1 200px` という書き方もできます。 -<h3 id="Shorthand_values_for_the_flex_properties" name="Shorthand_values_for_the_flex_properties">flex プロパティの一括指定</h3> +### flex プロパティの一括指定の値 -<p><code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code> の各プロパティを個別に使うケースはとても珍しく、そのかわりに {{cssxref("flex")}} 一括指定プロパティでまとめて指定されることが多いでしょう。<code>flex</code> 一括指定プロパティは、<code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code> の順に３つの値を設定できます。</p> +`flex-grow`、`flex-shrink`、`flex-basis` の各プロパティを個別に使うケースは稀であり、そのかわりに {{cssxref("flex")}} 一括指定プロパティでまとめて指定されることが多いでしょう。`flex` 一括指定プロパティは、`flex-grow`、`flex-shrink`、`flex-basis` の順に 3 つの値を設定することができます。 -<p>以下の例では、<code>flex</code> 一括指定プロパティの様々な値を試せるようになっています。 最初の値が <code>flex-grow</code> であり、正の値を指定することでアイテムが伸張できるようになります。２番目の値は <code>flex-shrink</code> です。正の値によりアイテムが収縮できるようになりますが、アイテムの合計サイズが主軸からはみ出す場合のみ起こります。最後の値が <code>flex-basis</code> となり、アイテムが伸張・収縮する際の基準値となります。</p> +以下の例では、`flex` 一括指定プロパティの様々な値を試せるようになっています。 最初の値が `flex-grow` であり、正の値を指定することでアイテムが伸張できるようになります。2 番目の値は `flex-shrink` です。正の値によりアイテムが収縮できるようになりますが、アイテムの合計寸法が主軸からはみ出す場合のみ起こります。最後の値が `flex-basis` となり、アイテムが伸張・収縮する際の基準値となります。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}} -<p>また、ほとんどのユースケースをカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。</p> +また、ほとんどの用途をカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。 -<ul> - <li><code>flex: initial</code></li> - <li><code>flex: auto</code></li> - <li><code>flex: none</code></li> - <li><code>flex: <正の数></code></li> -</ul> +- `flex: initial` +- `flex: auto` +- `flex: none` +- `flex: <正の数>` -<p><code>flex: initial</code> はフレックスボックスの初期値にリセットします。これは <code>flex: 0 1 auto</code> に設定することと同じです。この場合 <code>flex-grow</code> は 0 となるため、アイテムが <code>flex-basis</code> よりも大きくなることはありません。<code>flex-shrink</code> は 1 なので、必要な場合にはオーバーフローするのではなく収縮します。<code>flex-basis</code> の値は <code>auto</code> です。アイテムに設定されている主軸に沿ったサイズか、またはアイテムの内容のサイズがフレックスアイテムのサイズとして使用されます。</p> +`flex: initial` はフレックスボックスの初期値にリセットします。これは `flex: 0 1 auto` に設定することと同じです。この場合 `flex-grow` は 0 となるため、アイテムが `flex-basis` よりも大きくなることはありません。`flex-shrink` は 1 なので、必要な場合にはオーバーフローするのではなく収縮します。`flex-basis` の値は `auto` です。アイテムに設定されている主軸に沿った寸法か、またはアイテムの内容の寸法がフレックスアイテムの寸法として使用されます。 -<p><code>flex: auto</code> では、<code>flex: 1 1 auto</code> に設定することと等しくなります。<code>flex: initial</code> とは、アイテムがコンテナーを埋めるように伸張する点を除いて同じで、必要に応じて収縮もします。</p> +`flex: auto` では、`flex: 1 1 auto` に設定することと等しくなります。`flex: initial` とは、アイテムがコンテナーを埋めるように伸張する点を除いて同じで、必要に応じて収縮もします。 -<p><code>flex: none</code> は、全く伸縮性の無い flex アイテムを作成します。これは <code>flex: 0 0 auto </code>と同じです。アイテムは伸張も収縮もせずに、<code>flex-basis: auto</code> のフレックスボックスとして配置されます。</p> +`flex: none` は、全く伸縮性のない flex アイテムを作成します。これは `flex: 0 0 auto `と同じです。アイテムは伸張も収縮もせずに、`flex-basis: auto` のフレックスボックスとして配置されます。 -<p>チュートリアル内では、<code>flex: 1</code> や <code>flex: 2</code> のような設定をよく目にするでしょう。これは <code>flex: 1 1 0</code> を使うのと同様、<code>flex-basis</code> が 0 の状態から伸び縮みします。</p> +チュートリアル内では、`flex: 1` や `flex: 2` のような設定をよく目にするでしょう。これは `flex: 1 1 0` を使うのと同様、`flex-basis` が 0 の状態から伸び縮みします。 -<p>これらの短縮値について、以下の例でためしてみてください。</p> +これらの一括指定値について、以下の例で試してみてください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}} -<h2 id="Alignment_justification_and_distribution_of_free_space_between_items" name="Alignment_justification_and_distribution_of_free_space_between_items">アイテム間での位置合わせ、端揃え、スペース分配</h2> +## アイテム間での位置合わせ、端揃え、余白分配 -<p>フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間でのスペースの分配ができる点にあります。</p> +フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間での余白の分配ができる点にあります。 -<h3 id="align-items">align-items</h3> +### align-items -<p>{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの位置合わせを行います。</p> +{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの位置合わせを行います。 -<p>このプロパティの初期値は <code>stretch</code> であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。</p> +このプロパティの初期値は `stretch` であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。 -<p>アイテムをフレックスコンテナーの先頭側に揃えるためには <code>align-items</code> に <code>flex-start</code> を設定し、末尾側に揃えるためには <code>flex-end</code> を、中央揃えにするには <code>center</code> を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。<code>align-items</code> に以下の値を設定したときにそれぞれ何が起こるか確認してください。</p> +アイテムをフレックスコンテナーの先頭側に揃えるためには `align-items` に `flex-start` を設定し、末尾側に揃えるためには `flex-end` を、中央揃えにするには `center` を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。`align-items` に以下の値を設定したときにそれぞれ何が起こるか確認してください。 -<ul> - <li><code>stretch</code></li> - <li><code>flex-start</code></li> - <li><code>flex-end</code></li> - <li><code>center</code></li> -</ul> +- `stretch` +- `flex-start` +- `flex-end` +- `center` -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}} -<h3 id="justify-content">justify-content</h3> +### justify-content -<p>{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり <code>flex-direction</code> で設定された方向における位置合わせを行います。初期値は <code>flex-start</code> で、コンテナーの先頭側からアイテムが並べられます。<code>flex-end</code> を設定することで末尾から、<code>center</code> を設定することで中央に並べることもできます。</p> +{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり `flex-direction` で設定された方向における位置合わせを行います。初期値は `flex-start` で、コンテナーの先頭側からアイテムが並べられます。`flex-end` を設定することで末尾から、`center` を設定することで中央に並べることもできます。 -<p>また、<code>space-between</code> を使用して、アイテムを配置したあとの残りのスペースのすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけのスペースを空けるには、<code>space-around</code> を使用します。<code>space-around</code> では、コンテナーの両端には、アイテム間の半分のサイズのスペースが設けられます。両端にも同じだけのスペースを設けるには、<code>space-evenly</code> を使用します。この場合はコンテナの両端にフルサイズ (アイテム間と同じサイズ) のスペースが設けられます。</p> +また、`space-between` を使用して、アイテムを配置したあとの残りの余白のすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけの余白を空けるには、`space-around` を使用します。`space-around` では、コンテナーの両端には、アイテムの間隔の半分の大きさの余白が設けられます。両端にも同じだけの余白を設けるには、`space-evenly` を使用します。この場合はコンテナの両端にフルサイズ (アイテムの間隔と同じ大きさ) の余白が設けられます。 -<p>例で、以下の <code>justify-content</code> の値を試してみましょう。</p> +例で、以下の `justify-content` の値を試してみましょう。 -<ul> - <li><code>flex-start</code></li> - <li><code>flex-end</code></li> - <li><code>center</code></li> - <li><code>space-around</code></li> - <li><code>space-between</code></li> - <li><code>space-evenly</code></li> -</ul> +- `flex-start` +- `flex-end` +- `center` +- `space-around` +- `space-between` +- `space-evenly` -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}} -<p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内でのアイテムの配置</a>の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどのユースケースで役に立つでしょう。</p> +[フレックスコンテナー内でのアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどの用途で役に立つでしょう。 -<h2 id="Next_steps" name="Next_steps">次のステップ</h2> +## 次のステップ -<p>この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事では<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">この仕様が他の CSS レイアウトメソッドとどのような関係にあるか</a>を見ていきます。</p> +この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事では[この仕様が他の CSS レイアウトメソッドとどのような関係にあるか](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods)を見ていきます。 diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/basics7.png b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/basics7.png Binary files differnew file mode 100644 index 0000000000..eba412b6af --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/basics7.png diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md index 379eb2ab8d..cd32c3cd83 100644 --- a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md +++ b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md @@ -6,8 +6,8 @@ tags: - Basis - CSS - Flex - - Guide - - flexbox + - ガイド + - フレックスボックス - free space - grow - max-content @@ -17,188 +17,180 @@ tags: translation_of: >- Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary">このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる三つのプロパティを見ていきます。 — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} です。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。</p> +このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる三つのプロパティ — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} を見ていきます。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。 -<h2 id="A_first_look" name="A_first_look">最初に見てみる</h2> +## 最初に見てみる -<p>三つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。</p> +3 つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。 -<ul> - <li><code>flex-grow</code>: このアイテムがどれだけ余白を得るか。</li> - <li><code>flex-shrink</code>: このアイテムからどれだけ余白を削除できるか。</li> - <li><code>flex-basis</code>: 伸長や縮小が発生する前のアイテムの寸法はいくつか。</li> -</ul> +- `flex-grow`: このアイテムが得る正の自由空間はどれくらいか。 +- `flex-shrink`: このアイテムから縮小できる負の自由空間はどれくらいか。 +- `flex-basis`: 伸長や縮小が発生する前のアイテムの寸法はいくつか。 -<p>プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは <code>flex-grow</code> プロパティを <code>2</code> に、 <code>flex-shrink</code> を <code>1</code> に、 <code>flex-basis</code> を <code>auto</code> に設定します。</p> +プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは `flex-grow` プロパティを `2` に、 `flex-shrink` を `1` に、 `flex-basis` を `auto` に設定します。 -<pre class="brush: css no-line-numbers">.item { +```css +.item { flex: 2 1 auto; -}</pre> +} +``` -<p>すでに<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a>の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。</p> +すでに[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。 -<h2 id="Important_concepts_when_working_on_the_main_axis" name="Important_concepts_when_working_on_the_main_axis">主軸に合わせて動作する重要概念</h2> +## 主軸に合わせて動作する重要概念 -<p>There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the <em>natural</em> size of flex items before any growing or shrinking takes place, and to the concept of free space.</p> +主軸に沿った比率を制御するためのフレックスプロパティの機能を見る前に、いくつかの概念を確認しておきましょう。これらは、フレックスアイテムの成長や縮小が起こる前の*自然な*寸法と、自由空間の概念に関連しています。 -<h3 id="Flex_item_sizing" name="Flex_item_sizing">フレックスアイテムの寸法の変更</h3> +### フレックスアイテムの寸法の変更 -<p>In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don’t have a width or a height applied using an absolute length unit?</p> +フレックスアイテムをレイアウトするための空間を確保するには、まずアイテムの大きさをブラウザーが知る必要があります。絶対的な長さの単位で適用される幅や高さを持たないアイテムは、どのようにして処理されるのでしょうか。 -<p>There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">defined in the CSS Intrinsic and Extrinsic Sizing Specification</a>, and can be used in place of a <a href="/ja/docs/Web/CSS/length">length unit</a>.</p> +CSS には {{CSSxRef('width','min-content','#min-content')}} と {{CSSxRef('width','max-content','#max-content')}} という概念があります。これらのキーワードは [CSS Intrinsic and Extrinsic Sizing 仕様書で定義](https://drafts.csswg.org/css-sizing-3/#width-height-keywords)されており、[長さの単位](/ja/docs/Web/CSS/length)の代わりに使用することができます。 -<p>In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of <code>min-content</code>. In a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the <code>min-content</code> size of that string. Essentially, the longest word in the string is dictating the size.</p> +例えば、以下のライブ例では、テキストの文字列を含む 2 つの段落要素があります。1 つ目の段落の幅は `min-content` となっています。このキーワードに対応しているブラウザーでは、テキストのソフトな折り返しの機会をすべて利用して、はみ出さない範囲で小さくなっているのがわかるはずです。これが、その文字列の最小コンテンツサイズです。基本的には、文字列の中で最も長い単語が大きさを決定します。 -<p>The second paragraph has a value of <code>max-content</code> and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.</p> +2 つ目の段落は、`max-content` という値を持っているので、逆のことをしています。これは可能な限り大きくして、ソフトな折り返しの機会を与えません。コンテナーが狭すぎるとボックスからあふれてしまいます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}} -<p>If your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering.</p> +お使いのブラウザーがこれらのキーワードにまだ対応していない場合、両方の段落はブロックフローの通常の段落としてレンダリングされます。以下のスクリーンショットは期待されるレンダリングを示しています。 -<p><img alt="The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p> + -<p>Remember this behaviour and what effects <code>min-content</code> and <code>max-content</code> have as we explore <code>flex-grow</code> and <code>flex-shrink</code> later in this article.</p> +この動作と、`min-content` および `max-content` がどのような効果を持つかについては、後述の `flex-grow` と `flex-shrink` の説明で覚えておいてください。 -<h3 id="Positive_and_negative_free_space" name="Positive_and_negative_free_space">正と負のフリースペース</h3> +### 正と負の自由空間 -<p>To talk about these properties we need to understand the concept of <strong>positive and negative free space</strong>. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, {{CSSxRef("flex-direction")}} is <code>row</code>, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.</p> +これらの特性を説明するには、**正と負の自由空間**の概念を理解する必要があります。フレックスコンテナーに正の自由空間がある場合は、コンテナー内にフレックスアイテムを表示するのに必要な空間よりも大きな空間があるということです。たとえば 幅が 500 ピクセルのコンテナーで、{{CSSxRef("flex-direction")}} が `row` であり、幅 100 ピクセルのフレックスアイテムが 3 つあった場合、正の自由空間が 200 ピクセルあり、コンテナーいっぱいに表示したい場合は、各アイテムに分配することができます。 -<p><img alt="Image showing space left over after items have been displayed." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + -<p>We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.</p> +アイテムの自然な大きさの合計が、フレックスコンテナー内の利用可能な空間よりも大きい場合、負の自由空間が発生します。上の図のように幅 500 ピクセルのコンテナーがあるものの、3 つのフレックスアイテムの幅がそれぞれ 200 ピクセルであった場合、必要な空間は合計で 600 ピクセルとなり、100 ピクセルの負の自由空間が発生します。これをアイテムから取り除くことで、コンテナーに合わせることができます。 -<p><img alt="The items overflow the container" src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p> + -<p>It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.</p> +フレックスのプロパティを理解するには、この正の自由空間の分配と負の自由空間の除去を理解する必要があります。 -<p>In the following examples I am working with {{CSSxRef("flex-direction")}} set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with <code>flex-direction: column</code>. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.</p> +以下の例では、{{CSSxRef("flex-direction")}} を row (行) に設定して作業しているので、アイテムの寸法は常に幅に基づいて決定されます。すべてのアイテムの幅の合計とコンテナーの幅を比較して、正と負の自由空間を計算します。それぞれの例を `flex-direction: column` で試すこともできます。主軸が列になり、アイテムの高さと、アイテムが入っているコンテナーの高さを比較して、プラスとマイナスの自由空間を計算する必要が出てきます。 -<h2 id="The_flex-basis_property" name="The_flex-basis_property">flex-basis プロパティ</h2> +## flex-basis プロパティ -<p>The {{CSSxRef("flex-basis")}} property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is <code>auto</code>. If <code>flex-basis</code> is set to <code>auto</code> then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case <code>200px</code> would be the <code>flex-basis</code> for this item.</p> +{{CSSxRef("flex-basis")}} プロパティは、空間の分配が行われる前のフレックスアイテムの初期の大きさを指定します。このプロパティの初期値は `auto` です。`flex-basis` が `auto` に設定されている場合、ブラウザーはアイテムの初期の大きさを計算するために、まずアイテムの主軸方向の寸法に絶対寸法が設定されているかどうかをチェックします。例えば、アイテムの幅を 200 ピクセルに設定している場合です。この場合、`200px` がこのアイテムのフレックスベースとなります。 -<p>If your item is instead auto-sized, then <code>auto</code> resolves to the size of its content. At this point your knowledge of <code>min-</code> and <code>max-content</code> sizing becomes useful, as flexbox will take the <code>max-content</code> size of the item as the <code>flex-basis</code>. The following live example can help to demonstrate this.</p> +アイテムの寸法が自動になっている場合、`auto` を指定すると内容物の寸法が解決値になります。このとき、`min-` および `max-content` の寸法に関する知識があると便利です。フレックスボックスでは、アイテムの `max-content` の寸法を `flex-basis` として使用します。次のライブ例でこれを説明します。 -<p>In this example I have created a series of inflexible boxes, with both <code>flex-grow</code> and <code>flex-shrink</code> set to <code>0</code>. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a <code>flex-basis</code> of <code>150px</code>, whereas the other two items have no width and so are sized according to their content width.</p> +この例では、柔軟性のない一連のボックスを作成し、`flex-grow` と `flex-shrink` の両方を `0` に設定しています。ここでは、主軸方向の寸法として 150 ピクセルの幅を明示的に設定した最初のアイテムが、`flex-basis`として`150px`を取るのに対し、他の2つのアイテムは幅を持たないため、コンテンツの幅に応じたサイズになっていることがわかります。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}} -<p>In addition to the <code>auto</code> keyword, you can use the <code>content</code> keyword as the <code>flex-basis</code>. This will result in the <code>flex-basis</code> being taken from the content size even if there is a width set on the item. This is a newer keyword and has less browser support, however you can always get the same effect by using <code>auto</code> as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.</p> +`auto` キーワードに加えて、`content` キーワードを `flex-basis` として使用することができます。この場合、アイテムに幅が設定されていても、コンテンツの寸法から `flex-basis` が算出されます。これは新しいキーワードで、ブラウザーの対応も少ないのですが、`auto` を flex-basis として使用し、アイテムに幅を設定しないようにすることで、自動で寸法が調整されるので、常に同じ効果を得ることができます。 -<p>If you want flexbox to completely ignore the size of the item when doing space distribution then set <code>flex-basis</code> to <code>0</code>. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at <code>flex-grow</code>.</p> +余白の分配を行う際に、フレックスボックスでアイテムの寸法を完全に無視したい場合は、`flex-basis`を`0`に設定します。これは基本的に、フレックスボックスのすべての空間が利用可能であり、それをアイテムに比例して分配することを指示します。この例は、次に紹介する `flex-grow` で見てみましょう。 -<h2 id="The_flex-grow_property" name="The_flex-grow_property">flex-grow プロパティ</h2> +## flex-grow プロパティ -<p>The {{CSSxRef("flex-grow")}} property specifies the <strong>flex grow factor</strong>, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.</p> +{{CSSxRef("flex-grow")}}プロパティは、**フレックス伸長係数**を指定します。これは、正の自由空間が分配されたときに、フレックスアイテムがフレックスコンテナー内の他のフレックスアイテムに対してどれだけ伸長するかを決定します。 -<p>If all of your items have the same <code>flex-grow</code> factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use <code>1</code> as the value, however you could give them all a <code>flex-grow</code> of <code>88</code>, or <code>100</code>, or <code>1.2</code> if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.</p> +すべてのアイテムの `flex-grow` 係数が同じであれば、余白はすべてのアイテムに均等に分配されます。このような場合、ふつうは値に `1` を使用しますが、すべてのアイテムに `flex-grow` の値として `88`、`100`、`1.2` など与えることもできます。これは係数です。係数がすべてのアイテムで等しく、フレックスコンテナー内に正の自由空間があれば、すべてのアイテムに均等に分配されます。 -<h3 id="Combining_flex-grow_and_flex-basis" name="Combining_flex-grow_and_flex-basis"><code>flex-grow</code> と <code>flex-basis</code> を組み合わせる</h3> +### `flex-grow` と `flex-basis` を組み合わせる -<p>Things can get confusing in terms of how <code>flex-grow</code> and <code>flex-basis</code> interact. Let's consider the case of three flex items of differing content lengths and the following <code>flex</code> rules applied to them:</p> +`flex-grow` と `flex-basis` がどのように相互作用するかという点については混乱しやすいものです。コンテンツの長さが異なる 3 つのフレックスアイテムに、次のような `flex` ルールを適用した場合を考えてみましょう。 -<p><code>flex: 1 1 auto;</code></p> +`flex: 1 1 auto;` -<p>In this case the <code>flex-basis</code> value is <code>auto</code> and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the <code>max-content</code> size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:</p> +この場合、`flex-basis` の値は `auto` で、アイテムには幅が設定されていないので、寸法は自動調整されます。つまり、フレックスボックスはアイテムの `max-content` の寸法を見ていることになります。アイテムを並べると、フレックスコンテナー内に正の自由空間 (この画像で斜線を引いた部分) ができます。 -<p><img alt="Images shows the positive free space as a hatched area" src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p> + -<p>We are working with a <code>flex-basis</code> equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:</p> +コンテンツの寸法と同じ `flex-basis` を使用しているので、全体の利用可能な空間 (フレックスコンテナーの幅) から分配可能な領域を差し引いた余白を各アイテムに均等に分配しています。大きなアイテムは、他のアイテムと同じ量の余白が割り当てられますが、もともと寸法が大きいので、結果的にもっと大きくなります。 -<p><img alt="The positive space is distributed between items" src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p> + -<p>If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:</p> +もし本当に実現したいことが 3 つのアイテムを同じ大きさにすることであれば、最初の寸法が異なっていても、これを使用してください。 -<p><code>flex: 1 1 0;</code></p> +`flex: 1 1 0;` -<p>Here we are saying that the size of the item for the purposes of our space distribution calculation is <code>0</code> — all the space is up for grabs and as all of the items have the same <code>flex-grow</code> factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.</p> +ここでは、空間の分配の計算上、アイテムの寸法を `0` としています。すべての空間が確保され、すべてのアイテムが同じ `flex-grow` 係数を持っているので、それぞれに同じ量の空間が分配されることになります。最終的には、3 つの同じ幅の伸縮可能ななアイテムができあがります。 -<p>Try changing the <code>flex-grow</code> factor from 1 to 0 in this live example to see the different behavior:</p> +このライブ例で、`flex-grow` 係数を 1 から 0 に変更して、動作の違いを確認してみてください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}} -<h3 id="Giving_items_different_flex-grow_factors" name="Giving_items_different_flex-grow_factors">アイテムに別の flex-grow 要素を与える</h3> +### アイテムに個別の flex-grow 要素を与える -<p>Our understanding of how <code>flex-grow</code> works with <code>flex-basis</code> allows us to have further control over our individual item sizes by assigning items different <code>flex-grow</code> factors. If we keep our <code>flex-basis</code> at <code>0</code> so all of the space can be distributed, we could assign each of the three flex items a different <code>flex-grow</code> factor. In the example below I am using the following values:</p> +`flex-grow` と `flex-basis` の関係を理解すると、アイテムに様々な `flex-grow` 係数を割り当てることで、個々のアイテムの大きさをさらに制御することができるようになります。`flex-basis` を `0` にして、すべての空間を分配できるようにした場合、3 つのフレックスアイテムにそれぞれ異なる `flex-grow` ファクターを割り当てることができます。以下の例では、次のような値を使用しています。 -<ul> - <li><code>1</code> for the first item.</li> - <li><code>1</code> for the second item.</li> - <li><code>2</code> for the third item.</li> -</ul> +- 1 番目のアイテムには `1` +- 2 番目のアイテムには `1` +- 3 番目のアイテムには `2` -<p>Working from a <code>flex-basis</code> of <code>0</code> this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.</p> +`flex-basis` を `0` とすると、利用可能な空間は次のように分配されます。まずフレックス伸長係数を合計し、フレックスコンテナー内の正の自由空間の合計をその数値、この場合は 4 で割ります。それからそれぞれの値に応じて空間を分配します。 — 1 番目のアイテムは 1 つ分、2 番目は 1 つ分、3 番目は 2 つ分になります。つまり、3 番目のアイテムは、1 番目と 2 番目のアイテムの 2 倍の大きさになります。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}} -<p>Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to <code>.25</code>, <code>.25</code>, and <code>.50</code> — you should see the same result.</p> +ここでは、どんな正の値も使用できることを覚えておいてください。重要なのは、ある項目と他の項目との比率です。大きな数字を使っても、小数を使っても構いません。 — あなた次第です。試しに、上の例で割り当てられた値を `.25`, `.25`, `.50` に変更してみてください。 — 同じ結果が得られるはずです。 -<h2 id="The_flex-shrink_property" name="The_flex-shrink_property"><code>flex-shrink</code> プロパティ</h2> +## `flex-shrink` プロパティ -<p>The {{CSSxRef("flex-shrink")}} property specifies the <strong>flex shrink factor</strong>, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.</p> +{{CSSxRef("flex-shrink")}}プロパティでは、**フレックス縮小係数**を指定します。これは、負の自由空間が分配されたときに、フレックスコンテナー内の他のフレックスアイテムに対して、フレックスアイテムがどれだけ縮小するかを決定します。 -<p>This property deals with situations where the browser calculates the <code>flex-basis</code> values of the flex items, and finds that they are too large to fit into the flex container. As long as <code>flex-shrink</code> has a positive value the items will shrink in order that they do not overflow the container.</p> +このプロパティは、ブラウザーがフレックスアイテムの `flex-basis` 値を計算して、フレックスコンテナーに収まらない大きさだと判断した場合に対処します。`flex-shrink` に正の値があれば、コンテナーからはみ出さないようにアイテムが縮小されます。 -<p>So where <code>flex-grow</code> deals with adding available space, <code>flex-shrink</code> manages taking away space to make boxes fit into their container without overflowing.</p> +つまり、`flex-grow` が利用可能な空間を追加する扱いをするのに対し、`flex-shrink` はボックスがはみ出さずにコンテナーに収まるように空間を縮小する扱いをします。 -<p>In the next live example I have three items in a flex container; I’ve given each a width of 200 pixels, and the container is 500 pixels wide. With <code>flex-shrink</code> set to <code>0</code> the items are not allowed to shrink and so they overflow the box.</p> +次のライブ例では、3 つのアイテムをフレックスコンテナーに入れています。それぞれに 200 ピクセルの幅を与え、コンテナーの幅は 500 ピクセルにしています。`flex-shrink` を `0` に設定すると、アイテムは縮小できないので、ボックスからはみ出してしまいます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}} -<p>Change the <code>flex-shrink</code> value to <code>1</code> and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.</p> +`flex-shrink` の値を `1` に変更すると、すべてのアイテムがボックスに収まるように、各アイテムが同じ量だけ縮小されるのがわかります。これは、すべてのアイテムがボックスに収まるようにするために、最初の幅よりも小さくしたものです。 -<h3 id="Combining_flex-shrink_and_flex-basis" name="Combining_flex-shrink_and_flex-basis"><code>flex-shrink</code> と <code>flex-basis</code> を組み合わせる</h3> +### `flex-shrink` と `flex-basis` の組み合わせ -<p>You could say that <code>flex-shrink</code> works in pretty much the same way as <code>flex-grow</code>. However there are two reasons why it isn’t <em>quite</em> the same.</p> +`flex-shrink` は、`flex-grow` とほとんど同じように動作すると言えるでしょう。しかし、*完全に*同じではない理由が 2 つあります。 -<p>While it is usually subtle, defined in the specification is one reason why <code>flex-shrink</code> isn’t quite the same for negative space as <code>flex-grow</code> is for positive space:</p> +通常は些細な違いですが、仕様に定義されていることは、負の空間に対して `flex-shrink` が行うことが、正の空間に対して `flex-grow` が行うこととまったく同じではない理由の一つです。 -<blockquote> -<p>“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”</p> -</blockquote> +> 「注：負の空間を分配する際には、フレックス縮小係数にフレックスベースの大きさが乗じられます。これは、アイテムが縮小できる量に比例して負の空間を分配するもので、例えば、大きなアイテムが目に見えて縮小する小さなアイテムが、大きなアイテムが目立って縮小する前にゼロまで縮小してしまうことはありません。」 -<p>The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their <code>min-content</code> size — the size that they become if they take advantage of any soft wrapping opportunities available to them.</p> +2 つ目の理由は、フレックスボックスは、負の自由空間を除去する際に小さなアイテムがゼロの大きさにまで縮小することを防ぐためです。アイテムは `min-content` の寸法が下限になります。 — 可能な限りすべてのソフト折り返しの機会を利用した後の寸法です。 -<p>You can see this <code>min-content</code> flooring happen in the below example, where the <code>flex-basis</code> is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that <code>min-content</code> size. As the box gets smaller space is then just removed from the third item.</p> +以下の例では、`min-content` の下限になり、`flex-basis` が内容物の大きさに解決されていることがわかります。フレックスコンテナーの幅を 700px などに変更してからフレックスアイテムの幅を小さくすると、最初の 2 つのアイテムは折り返されますが、`min-content` の寸法より小さくなることはありません。ボックスが小さくなると、3 つ目のアイテムが縮小します。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}} -<p>In practice the shrinking behaviour does tend to give you reasonable results. You don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.</p> +実際には、縮小の動作は妥当な結果をもたらす傾向があります。通常、内容物が完全に消えてしまったり、ボックスが最小の内容物よりも小さくなってしまったりすることはありません。そのため、上記のルールは、コンテナーに収まるように内容物を縮小する必要がある場合の適切な動作という点で、理にかなっています。 -<h3 id="Giving_items_different_flex-shrink_factors" name="Giving_items_different_flex-shrink_factors">アイテムに別の <code>flex-shrink</code> 要素を与える</h3> +### アイテムに別の `flex-shrink` 要素を与える -<p>In the same way as <code>flex-grow</code>, you can give flex-items different <code>flex-shrink</code> factors. This can help change the default behaviour if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.</p> +`flex-grow` と同様に、それぞれのフレックスアイテムにに異なる `flex-shrink` 係数を与えることができます。これにより、たとえば、あるアイテムを兄弟アイテムよりも急速に縮小させたり、まったく縮小させないようにしたい場合に、既定の動作を変更することができます。 -<p>In the following live example the first item has a <code>flex-shrink</code> factor of 1, the second <code>0</code> (so it won’t shrink at all), and the third <code>4</code>. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for <code>flex-grow</code> you can use decimals or larger numbers here. Choose whatever makes most sense to you.</p> +次のライブ例では、1 番目のアイテムの `flex-shrink` 係数は 1、2 番目のアイテムは `0` (つまり、まったく縮まない)、3 番目のアイテムは `4` です。したがって、3 番目のアイテムは、1 番目のアイテムよりも急速に縮小します。`flex-grow` と同様に、ここでも小数や大きな数字を使うことができます。最も分かりやすいものを選んでください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}} -<h2 id="Mastering_sizing_of_flex_items" name="Mastering_sizing_of_flex_items">flex アイテムのサイズ設定をマスターする</h2> +## フレックスアイテムの寸法の設定をマスターする -<p>The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:</p> +フレックスアイテムの寸法の調整の仕組みを理解するには、いくつかの要素を理解する必要があります。このガイドでは、以下の点について説明してきました。 -<h3 id="What_sets_the_base_size_of_the_item" name="What_sets_the_base_size_of_the_item">アイテムの基本サイズを何がセットするか？</h3> +## アイテムの基本的な寸法に何が設定されているか -<ol> - <li>Is <code>flex-basis</code> set to <code>auto</code>, and does the item have a width set? If so, the size will be based on that width.</li> - <li>Is <code>flex-basis</code> set to <code>auto</code> or <code>content</code> (in a supporting browser)? If so, the size is based on the item size.</li> - <li>Is <code>flex-basis</code> a length unit, but not zero? If so this is the size of the item.</li> - <li>Is <code>flex-basis</code> set to <code>0</code>? if so then the item size is not taken into consideration for the space-sharing calculation.</li> -</ol> +1. `flex-basis` が `auto` に設定されていて、アイテムに幅が設定されている場合は、その幅に応じた寸法になります。 +2. `flex-basis` が `auto` または `content` (対応しているブラウザーの場合) に設定されている場合は、寸法はアイテムの寸法に基づいて決定されます。 +3. `flex-basis` が長さの単位で、0 ではない場合は、これがアイテムの寸法になります。 +4. `flex-basis` が `0` に設定されている場合は、アイテムの寸法は空間共有の計算には考慮されません。 -<h3 id="Do_we_have_available_space" name="Do_we_have_available_space">利用できるスペースが残っているか？</h3> +### 利用できる余白が残っているか -<p>Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.</p> +正の自由空間がないとアイテムは伸長しませんし、負の自由空間がないとアイテムは縮小しません。 -<ol> - <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>less</strong> than the total width (or height) of the container? If so, then you have positive free space and <code>flex-grow</code> comes into play.</li> - <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>more</strong> than the total width (or height) of the container? If so, you have negative free space and <code>flex-shrink</code> comes into play.</li> -</ol> +1. すべてのアイテムの幅 (列の場合は高さ) を合計したとき、その合計がコンテナーの幅 (または高さ) の合計よりも**小さい**場合は、正の自由空間があり、`flex-grow` の出番となります。 +2. すべてのアイテムの幅 (列の場合は高さ) を合計した場合、その合計がコンテナーの幅 (または高さ) の合計より**大きい**場合は、負の自由空間があり、`flex-shrink` が効いてきます。 -<h3 id="Other_ways_to_distribute_space" name="Other_ways_to_distribute_space">スペースを配分する別の方法</h3> +### 空間を分配する別の方法 -<p>If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.</p> +アイテムに空間を追加したくない場合は、「フレックスコンテナー内のアイテムの配置」で説明している配置プロパティを使って、アイテム間やアイテム周辺の自由空間を処理できることを覚えておいてください。{{CSSxRef("justify-content")}} プロパティを使用すると、アイテム間やアイテム周辺の自由空間の分配が可能になります。また、フレックスアイテムに auto のマージンを使用すると、スペースを吸収してアイテム間に隙間を作ることができます。 -<p>With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.</p> +自由に使えるフレックスツールがあれば、最初は少し試行錯誤するかもしれませんが、ほとんどの作業が可能であることがわかります。 diff --git a/files/ja/web/css/css_flexible_box_layout/index.md b/files/ja/web/css/css_flexible_box_layout/index.md index efe2e9fa39..752d709abb 100644 --- a/files/ja/web/css/css_flexible_box_layout/index.md +++ b/files/ja/web/css/css_flexible_box_layout/index.md @@ -3,116 +3,85 @@ title: CSS フレックスボックスレイアウト slug: Web/CSS/CSS_Flexible_Box_Layout tags: - CSS - - CSS Flexible Boxes - - Guide - - Overview - - Reference - - flexbox + - CSS フレックスボックス + - ガイド + - 概要 + - リファレンス + - フレックスボックス translation_of: Web/CSS/CSS_Flexible_Box_Layout --- -<div>{{CSSRef}}</div> - -<p class="summary"><ruby><strong>CSS フレックスボックスレイアウト</strong><rp> (</rp><rt>CSS Flexible Box Layout</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS">CSS</a> のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。</p> - -<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2> - -<p>以下の例では、コンテナーに <code>display: flex</code> に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 <code>justify-content</code> の値は、主軸上に均等に配置するため、 <code>space-between</code> に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 <code>align-items</code> の既定値は <code>stretch</code> なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3> - -<div class="index"> -<ul> - <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("order")}}</li> -</ul> -</div> - -<h3 id="Alignment_Properties" name="Alignment_Properties">配置プロパティ</h3> - -<p><code>align-content</code>, <code>align-self</code>, <code>align-items</code>, <code>justify-content</code> の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。</p> - -<div class="index"> -<ul> - <li>{{cssxref("justify-content")}}</li> - <li>{{cssxref("align-content")}}</li> - <li>{{cssxref("align-items")}}</li> - <li>{{cssxref("align-self")}}</li> - <li>{{cssxref("place-content")}}</li> - <li>{{cssxref("place-items")}}</li> - <li>{{cssxref("row-gap")}}</li> - <li>{{cssxref("column-gap")}}</li> - <li>{{cssxref("gap")}}</li> -</ul> -</div> - -<h3 id="Glossary_entries" name="Glossary_entries">用語集の項目</h3> - -<div class="index"> -<ul> - <li>{{Glossary("Flexbox", "フレックスボックス", 1)}}</li> - <li>{{Glossary("Flex Container", "フレックスコンテナー", 1)}}</li> - <li>{{Glossary("Flex Item", "フレックスアイテム", 1)}}</li> - <li>{{Glossary("Main Axis", "主軸", 1)}}</li> - <li>{{Glossary("Cross Axis", "交差軸", 1)}}</li> - <li>{{Glossary("Flex", "フレックス", 1)}}</li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></dt> - <dd>フレックスボックスの機能の概要</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法の関係</a></dt> - <dd>フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナーにおけるアイテムの配置</a></dt> - <dd>ボックス配置プロパティがどのようにフレックスボックスに働くか</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの順序</a></dt> - <dd>アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の操作</a></dt> - <dd>flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></dt> - <dd>複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">典型的なフレックスボックスの用途</a></dt> - <dd>典型的なフレックスボックスの用途の一般的なデザインパターン。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></dt> - <dd>フレックスボックスのブラウザーの互換性状況、相互運用性の問題、古いブラウザーと古い仕様書のバージョンの対応</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Flexbox') }}</td> - <td>{{ Spec2('CSS3 Flexbox') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<dl> - <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> - <dd>コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">ブラウザーに依存しないフレックスボックスのミックスイン</a></dt> - <dd>この記事では、最近のフレックスボックス構文に対応していない古いブラウザーでも動作するような、ブラウザーに依存しないフレックスボックスの操作を作りたい人のために、ミックスインの一式を提供します。</dd> -</dl> +{{CSSRef}} + +**CSS フレックスボックスレイアウト** (CSS Flexible Box Layout) は [CSS](/ja/docs/Web/CSS) のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。 + +## 基本的な例 + +以下の例では、コンテナーに `display: flex` に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 `justify-content` の値は、主軸上に均等に配置するため、 `space-between` に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 `align-items` の既定値は `stretch` なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。 + +{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 600)}} + +## リファレンス + +## CSS プロパティ + +- {{cssxref("flex")}} +- {{cssxref("flex-basis")}} +- {{cssxref("flex-direction")}} +- {{cssxref("flex-flow")}} +- {{cssxref("flex-grow")}} +- {{cssxref("flex-shrink")}} +- {{cssxref("flex-wrap")}} +- {{cssxref("order")}} + +### 配置プロパティ + +`align-content`, `align-self`, `align-items`, `justify-content` の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置 (Box Alignment) の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。 + +- {{cssxref("justify-content")}} +- {{cssxref("align-content")}} +- {{cssxref("align-items")}} +- {{cssxref("align-self")}} +- {{cssxref("place-content")}} +- {{cssxref("place-items")}} +- {{cssxref("row-gap")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} + +### 用語集の項目 + +- {{Glossary("Flexbox", "フレックスボックス", 1)}} +- {{Glossary("Flex Container", "フレックスコンテナー", 1)}} +- {{Glossary("Flex Item", "フレックスアイテム", 1)}} +- {{Glossary("Main Axis", "主軸", 1)}} +- {{Glossary("Cross Axis", "交差軸", 1)}} +- {{Glossary("Flex", "フレックス", 1)}} + +## ガイド + +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) + - : フレックスボックスの機能の概要 +- [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods) + - : フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか +- [フレックスコンテナーにおけるアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) + - : ボックス配置プロパティがどのようにフレックスボックスに働くか +- [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items) + - : アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。 +- [主軸に沿ったフレックスアイテムの比率の操作](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax) + - : flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。 +- [フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items) + - : 複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。 +- [典型的なフレックスボックスの用途](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox) + - : 典型的なフレックスボックスの用途の一般的なデザインパターン。 +- [フレックスボックスの後方互換性](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) + - : フレックスボックスのブラウザーの互換性状況、相互運用性の問題、古いブラウザーと古い仕様書のバージョンの対応 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------ | --------------------------- | -------- | +| {{ SpecName('CSS3 Flexbox') }} | {{ Spec2('CSS3 Flexbox') }} | 初回定義 | + +## 関連情報 + +- [Flexbugs](https://github.com/philipwalton/flexbugs) + - : コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧 diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 6841280981..058f1c8f68 100644 --- a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -1,92 +1,96 @@ --- title: フレックスアイテムの折り返しのマスター slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +tags: + - CSS + - Flex + - ガイド + - collapsed items + - フレックスボックス + - grid + - 折り返し translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items --- -<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p> +{{CSSRef}} -<h2 id="Making_things_wrap" name="Making_things_wrap">折り返しを行う</h2> +フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が `row` の場合は新しい行を、 `flex-direction` が `column` の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)が必要になるかを説明します。 -<p>The initial value of the {{cssxref("flex-wrap")}} property is <code>nowrap</code>. This means that if you have a set of flex items that are too wide for their container, they will overflow it. If you want to cause them to wrap once they become too wide you must add the <code>flex-wrap</code> property with a value of <code>wrap</code>, or use the shorthand {{cssxref("flex-flow")}} with values of <code>row wrap</code> or <code>column wrap</code>.</p> +## 折り返しを行う -<p>Items will then wrap in the container. In the next example I have ten items all with a <code>flex-basis</code> of <code>160px</code> and the ability to grow and shrink. Once the first row gets to a point where there is not enough space to place another 160 pixel item, a new flex line is created for the items and so on until all of the items are placed. As the items can grow, they will expand larger than 160 px in order to fill each row completely. If there is only one item on the final line it will stretch to fill the entire line.</p> +{{cssxref("flex-wrap")}} プロパティの初期値は `nowrap` です。つまり、コンテナーに対して幅が広すぎるフレックスアイテムのセットがあると、コンテナーからはみ出してしまいます。幅が広くなりすぎたら折り返すようにしたい場合は、`flex-wrap` プロパティを追加して `wrap` の値を設定するか、一括指定の {{cssxref("flex-flow")}} を使用して `row wrap` または `column wrap` の値を設定する必要があります。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p> +アイテムはコンテナーの中に収まります。次の例では、10 個のアイテムを配置しています。すべてのアイテムの `flex-basis` は 160px で、伸長と縮小が可能です。最初の列で 160 ピクセルのアイテムを配置する空間がなくなると、新しいフレックス行が作成され、すべてのアイテムが配置されるまで繰り返されます。アイテムが成長すると、各列を完全に埋めるために、160 ピクセルよりも大きく拡張されます。最終行にアイテムが 1 つしかない場合は、行全体を埋めるように伸縮します。 -<p>We can see the same thing happening with columns. The container will need to have a height in order that the items will start wrapping and creating new columns, and items will stretch taller to fill each column completely.</p> +{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}} -<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p> +これと同じことが列でも起こります。アイテムが折り返して新しい列を作り始め、それぞれの列を完全に埋めるためにアイテムを伸長するようにするためには、コンテナーに高さを設定する必要があります。 -<h2 id="Wrapping_and_flex-direction" name="Wrapping_and_flex-direction">折り返しと flex-direction</h2> +{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}} -<p>Wrapping works as you might expect when combined with <code>flex-direction</code>. If <code>flex-direction</code> is set to <code>row-reverse</code> then the items will start from the end edge of the container and lay themselves out in reverse ordered lines.</p> +## 折り返しと flex-direction -<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p> +折り返しは、`flex-direction` と組み合わせることで、期待通りの効果を発揮します。`flex-direction` が `row-reverse` に設定されている場合、アイテムはコンテナーの端から始まり、逆順に並んでいきます。 -<p>Note that the reversing is only happening in the inline, row direction. We start on the right then go onto the second line and again start from the right. We aren’t reversing in both directions, starting from the bottom coming up the container!</p> +{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}} -<h2 id="Single-dimensional_layout_explained" name="Single-dimensional_layout_explained">一次元のレイアウトの説明</h2> +なお、反転は行内方向にのみ行われます。右から開始して 2 行目に進み、再び右から開始します。下から開始してコンテナーを上がっていくという、両方の方向で反転しているわけではありません。 -<p>As we have seen from the above examples if our items are allowed to grow and shrink, when there are fewer items in the last row or column then those items grow to fill the available space.</p> +## 一次元レイアウトの説明 -<p>There is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container. It deals with space distribution across the main axis. If there is only one item, and that item is allowed to grow, it will fill the axis just as if you had a single item flex container.</p> +上の例で見たように、アイテムが伸縮することが許されていれば、最後の行や列のアイテムが少なくなると、それらのアイテムは空いた空間を埋めるように伸びていきます。 -<p>If you want layout in two dimensions then you probably want Grid Layout. We can compare our wrapped row example above with the CSS Grid version of that layout to see the difference. The following live sample uses CSS Grid Layout to create a layout that has as many columns of at least 160 pixels as will fit, distributing the extra space between all columns. However, in this case the items stay in their grid and don’t stretch out when there are fewer of them on the final row.</p> +フレックスボックスには、ある行のアイテムとその上の行のアイテムの位置を揃える方法はありません。各フレックス行は新しいフレックスコンテナーのように機能します。これが主軸の空間分配を行います。アイテムが 1 つだけで、そのアイテムが成長することが許可されている場合、1 つのアイテムのフレックスコンテナーがある場合と同様に、その軸いっぱいに表示されます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p> +2 次元でのレイアウトが必要な場合は、おそらくグリッドレイアウトを使用します。上記の折り返し行の例を CSS グリッド版のレイアウトと比較すると、違いが分かります。次のライブサンプルでは、CSS グリッドレイアウトを使用して、160 ピクセル以上の列が収まるだけのレイアウトを作成し、余分な空間をすべての列に分配しています。ただし、この場合、アイテムはグリッド内に留まり、最終行のアイテム数が少なくなっても伸びることはありません。 -<p>This is the difference between one and two-dimensional layout. In a one dimensional method like flexbox, we only control the row or column. In two dimensional layout like grid we control both at the same time. If you want the space distribution row by row, use flexbox. If you don’t, use Grid.</p> +{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}} -<h2 id="How_do_flexbox-based_grid_systems_work" name="How_do_flexbox-based_grid_systems_work">フレックスボックスベースのグリッドシステムはどのように動作するか</h2> +これが一次元と二次元のレイアウトの違いです。フレックスボックスのような一次元方式では、行または列のみを制御します。グリッドのような二次元のレイアウトでは、両方を同時に制御します。行ごとに空間を分配したい場合は、フレックスボックスを使用してください。そうでない場合は、グリッドを使用してください。 -<p>Typically flexbox-based grid systems work by taking flexbox back to the familiar world of float-based layouts. If you assign percentage widths to flex items — either as <code>flex-basis</code> or by adding a width to the item itself leaving the value of <code>flex-basis</code> as <code>auto</code> — you can get the impression of a two dimensional layout. You can see this working in the example below.</p> +## フレックスボックスベースのグリッドシステムはどのように機能するか -<p>Here I have set <code>flex-grow</code> and <code>flex-shrink</code> to <code>0</code> to make inflexible flex items and am then controlling flexibility using percentages, just like we used to do in float layouts.</p> +通常、フレックスボックスベースのグリッドシステムは、フレックスボックスを馴染みのある float ベースのレイアウトの世界に戻すことで機能します。フレックスアイテムにパーセント値の幅を割り当てると、`flex-basis` として、または `flex-basis` の値を `auto` のままにしてアイテム自体に幅を追加することで、2 次元のレイアウトのような印象を与えることができます。以下の例では、この機能を確認できます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p> +ここでは、`flex-grow` と `flex-shrink` を `0` に設定して、柔軟性のないフレックスアイテムを作り、フロートレイアウトで行っていたように、パーセント値を使って柔軟性をコントロールしています。 -<p>If you need flex items to line up in the cross axis, controlling the width in this way will achieve that. In most cases however, adding widths to flex items in this way demonstrates that you would probably be better served by switching to grid layout for that component.</p> +{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}} -<h2 id="Creating_gutters_between_items" name="Creating_gutters_between_items">アイテム間の溝の作成</h2> +フレックスアイテムを横軸に並べる必要がある場合は、この方法で幅を制御することで実現できます。しかし、ほとんどの場合、この方法でフレックスアイテムに幅を追加する場合は、その部分をグリッドレイアウトに変更した方がよいことがわかります。 -<p>When wrapping flex items, the need to space them out is likely to arise. At the current time we do not have any implementations of the gap properties from the <a href="https://www.w3.org/TR/css-align-3/">Box Alignment module</a> for Flexbox. In the future we will be able to simply use <code>row-gap</code> and <code>column-gap</code> for flexbox as we do for CSS Grid. At the current time you will need to use margins to achieve this.</p> +## アイテム間の間隔の生成 -<p>You can see from the live example below that in order to create gaps that do not also create a gap at the edges of the container, we need to use negative margins on the flex container itself. Any border on the flex container is then moved to a second wrapper in order that the negative margin can pull the items up to that wrapper element.</p> +フレックスアイテムを折り返すする際に、余白を空ける必要がある場合があります。現時点では、[Box Alignment モジュール](https://www.w3.org/TR/css-align-3/) の gap プロパティをフレックスボックス用に実装したものはありません。将来的には、CSS グリッドと同様に、フレックスボックスでも `row-gap` と `column-gap` を使用できるようになる予定です。現時点では、これを実現するためには、margin を使用する必要があります。 -<p>It is this requirement that the gap properties, once implemented, will solve for us. Proper gaps only happen on the inside edges of items.</p> +下の実例を見ると、コンテナーの端に隙間ができないように隙間を作るためには、フレックスコンテナー自体に負のマージンを使用する必要があることがわかります。フレックスコンテナーの境界は 2 番目のラッパーに移動し、負のマージンによってアイテムをラッパー要素に引き上げることができます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p> +これが gap プロパティが必要な理由で、実装されれば問題の解決になります。gap は適切にアイテムの内側の辺にのみ置かれます。 -<h2 id="Collapsed_items" name="Collapsed_items">アイテムの折りたたみ</h2> +{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}} -<p>The flexbox specification details what should happen if a flex item is collapsed by setting <code>visibility: collapse</code> on an item. See the MDN documentation for the {{cssxref("visibility")}} property. The specification describes the behaviour as follows:</p> +## アイテムの折り畳み -<blockquote> -<p>“Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Collapsed items</a></p> -</blockquote> +フレックスボックスの仕様では、アイテムに `visibility: collapse` を設定することで、フレックスアイテムが折り畳まれた場合の動作が詳細に規定されています。{{cssxref("visibility")}} プロパティの MDN ドキュメントを参照してください。仕様では、以下のように動作を説明しています。 -<p>This behaviour is useful if you want to target flex items using JavaScript to show and hide content for example. The example in the specification demonstrates one such pattern.</p> +> 「フレックスアイテムに visibility:collapse を指定すると、折り畳まれたフレックスアイテムになり、table-row や table-column の visibility:collapse と同様の効果が得られます。折り畳まれたフレックス アイテムはレンダリングから完全に削除されますが、フレックス行の交差軸の寸法を安定させる「支柱」が残ります。したがって、フレックスコンテナーにフレックス行が 1 つしかない場合、アイテムの折り畳み状態を動的に変化させると、フレックスコンテナーの主軸の寸法が変更されることがありますが、交差軸の寸法には影響しないことが保証されているため、ページの残りのレイアウトが「ぐらつく」ことはありません。ただし、フレックスの行の折り返しは折り畳み後に再実行されるため、複数の行を持つフレックスコンテナーの交差軸の寸法は変更される場合もあれば、変更されない場合もあります。" - [Collapsed items](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse) -<p>In the following live example I have a non-wrapped flex container. The third item has more content than the others yet is set to <code>visibility: collapse</code> and therefore the flex container is retaining a <em>strut</em> of the height required to display this item. If you remove <code>visibility: collapse</code> from the CSS or change the value to <code>visible</code>, you will see the item disappear and the space redistribute between non-collapsed items; the height of the flex container should not change.</p> +この動作は、JavaScript を使用してフレックスアイテムを対象にし、コンテンツの表示・非表示を行う場合などに便利です。仕様書の例では、そのようなパターンの一つを示しています。 -<div class="note"> -<p><strong>Note</strong>: Use Firefox for the below two examples as Chrome and Safari treat collapse as hidden.</p> -</div> +次のライブ例では、折り返されていないフレックスコンテナーを使用しています。3 番目のアイテムは他のアイテムよりもコンテンツが多いのですが、`visibility: collapse` に設定されているため、フレックスコンテナーはこのアイテムを表示するために必要な高さの*支柱*を保持しています。CSS から `visibility: collapse` を削除するか、値を `visible` に変更すると、アイテムが消えて、折り畳まれていないアイテムの間にスペースが再分配されますが、フレックスコンテナの高さは変わりません。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p> +> **Note:** Chrome や Safari では折りたたまれている部分は非表示として扱われるため、以下の 2 つの例は Firefox を使用してください。 -<p>When dealing with multiple-line flex containers however you need to understand that the wrapping is re-done <em>after</em> collapsing. So the browser needs to re-do the wrapping behaviour to account for the new space that the collapsed item has left in the inline direction.</p> +{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}} -<p>This means that items might end up on a different line to the one they started on. In the case of an item being shown and hidden it could well cause the items to end up in a different row.</p> +しかし、複数行のフレックスコンテナーを扱う場合は、折り返しが折り返しの後に再実行されることを理解する必要があります。つまり、ブラウザーは折り畳まれたアイテムがインライン方向に残した新しい空間を考慮して、折り返しの動作を再実行する必要があります。 -<p>I have created this behaviour in the next live example. You can see how the stretching changes row based on the location of the collapsed item. If you add more content to the second item, it changes row once it gets long enough. That top row then only becomes as tall as a single line of text.</p> +つまり、アイテムが最初の行とは別の行になってしまう可能性があるのです。アイテムを表示したり隠したりすると、アイテムが別の行になってしまうこともあります。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p> +次のライブ例では、この動作を作成しました。折り畳まれたアイテムの位置に基づいて、引き伸ばされている行が変化している様子がわかります。2 番目のアイテムにさらにコンテンツを追加すると、十分な長さになった時点で行が変更されます。その結果、一番上の行は、テキストの 1 行分の高さにしかなりません。 -<p>If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can’t shift rows.</p> +{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}} -<h3 id="The_difference_between_visibility_hidden_and_display_none" name="The_difference_between_visibility_hidden_and_display_none"><code>visibility: hidden</code> と <code>display: none</code> の違い</h3> +これによりレイアウトに問題が生じる場合は、構造を見直す必要があるかもしれません。たとえば、各行を別々のフレックスコンテナーに入れて、行がずれないようにするなどです。 -<p>When you set an item to <code>display: none</code> in order to hide it, the item is removed from the formatting structure of the page. What this means in practice is that counters ignore it, and things like transitions do not run. Using <code>visibility: hidden</code> keeps the box in the formatting structure which is useful in that it still behaves as if it were part of the layout even though the user can’t see it.</p> +### `visibility: hidden` と `display: none` の違い -<p>{{CSSRef}}</p> +アイテムを `display: none` に設定して非表示にすると、そのアイテムはページの整形構造から削除されます。すなわち、カウンターはそれを無視し、トランジションも実行されません。`visibility: hidden` を使用すると、ボックスは整形構造の中に維持され、ユーザーには見えなくても、レイアウトの一部であるかのように動作することができるので便利です。 diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align10.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align10.png Binary files differnew file mode 100644 index 0000000000..649a93b863 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align10.png diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align11.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align11.png Binary files differnew file mode 100644 index 0000000000..82698ad482 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align11.png diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align9.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align9.png Binary files differnew file mode 100644 index 0000000000..a9ef5380b9 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align9.png diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/basics1.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/basics1.png Binary files differnew file mode 100644 index 0000000000..d5a5f920a4 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/basics1.png diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md index 8a2a488baa..d4f8897e9d 100644 --- a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md @@ -2,143 +2,125 @@ title: フレックスアイテムの並べ替え slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items tags: - - Accessibility + - アクセシビリティ - CSS - Flex - - Guide - - direction - - flexbox + - ガイド + - 方向 + - フレックスボックス - order - reverse translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p>フレックスボックスやグリッドといった新しいレイアウト方法には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法についてみていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。</p> +フレックスボックスやグリッドといった新しいレイアウト方式には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法について見ていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。 -<h2 id="Reverse_the_display_of_the_items" name="Reverse_the_display_of_the_items">アイテムを逆順に表示する</h2> +## アイテムを逆順に表示する -<p>{{cssxref("flex-direction")}} プロパティは以下の４つの値から一つを設定できます。</p> +{{cssxref("flex-direction")}} プロパティは以下の 4 つの値のうち一つを取ることができます。 -<ul> - <li><code>row</code></li> - <li><code>column</code></li> - <li><code>row-reverse</code></li> - <li><code>column-reverse</code></li> -</ul> +- `row` +- `column` +- `row-reverse` +- `column-reverse` -<p>上２つの値は、アイテムの順序を文書のソースに現れる順と同じ順序で、始点から連続して表示します。</p> +最初の 2 つの値は、文書のソースの順番と同じ順番で項目を保持し、先頭行から順に表示します。 -<p><img alt="左から始まり一行に表示されるアイテム" src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p> + -<p><img alt="上から始まり一列に表示されるアイテム" src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> + -<p>下２つの値は始点と終点を入れ替えて、アイテムを逆順に表示します。</p> +下 2 つの値は先頭と末尾を入れ替えて、アイテムを逆順に表示します。 -<p><img alt="右側から逆順に表示されるアイテム" src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p> + -<p><img alt="下側から逆順に一列に表示されるアイテム" src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> + -<p>始点は書字方向に応じて変わるということを思い出してください。先ほどの例のうち行についてのものは、<code>row</code> と <code>row-reverse</code> が英語のような左から右の言語においてどのように作用するかを示しています。アラビア語のような右から左の言語を使用している場合には、<code>row</code> では右から始まり <code>row-reverse</code> では左から始まります。</p> +先頭は書字方向に応じて変わるということを思い出してください。先ほどの例のうち行についてのものは、`row` と `row-reverse` が英語のような左書きの言語においてどのように作用するかを示しています。アラビア語のような右書きの言語を使用している場合には、`row` では右から始まり `row-reverse` では左から始まります。 -<p><img alt="アラビア文字の場合に row が右から始まり、 row-reverse では左から始まることを示すフレックスコンテナー" src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p> + -<p>これは、アイテムが<em>表示上</em>でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。</p> +これは、アイテムが*表示上*でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。 -<blockquote> -<p>“Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a></p> +> 「注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。」 - [Ordering and Orientation](https://www.w3.org/TR/css-flexbox-1/#flow-order) -<p>(注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。 <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a> より引用)</p> -</blockquote> +仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。 -<p>仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。</p> +逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。 -<p>逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。</p> +> 「文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の \*-reverse 値をソース順序の修正の代用として利用してはいけません。」 -<blockquote> -<p>“Authors <em>must not</em> use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.”</p> +> **Note:** 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。 -<p>(文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の <em>-reverse</em> 値をソース順序の修正の代用として利用してはいけません。)</p> -</blockquote> +以下の例ではリンクからリンクにタブ移動した際に、どれが強調されているかわかりやすいように focus スタイルを加えています。`flex-direction` を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。 -<div class="note"> -<p><strong>注</strong>: 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。</p> -</div> +{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}} -<p>以下の例ではリンクからリンクにタブ移動した際に、どれがハイライトされているかわかりやすいように focus スタイルを加えています。<code>flex-direction</code> を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。</p> +`flex-direction` の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p> +## order プロパティ -<p><code>flex-direction</code> の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。</p> +フレックスアイテムが表示される順序を逆転することができましたが、それに加えて {{cssxref("order")}} プロパティを使用することでアイテム個別に表示される順序を変更することができます。 -<h2 id="The_order_property" name="The_order_property">order プロパティ</h2> +`order` プロパティは、アイテムを*数字で順序づけたグループ*でレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。 -<p>フレックスアイテムが表示される順序を逆転することができましたが、それに加えて {{cssxref("order")}} プロパティを使用することでアイテム個別に表示される順序を変更することができます。</p> +例として、5 つのアイテムに対して以下のように `order` を割り当てます。 -<p><code>order</code> プロパティはアイテムのレイアウトを<em>数字で順序づけたグループ</em>にレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。</p> +- ソース上で 1 番目のアイテム: `order: 2` +- ソース上で 2 番目のアイテム: `order: 3` +- ソース上で 3 番目のアイテム: `order: 1` +- ソース上で 4 番目のアイテム: `order: 3` +- ソース上で 5 番目のアイテム: `order: 1` -<p>例として、５つのアイテムに対して以下のように <code>order</code> を割り当てます。</p> +このときアイテムは以下の順序でページ上に表示されます。 -<ul> - <li>ソース上で１番目のアイテム: <code>order: 2</code></li> - <li>ソース上で２番目のアイテム: <code>order: 3</code></li> - <li>ソース上で３番目のアイテム: <code>order: 1</code></li> - <li>ソース上で４番目のアイテム: <code>order: 3</code></li> - <li>ソース上で５番目のアイテム: <code>order: 1</code></li> -</ul> +- ソース上で 3 番目のアイテム: `order: 1` +- ソース上で 5 番目のアイテム: `order: 1` +- ソース上で 1 番目のアイテム: `order: 2` +- ソース上で 2 番目のアイテム: `order: 3` +- ソース上で 4 番目のアイテム: `order: 3` -<p>このときアイテムは以下の順序でページ上に表示されます。</p> + -<ul> - <li>ソース上で３番目のアイテム: <code>order: 1</code></li> - <li>ソース上で５番目のアイテム: <code>order: 1</code></li> - <li>ソース上で１番目のアイテム: <code>order: 2</code></li> - <li>ソース上で２番目のアイテム: <code>order: 3</code></li> - <li>ソース上で４番目のアイテム: <code>order: 3</code></li> -</ul> +以下の例で値を変更して、表示順がどのように変わるか試してみてください。また `flex-direction` を `row-reverse` に変えたときに何が起こるか、つまり先頭が変わるために反対側から並べられることを確かめましょう。 -<p><img alt="ソース上の順序を示す番号を表示している順序変更されたアイテム" src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p> +{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}} -<p>以下の例で値を変更して、表示順がどのように変わるか試してみてください。また <code>flex-direction</code> を <code>row-reverse</code> に変えたときに何が起こるか、つまり始点が変わるために反対側から並べられることを確かめましょう。</p> +フレックスアイテムの既定の `order` は `0` です。したがって 0 より大きい `order` をもつアイテムは、明示的に `order` を指定されていないアイテムの後ろに表示されます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p> +`order` には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムに `order: -1` を設定することで、0 より小さい `order` のこのアイテムが常に先頭に表示されるようになります。 -<p>フレックスアイテムのデフォルトの <code>order</code> は <code>0</code> です。したがって 0 より大きい <code>order</code> をもつアイテムは、明示的に <code>order</code> を指定されていないアイテムの後ろに表示されます。</p> +以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている `active` クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。 -<p><code>order</code> には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムに <code>order: -1</code> を設定することで、0 より小さい <code>order</code> のこのアイテムが常に先頭に表示されるようになります。</p> +{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}} -<p>以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている <code>active</code> クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。</p> +アイテムは仕様書の中で _order-modified document order_ として述べられているものに従って表示されます。アイテムが表示される前に、`order` プロパティの値が考慮されます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p> +`order` はアイテムの描画順についても変更します。`order` の値が小さいものから先に描画され、大きくなる順に描画されていきます。 -<p>アイテムは仕様の中で <em>order-modified document order</em> として述べられているものに従って表示されます。アイテムが表示される前に、<code>order</code> プロパティの値が考慮されます。</p> +## order プロパティとアクセシビリティ -<p><code>order</code> はアイテムの描画順についても変更します。<code>order</code> の値が小さいものから先に描画され、大きくなる順に描画されていきます。</p> +`order` プロパティの使用は、`flex-direction` による方向の変更と同様のアクセシビリティに対する影響があります。`order` は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。 -<h2 id="The_order_property_and_accessibility" name="The_order_property_and_accessibility">order プロパティとアクセシビリティ</h2> +この記事中の例でタブ移動を試すことで、`order` がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。 -<p><code>order</code> プロパティの使用は、<code>flex-direction</code> による方向の変更と同様のアクセシビリティに対する影響があります。<code>order</code> は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。</p> +- [Flexbox and the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/) +- [HTML Source Order vs CSS Display Order](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html) +- [The Responsive Order Conflict for Keyboard Focus](https://alastairc.uk/2017/06/the-responsive-order-conflict/) -<p>この記事中の例でタブ移動を試すことで、<code>order</code> がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。</p> +## order の用途 -<ul> - <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li> - <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">HTML Source Order vs CSS Display Order</a></li> - <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">The Responsive Order Conflict for Keyboard Focus</a></li> -</ul> +フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば `order` プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。 -<h2 id="Use_cases_for_order" name="Use_cases_for_order">order の利用場面</h2> +例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。 -<p>フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば <code>order</code> プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。</p> + -<p>例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。</p> +表示上では日付が見出しの上に現れています。しかし画面リーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを `order` プロパティで実現することができます。 -<p><img alt="日付が先頭にあり、見出しと本文がそれに続いているデザインコンポーネント" src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p> +カードをフレックスコンテナーとして、`flex-direction` を `column` に設定します。そして、日付に `order: -1` を設定します。これによって見出しの上に日付を引き上げることができます。 -<p>表示上では日付が見出しの上に現れています。しかしスクリーンリーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを <code>order</code> プロパティで実現することができます。</p> +{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}} -<p>カードをフレックスコンテナーとして、<code>flex-direction</code> を <code>column</code> に設定します。そして、日付に <code>order: -1</code> を設定します。これによって見出しの上に日付を引き上げることができます。</p> - -<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p> - -<p>この例のような細かな調整は <code>order</code> プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして <code>order</code> プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチスクリーンではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。</p> +この例のような細かな調整は `order` プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして `order` プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチ画面ではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。 diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-rtl.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-rtl.png Binary files differnew file mode 100644 index 0000000000..05a2036c05 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-rtl.png diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md index 7ec4dbc572..377cad818d 100644 --- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md @@ -4,134 +4,114 @@ slug: >- Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods tags: - CSS - - CSS フレックスボックス - - Guide - - Writing Mode - - box alignment + - ガイド + - 書字方向 + - ボックス配置 - contents - display - - flexbox - - grid - フレックスボックス - - ボックス配置 - - 書字方向 + - grid translation_of: >- Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods --- -<div>{{CSSRef}}</div> - -<p class="summary">この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。</p> - -<div class="note"> -<p><strong>メモ</strong>: CSS のバージョン 1 とバージョン 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。</p> -</div> - -<h2 id="The_box_alignment_module" name="The_box_alignment_module">ボックス配置モジュール</h2> - -<p>多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。</p> +{{CSSRef}} -<p>これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では <a href="https://www.w3.org/TR/css-align-3/">Box Alignment Specification</a> の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿ったスペースの分配についても扱っています。</p> +この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。 -<p>ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。</p> +> **Note:** CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。 -<blockquote> -<p>メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。</p> +## ボックス配置モジュール -<p>(訳注: <a href="https://www.w3.org/TR/css-flexbox-1/#alignment">https://www.w3.org/TR/css-flexbox-1/#alignment</a> より引用)</p> -</blockquote> +多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。 -<p>このガイドの後の記事「フレックスコンテナーでのアイテムの配置」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。</p> +これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では [Box Alignment 仕様書](https://www.w3.org/TR/css-align-3/)の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿った余白の分配についても扱っています。 -<h3 id="The_gap_properties" name="The_gap_properties">gap プロパティ</h3> +ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。 -<p>ボックス配置仕様書に最近追加されたものが、 {{cssxref("row-gap")}} プロパティ と {{cssxref("column-gap")}} プロパティ、およびこれらの一括指定プロパティ {{cssxref("gap")}} です。これらのプロパティは、はじめは CSS Grid 仕様の中で、それぞれ <code>grid-row-gap</code>, <code>grid-column-gap</code>, <code>grid-gap</code> として定義されていましたが、フレックスボックスを含めたすべてのレイアウト方法で使用できるように名前が変更され Box Alignment に移動されました。各ブラウザーがフレックスボックスの <code>gap</code> プロパティを実装するまでは、アイテム間にギャップを作るには {{cssxref("margin")}} プロパティを使うことになります。</p> +> "メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。" +(訳注: [https://www.w3.org/TR/css-flexbox-1/#alignment](https://www.w3.org/TR/css-flexbox-1/#alignment) より引用) -<h2 id="Writing_Modes" name="Writing_Modes">書字方向</h2> +このガイドの後の記事「[フレックスコンテナーでのアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。 -<p>「<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a>」の記事で、フレックスボックスが<strong>書字方向対応</strong>であることに触れました。書字方向については CSS の <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes specification</a> で詳細に記されており、国によって異なる様々な書字方向をどのように CSS がサポートしているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。 <strong>block</strong> 方向と <strong>inline</strong> 方向について理解することが、新しいレイアウト方法の鍵となります。</p> +## 書字方向 -<p>コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、<a href="https://24ways.org/2016/css-writing-modes/">この記事</a>を参照してください。</p> +「[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)」の記事で、フレックスボックスが**書字方向対応**であることに触れました。書字方向については CSS の [Writing Modes 仕様書](https://www.w3.org/TR/css-writing-modes-3/)で詳細に記されており、国によって異なる様々な書字方向にどのように CSS が対応しているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。**ブロック**方向と**インライン**方向について理解することが、新しいレイアウト方法の鍵となります。 -<h3 id="Writing_mode" name="Writing_mode">書字方向</h3> +コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、[この記事](https://24ways.org/2016/css-writing-modes/)を参照してください。 -<p>Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。</p> +### 書字方向 -<ul> - <li><code>horizontal-tb</code></li> - <li><code>vertical-rl</code></li> - <li><code>vertical-lr</code></li> - <li><code>sideways-rl</code></li> - <li><code>sideways-lr</code></li> -</ul> +Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p> +- `horizontal-tb` +- `vertical-rl` +- `vertical-lr` +- `sideways-rl` +- `sideways-lr` -<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/ja/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p> +{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} -<p>CSS の <code>writing-mode</code> プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で <code>html</code> 要素に <code>dir</code> 属性と <code>lang</code> 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS がロードされなかったとしても文書を正しく表示することができます。</p> +`sideways-rl` と `sideways-lr` の対応は現時点では Firefox のみということに注意してください。また `writing-mode` とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については [MDN の書字方向のドキュメント](/ja/docs/Web/CSS/writing-mode)に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。 -<h2 id="Flexbox_and_other_layout_methods" name="Flexbox_and_other_layout_methods">フレックスボックスと他のレイアウト方法</h2> +CSS の `writing-mode` プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で `html` 要素に `dir` 属性と `lang` 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS が読み込まれなかったとしても文書を正しく表示することができます。 -<p>フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に<a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">起こることの定義</a>が含まれています。例えば <code>float</code> 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。</p> +## フレックスボックスと他のレイアウト方法 -<p><code>display: flex</code> に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。</p> +フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に[起こることの定義](https://www.w3.org/TR/css-flexbox-1/#flex-containers)が含まれています。例えば `float` 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。 -<p>フレックスアイテムについては、ある要素は浮動 (<code>float</code>) や解除 (<code>clear</code>) が設定されていて、その上で親要素に <code>display: flex</code> が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。<code>inline-block</code> やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。</p> +`display: flex` に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。 -<p>次の例では、子要素は浮動設定されており、コンテナーには <code>display: flex</code> が設定されています。<code>display: flex</code> を削除すると、解除が適用されていないため <code>.box</code> が折りたたまれます。再度 <code>display: flex</code> を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。</p> +フレックスアイテムについては、ある要素は浮動 (`float`) や解除 (`clear`) が設定されていて、その上で親要素に `display: flex` が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。`inline-block` やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p> +次の例では、子要素は浮動設定されており、コンテナーには `display: flex` が設定されています。`display: flex` を削除すると、解除が適用されていないため `.box` が折りたたまれます。再度 `display: flex` を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。 -<h2 id="Flexbox_and_Grid_Layout" name="Flexbox_and_Grid_Layout">フレックスボックとグリッドレイアウト</h2> +{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}} -<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p> +## フレックスボックとグリッドレイアウト -<p>ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。</p> +[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている `flex` プロパティは無視されるようになります。 -<h3 id="Flex_and_grid_—_whats_the_difference" name="Flex_and_grid_—_what's_the_difference">フレックスとグリッドの違いは？</h3> +ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。 -<p>フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜ所々同じことをしているように見える２つの仕様がわざわざあるのか？というのはよくある疑問です。</p> +### フレックスとグリッドの違いは？ -<p>この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。スペースの分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。</p> +フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜところどころ同じことをしているように見える 2 つの仕様がわざわざあるのか？というのはよくある疑問です。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p> +この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。余白の分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。 -<p>同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。</p> +{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}} -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p> +同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。 -<p>これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。</p> +{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}} -<p>場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。</p> +これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。 -<p>経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。</p> +場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。 -<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p> +経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。 -<h2 id="Flexbox_and_display_contents" name="Flexbox_and_display_contents">フレックスボックスと display: contents</h2> +グリッドとフレックスボックスのさらに詳しい比較については「[グリッドレイアウトと他レイアウト方法との関係](/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)」の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。 -<p>{{cssxref("display")}} プロパティの値 <code>contents</code> は、仕様書の中で以下のように述べられている新しい値です。</p> +## フレックスボックスと display: contents -<blockquote> -<p>「要素自体はボックスを生成しませんが、その子要素や疑似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や疑似要素によって置き換えられたように扱わなければなりません」</p> +{{cssxref("display")}} プロパティの値 `contents` は、仕様書の中で以下のように述べられている新しい値です。 -<p>(訳注: <a href="https://www.w3.org/TR/css-display-3/#box-generation">https://www.w3.org/TR/css-display-3/#box-generation</a> より引用)</p> -</blockquote> +> 「要素自体はボックスを生成しませんが、その子要素や擬似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や擬似要素によって置き換えられたように扱わなければなりません」 +(訳注: [https://www.w3.org/TR/css-display-3/#box-generation](https://www.w3.org/TR/css-display-3/#box-generation) より引用) -<p><code>display</code> のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。</p> +`display` のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。 -<p>以下の例では、フレックスコンテナーに３つの子要素があります。そのうちの１にはさらに２つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。</p> +以下の例では、フレックスコンテナーに 3 つの子要素があります。そのうちの 1 つにはさらに 2 つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。 -<p>ここで <code>display: contents</code> をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、２つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。<code>display: contents</code> を削除してみると元に戻ることを確認できます。</p> +ここで `display: contents` をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、2 つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。`display: contents` を削除してみると元に戻ることを確認できます。 -<p>レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。</p> +レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。 -<div class="warning"> -<p><strong>警告</strong>: <code>display: contents</code> を利用すると、要素がアクセシビリティツリーからも削除されます。 – 読み上げソフトは中身を見ず、 <code>display: none</code> を使用したのと同様になります。 <code>contents</code> は表示のためだけのものであり、コンテンツや要素ではありません。</p> -</div> +> **Warning:** 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します (ただし、子孫は残ります)。これにより、要素自体が画面リーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。[`display: contents`](/ja/docs/Web/CSS/display#display_contents) を参照してください。 -<p>また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において <code>display: contents</code> を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。</p> +また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}} -<p><code>display:contents</code> のブラウザー対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに <code>display: contents</code> をサポートしており、 Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。</p> +`display: contents` のブラウザーの対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに `display: contents` に対応しており、Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。 diff --git a/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md index 4c3c468afc..621db78586 100644 --- a/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md +++ b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md @@ -1,99 +1,100 @@ --- -title: フレックスボックスの典型的な使用例 +title: フレックスボックスの典型的な用途 slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox tags: - CSS - - Flexible Box - - Guide - - common uses - - flexbox + - フレックスボックス + - ガイド + - 用途 + - フレックスボックス - patterns translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p class="summary">このガイドでは、フレックスボックスの一般的な使用例を紹介します。 — 他のレイアウト方法よりも適した使い方です。</p> +このガイドでは、フレックスボックスの一般的な使用例を紹介します。 — 他のレイアウト方法よりも適した使い方です。 -<h2 id="Why_choose_flexbox" name="Why_choose_flexbox">なぜフレックスボックスを選ぶのか？</h2> +## なぜフレックスボックスを選ぶのか？ -<p>ブラウザーが完全対応しているならば、アイテムの集まりをある方向へ並べる用途にはフレックスボックスが適しています。アイテムを並べる際には、コンテナの内部でのアイテムの寸法や、アイテム同士の余白を調節したくなると思います。フレックスボックスはそのような用途のために設計されています。フレックスボックスと CSS グリッドレイアウトとの違いについては <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法の関係</a> をご覧ください。そこでは、フレックスボックスが CSS レイアウトの全体像にどのように適合しているのかを説明しています。</p> +ブラウザーが完全対応しているならば、アイテムの集まりをある方向へ並べる用途にはフレックスボックスが適しています。アイテムを並べる際には、コンテナーの内部でのアイテムの寸法や、アイテム同士の余白を調節したくなると思います。フレックスボックスはそのような用途のために設計されています。フレックスボックスと CSS グリッドレイアウトとの違いについては [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods) をご覧ください。そこでは、フレックスボックスが CSS レイアウトの全体像にどのように適合しているのかを説明しています。 -<p>現状では、グリッドレイアウトのほうが適しているけれどもそれを使えない、という場面でもフレックスボックスはよく使われます。また、アイテムを整列する手段としても使われます。これは、Box Alignment がブロック要素のレイアウト方法として実装されれば解決するでしょう。このガイドでは、現状での典型的なフレックスボックスの使用例を紹介します。</p> +現状では、グリッドレイアウトのほうが適しているけれどもそれを使えない、という場面でもフレックスボックスはよく使われます。また、アイテムを整列する手段としても使われます。これは、Box Alignment がブロック要素のレイアウト方法として実装されれば解決するでしょう。このガイドでは、現状での典型的なフレックスボックスの使用例を紹介します。 -<h2 id="Navigation" name="Navigation">ナビゲーション</h2> +## ナビゲーション -<p>ナビゲーションのよくあるパターンとして、水平な棒状にリストを表示するというものがあります。このパターンは見た目とは裏腹に、フレックスボックスの登場以前は実現が難しいものでした。フレックスボックスならばとても簡単であり、うってつけの出番だと言えます。</p> +ナビゲーションのよくあるパターンとして、水平な棒状にリストを表示するというものがあります。このパターンは見た目とは裏腹に、フレックスボックスの登場以前は実現が難しいものでした。フレックスボックスならばとても簡単であり、うってつけの出番だと言えます。 -<p>アイテムを水平に表示する際に、空白が必要になる場合があります。その空白をどうするか。2 つの選択肢があります。アイテムの外側に置く場合は、アイテム同士の間やアイテムの周囲に空白を配置することになります。アイテムの内側に入れる場合は、アイテムが空白を受け入れてサイズが広がるようにする方法が必要です。</p> +水平方向に表示したいアイテム群がある場合、空間が残ることがあります。この空間をどうするかを決めなければなりませんが、いくつかの選択肢があります。アイテムの外側に空間を表示して、アイテムの間や周囲に余白を設けるか、アイテムの内側に空間を吸収して、アイテムを伸長してこの空間を占めるようにするか、どちらかにする必要があります。 -<h3 id="Space_distributed_outside_the_items" name="Space_distributed_outside_the_items">空白を外側に配置</h3> +### アイテムの外側に空間を分配 -<p>アイテム間や周囲に空白を置くには、フレックスボックスの整列系のプロパティと {{cssxref("justify-content")}} プロパティを使います。このプロパティの詳細については <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナにおけるアイテムの位置合わせ</a> をご覧ください。そこでは、主軸 (横軸) でのアイテムの整列について説明しています。</p> +アイテムの間または周囲に空間を分配するには、フレックスボックスの配置プロパティと {{cssxref("justify-content")}} プロパティを使います。このプロパティの詳細については、[フレックスコンテナーにおけるアイテム配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)をご覧ください。そこでは、主軸 (横軸) におけるアイテムの配置について説明しています。 -<p>下記のライブサンプルでは、アイテムをそれぞれ本来のサイズで表示しています。また、<code>justify-content: space-between</code> によって、同じ幅の空白をアイテム同士の間に配置しています。値に <code>space-around</code> や、ブラウザーが対応している場合は <code>space-evenly</code> を指定することで、空白の配置方法を変えることができます。<code>flex-start</code> で空白をアイテム群の後ろに配置し、<code>flex-end</code> で空白をアイテム群の前に配置し、<code>center</code> でアイテム群をナビゲーションの中央に配置することもできます。</p> +下記のライブ例では、アイテムをそれぞれ本来の大きさで表示しています。また、`justify-content: space-between` によって、アイテム同士の間に同じ幅の余白を配置しています。値に `space-around` や、ブラウザーが対応している場合は `space-evenly` を指定することで、余白の配置方法を変えることができます。`flex-start` で余白をアイテム群の後ろに配置したり、`flex-end` で余白をアイテム群の前に配置したり、`center` でアイテム群をナビゲーションの中央に配置したりすることもできます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}} -<h3 id="Space_distributed_within_the_items" name="Space_distributed_within_the_items">空白を内側に配置</h3> +### アイテムの内側に空間を分配 -<p>ナビゲーションでの別のパターンは、空白をアイテム同士の間ではなく、アイテム自身の内部に配置することです。この場合は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Flex アイテムを主軸に沿わせる時の制御割合</a> に書かれているように、{{cssxref("flex")}} プロパティを使うことで、アイテムを互いの比率を保ったまま伸縮できます。</p> +ナビゲーションでのもう一つのパターンは、空間をアイテムの間ではなく、アイテム自身の内部に配置することです。この場合は、{{cssxref("flex")}} プロパティを使うことで、アイテムを互いの比率を保ったまま伸縮することができます。[主軸に沿ったフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)に書かれている通りです。 -<p>ナビゲーションのアイテムの幅を同じにしたいなら、<code>flex: auto</code> を指定します。これは <code>flex: 1 1 auto</code> の短縮版です。すべてのアイテムは自動の flex-basis をもとに伸縮します。つまり、他よりも中身が多いアイテムは、占める領域も他より多くなります。</p> +ナビゲーションのアイテムの幅を同じにしたいなら、`flex: auto` を指定します。これは `flex: 1 1 auto` の一括指定です。すべてのアイテムは自動の flex-basis をもとに伸縮します。つまり、他よりも中身が多いアイテムは、占める空間も他より多くなります。 -<p>下記のライブサンプルの <code>flex: auto</code> を <code>flex: 1</code> に変えてみてください。これは <code>flex: 1 1 0</code> の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって領域が均等に配分されるからです。</p> +下記のライブサンプルの `flex: auto` を `flex: 1` に変えてみてください。これは `flex: 1 1 0` の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって空間が均等に分配されるからです。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}} -<h2 id="Split_navigation" name="Split_navigation">ナビゲーションの分割</h2> +## ナビゲーションの分割 -<p>主軸 (横軸) でアイテムを整列するもうひとつの方法は、自動マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。</p> +主軸 (横軸) でアイテムを整列するもうひとつの方法は、auto マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。 -<p>下記の例では、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">主軸上での位置合わせに auto マージンを使う</a> に書かれている自動マージンの技法を使っています。アイテムは <code>flex-start</code> によって主軸上に揃えられます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に揃えられます。分割される地点を変えるには、CSSクラス "push-right" を別のアイテムに移してください。</p> +下記の例では、[主軸上での位置合わせのための_auto_マージンの使用](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#主軸上での位置合わせのための_auto_マージンの使用)に書かれている auto マージンの技法を使っています。アイテムは `flex-start` によって主軸上に配置されます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に配置されます。分割される位置を変更するには、CSS の "push-right" クラスを別のアイテムに移してください。 -<p>下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空白を作っています。また、フレックスコンテナにネガティブマージンを指定して、コンテナの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある <code>gap</code> プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。</p> +下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空間を作っています。また、フレックスコンテナーに負のマージンを指定して、コンテナーの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある `gap` プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}} -<h2 id="Center_item" name="Center_item">アイテムの中央揃え</h2> +## アイテムの中央揃え -<p>フレックスボックスの登場以前、開発者たちは「Webデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。今では、下記のライブサンプルのとおり、フレックスボックスの整列系のプロパティで簡単にできます。</p> +フレックスボックスの登場以前、開発者たちは「ウェブデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。下記のライブサンプルのとおり、フレックスボックスの配置プロパティを使用することで、簡単に解決できるようになりました。 -<p>下記のコード内の <code>center</code> の代わりに、先頭に揃える <code>flex-start</code> や末尾に揃える <code>flex-end</code> を指定して、整列の挙動を試してみてください。</p> +配置では、`flex-start` でアイテムを先頭に、`flex-end` で末尾に配置することができます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}} -<p>将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナをフレックスコンテナとして扱ってフレックスコンテナに <code>align-items</code> を指定するか、フレックスアイテム自身に <code>align-self</code> を指定してください。</p> +将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナーを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナーをフレックスコンテナーとして扱ってフレックスコンテナーに `align-items` を指定するか、フレックスアイテム自身に `align-self` を指定してください。 -<h2 id="Card_layout_pushing_footer_down" name="Card_layout_pushing_footer_down">フッターが下端に張り付くカード</h2> +## フッターが下端に張り付くカード -<p>フレックスボックスや CSS グリッドを使ってコンテナ内のカード状の部品を並べて配置する場合、それらの制御はコンテナの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッドエリアやフレックスコンテナの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。</p> +フレックスボックスや CSS グリッドを使ってコンテナー内のカード状の部品を並べて配置する場合、それらの制御はコンテナーの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッド領域やフレックスコンテナーの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。 -<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> + -<p>フレックスボックスはこれを解決できます。カード自身もフレックスコンテナにして、{{cssxref("flex-direction")}}<code>: column</code> を指定します。そしてカードの本文エリアに <code>flex: 1</code> を指定します。これは <code>flex: 1 1 0</code> の短縮版です。アイテムは <code>0</code> の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文エリアだけの場合、本文エリアはフレックスコンテナ内の空白をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから <code>flex</code> プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。</p> +フレックスボックスはこれを解決できます。カード自身もフレックスコンテナーにして、{{cssxref("flex-direction")}}`: column` を指定します。そしてカードの本文領域に `flex: 1` を指定します。これは `flex: 1 1 0` の一括指定です。アイテムは `0` の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文領域だけの場合、本文領域はフレックスコンテナー内の空間をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから `flex` プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}} -<h2 id="Media_objects" name="Media_objects">メディアオブジェクト</h2> +## メディアオブジェクト -<p>メディアオブジェクトはWebデザインの一般的なパターンです。このパターンは画像などを左側に持ち、文章をもう右側に持ちます。理想的には、メディアオブジェクトを反転させて画像を左から右へ移すことができるようにすべきでしょう。</p> +メディアオブジェクトは、ウェブデザインでよく見られるパターンです。このパターンでは、画像やその他の要素が片側に、テキストが右側に配置されています。メディアオブジェクトは、反転させることができるのが理想です。すなわち、画像を左から右に移動することです。 -<p>このようなパターンはどこでも見かけます。コメント欄や、画像とその説明を表示する場合などです。フレックスボックスならば、メディアオブジェクトの画像エリアには画像の寸法そのままの領域を確保させて、余った領域はすべて文章エリアに使わせるという柔軟な指定ができます。</p> +このパターンは、コメント欄をはじめ、画像や説明を表示する必要がある場所でよく見られます。フレックスボックスを使用すると、画像を含むメディアオブジェクトの部分が画像から大きさを取得し、メディアオブジェクトの本文が残りの空間を確保するように拡大縮小します。 -<p>下記のライブサンプルはメディアオブジェクトの例です。整列系のプロパティを使ってアイテムを交差軸 (縦軸) の <code>flex-start</code> に揃えて、<code>.content</code> を指定したフレックスアイテムに <code>flex: 1</code> を指定しています。先述のカード内の縦方向の配置と同じく、<code>flex: 1</code> はその要素を引き伸ばせることを意味します。</p> +下のライブ例では、メディアオブジェクトが表示されています。配置プロパティを使用して、横軸のアイテムを `flex-start` に揃え、`.content` のフレックスアイテムを `flex: 1` に設定しています。前述のカラムレイアウトカードのパターンと同様に、`flex: 1` を使用することで、カードのこの部分を伸長させることができます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}} -<p>下記のような、メディアオブジェクトの実用でよくある場面を、上記のライブサンプルで試してみたくなりませんか？</p> +このライブ例では、デザインの中でメディアオブジェクトを制約するさまざまな方法を試してみることができます。 -<p>画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像エリアのフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では <code>flex-basis</code> は auto なので、画像の {{cssxref("width")}} や max-width が <code>flex-basis</code> となります。</p> +画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像領域のフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では `flex-basis` は auto なので、画像の {{cssxref("width")}} や max-width が `flex-basis` となります。 -<pre class="brush: css">.image img { +```css +.image img { max-width: 100px; } -</pre> +``` -<p>両方のエリアの比率を維持したまま伸縮させることもできます。両者に <code>flex: 1</code> を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。両者の比率を中身の量で決めるために <code>flex: auto</code> を指定することもできます。その場合は、中身のサイズに応じて、または画像の width ようにフレックスアイテムに直接適用されるサイズに応じて伸縮します。</p> +両方の領域の比率を維持したまま伸縮させることもできます。両者に `flex: 1` を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。内容物を元に、両方とも `flex: auto` に設定すると、内容物の寸法や、画像の幅などフレックスアイテムに直接適用される大きさに合わせて拡大縮小することができます。 <pre class="brush: css">.media .content { flex: 1; @@ -104,39 +105,41 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox flex: 1; }</pre> -<p>両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像エリアには <code>flex: 1</code>、文章エリアには <code>flex: 3</code> というように。これは、両者に <code>0</code> の <code>flex-basis</code> が適用されますが、指定された <code>flex-grow</code> に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Flex アイテムを主軸に沿わせる時の制御割合</a> で詳しく説明されています。</p> +両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像領域には `flex: 1`、文章領域には `flex: 3` というように。これは、両者に `0` の `flex-basis` が適用されますが、指定された `flex-grow` に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、[主軸に沿ったフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)で詳しく説明されています。 -<pre class="brush: css">.media .content { +```css +.media .content { flex: 3; padding: 10px; } .image { flex: 1; -}</pre> +} +``` -<h3 id="Flipping_the_media_object" name="Flipping_the_media_object">メディアオブジェクトを反転させる</h3> +### メディアオブジェクトを反転させる -<p>画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、<code>flex-direction</code> プロパティに <code>row-reverse</code> を指定します。下記のライブサンプルでは、<code>.flipped</code> のクラスを <code>.media</code> の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。</p> +画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、`flex-direction` プロパティに `row-reverse` を指定します。下記のライブサンプルでは、`flipped` のクラスを `.media` の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}} -<h2 id="Form_controls" name="Form_controls">フォームコントロール</h2> +## フォームコントロール -<p>フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはマークアップと小さな要素がたくさんあり、それらを整列させたいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。</p> +フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはたくさんのマークアップや小さな要素があり、それらを配置したいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。 -<p>フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、枠線と <code>display: flex</code> を指定したラッパーの中に <code><button></code> と <code><input></code> フィールドを入れています。<code><input></code> フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。</p> +フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、`<button>` と `<input>` フィールドを枠線と `display: flex` を指定したラッパーの中に入れています。`<input>` フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}} -<p>ボタンを右側に置いたのと同じように、ラベルやアイコンを左側に置くことも簡単にできます。今回はラベルを置きました。背景色以外は、何もレイアウトを変更していません。伸縮する入力欄は少し狭くなるものの、2 つのアイテムが取った残りの領域をすべて使うことになります。</p> +ボタンを右側に置いたのと同じように、ラベルやアイコンを左側に置くことも簡単にできます。今回はラベルを置きました。背景色以外は、何もレイアウトを変更していません。伸縮する入力欄は少し狭くなるものの、2 つのアイテムが取った残りの領域をすべて使うことになります。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}} -<p>このようなパターンのおかげで、デザインに合わせたフォーム要素のライブラリを簡単に作れます。要素の追加にも簡単に対応できます。伸縮するアイテムとしないアイテムを組み合わせる用途では、フレックスボックスの柔軟性の恩恵を存分に受けることができるのです。</p> +このようなパターンのおかげで、デザインに合わせたフォーム要素のライブラリーを簡単に作れます。要素の追加にも簡単に対応できます。伸縮するアイテムとしないアイテムを組み合わせる用途では、フレックスボックスの柔軟性の恩恵を存分に受けることができるのです。 -<h2 id="Conclusion" name="Conclusion">終わりに</h2> +## 終わりに -<p>上に挙げたパターンを見て回るうちに、フレックスボックスの最適な利用場面を考え始めたことと思います。いろいろな選択肢があることでしょう。伸縮するアイテムとしないアイテムを組み合わせたり、フレックスアイテムの中身のサイズをフレックスアイテム自身に反映させたり、比率に沿ってフレックスボックスの領域を分け合ったり。すべてはあなた次第です。</p> +上に挙げたパターンを見て回るうちに、フレックスボックスの最適な利用場面を考え始めたことと思います。いろいろな選択肢があることでしょう。伸縮するアイテムとしないアイテムを組み合わせたり、フレックスアイテムの中身のサイズをフレックスアイテム自身に反映させたり、比率に沿ってフレックスボックスの領域を分け合ったり。すべてはあなた次第です。 -<p>コンテンツの最適な表現方法を思い描いてみてください。そしてその実現にあたって、フレックスボックスや他のレイアウト方法をどのように利用できるのかを調べてみてください。</p> +コンテンツの最適な表現方法を思い描いてみてください。そしてその実現にあたって、フレックスボックスや他のレイアウト方法をどのように利用できるのかを調べてみてください。 diff --git a/files/ja/web/css/flex-basis/Corel 自動保持/firefox-flex-basis.png b/files/ja/web/css/flex-basis/Corel 自動保持/firefox-flex-basis.png Binary files differnew file mode 100644 index 0000000000..9ec083f5a9 --- /dev/null +++ b/files/ja/web/css/flex-basis/Corel 自動保持/firefox-flex-basis.png diff --git a/files/ja/web/css/flex-basis/firefox-flex-basis.png b/files/ja/web/css/flex-basis/firefox-flex-basis.png Binary files differnew file mode 100644 index 0000000000..8e6c0a8d97 --- /dev/null +++ b/files/ja/web/css/flex-basis/firefox-flex-basis.png diff --git a/files/ja/web/css/flex-basis/index.md b/files/ja/web/css/flex-basis/index.md index 7be7d71aab..60f13accfa 100644 --- a/files/ja/web/css/flex-basis/index.md +++ b/files/ja/web/css/flex-basis/index.md @@ -3,27 +3,33 @@ title: flex-basis slug: Web/CSS/flex-basis tags: - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フレックスボックス + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.flex-basis translation_of: Web/CSS/flex-basis --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>flex-basis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。</p> +**`flex-basis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。 -<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> +{{EmbedInteractiveExample("pages/css/flex-basis.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +この例では、3 つすべてのアイテムの {{cssxref("flex-grow")}} と {{cssxref("flex-shrink")}} プロパティがともに `1` に設定されており、フレックスアイテムが初期の `flex-basis` から伸長したり縮小したりできることを示しています。 -<div class="note"> -<p><strong>メモ</strong>: (<code>auto</code> 以外の) <code>flex-basis</code> と <code>width</code> (または <code>flex-direction: column</code> の場合は <code>height</code>) の両方が要素に設定されていた場合、 <code>flex-basis</code> が優先されます。</p> -</div> +このデモでは、最初のアイテムの `flex-basis` を変更します。そして、その `flex-basis` を基準にして伸長したり縮小したりします。つまり、例えば最初のアイテムの `flex-basis` が `200px` の場合、最初は 200px で表示されますが、他のアイテムが最低でも `min-content` の大きさであることを考慮して、利用可能な空間に合わせて縮小されます。 -<h2 id="Syntax" name="Syntax">構文</h2> +下記の図は、Firefox の [Flexbox インスペクター](/ja/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts)がアイテムがどのような寸法になるのかを理解するのに役立つことを示しています。 -<pre class="brush:css no-line-numbers notranslate">/* 幅を指定する */ + + +> **Note:** (`auto` 以外の) `flex-basis` と `width` (または `flex-direction: column` の場合は `height`) の両方が要素に設定されていた場合、 `flex-basis` が優先されます。 + +## 構文 + +```css +/* 幅を指定する */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; @@ -40,63 +46,58 @@ flex-basis: content; /* グローバル値 */ flex-basis: inherit; flex-basis: initial; +flex-basis: revert; flex-basis: unset; -</pre> +``` -<p><code>flex-basis</code> プロパティは、<code><a href="#content">content</a></code> キーワードまたは <code><a href="#<'width'>"><'width'></a></code> で指定します。</p> +`flex-basis` プロパティは、`content` キーワードまたは `<'width'>` で指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code id="<'width'>"><'width'></code></dt> - <dd>絶対的な {{cssxref("<length>")}}、親のフレックスコンテナーの main size に対する {{cssxref("<percentage>")}}、あるいは <code>auto</code> キーワードで定義します。負の値は不正です。既定値は <code>auto</code> です。</dd> - <dt><code id="content">content</code></dt> - <dd>flex アイテムの内容物に基づいて、自動的にサイズを決めます。</dd> - <dd> - <div class="note"><strong>メモ:</strong> この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> または <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) を <code>auto</code> にするのと合わせて <code>auto</code> を使用することで、同等の効果を得られます。</div> +- `<'width'>` + - : 絶対的な {{cssxref("<length>")}}、親のフレックスコンテナーの主軸方向の寸法に対する {{cssxref("<percentage>")}}、あるいは `auto` キーワードで定義します。負の値は無効です。既定値は `auto` です。 +- `content` - <div class="note"> - <p id="comment_text_0"><strong>経緯:</strong></p> + - : フレックスアイテムの内容物に基づいて、自動的に大きさを決めます。 - <ul> - <li>元々、<code>flex-basis:auto</code> は "自身の <code>width</code> または <code>height</code> プロパティを参照する" ことを意味していました。</li> - <li>その後 <code>flex-basis:auto</code> の意味が自動サイズ設定に変わり、また "自身の <code>width</code> または <code>height</code> プロパティを参照する" キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。</li> - <li>さらに、この変更が {{bug("1093316")}} で戻されて <code>auto</code> が再び "自身の <code>width</code> または <code>height</code> プロパティを参照する" になり、自動サイズ設定を行うための <code>content</code> キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。</li> - </ul> - </div> - </dd> -</dl> + > **Note:** この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) または [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) を `auto` にするのと合わせて `auto` を使用することで、同等の効果を得られます。 + > + > - もともと、`flex-basis:auto` は「自身の `width` または `height` プロパティを参照する」という意味でした。 + > - その後 `flex-basis:auto` の意味が自動拡大縮小設定に変わり、また「自身の `width` または `height` プロパティを参照する」キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。 + > - さらに、この変更が {{bug("1093316")}} で戻されて `auto` が再び「自身の `width` または `height` プロパティを参照する」になり、自動拡大縮小設定を行うための `content` キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_flex_item_initial_sizes" name="Setting_flex_item_initial_sizes">フレックスアイテムの初期の寸法の設定</h3> +<h3 id="Setting_flex_item_initial_sizes">フレックスアイテムの初期の寸法の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><ul class="container"> - <li class="flex flex1">1: flex-basis test</li> - <li class="flex flex2">2: flex-basis test</li> - <li class="flex flex3">3: flex-basis test</li> - <li class="flex flex4">4: flex-basis test</li> - <li class="flex flex5">5: flex-basis test</li> -</ul> +```html +<ul class="container"> + <li class="flex flex1">1: flex-basis test</li> + <li class="flex flex2">2: flex-basis test</li> + <li class="flex flex3">3: flex-basis test</li> + <li class="flex flex4">4: flex-basis test</li> + <li class="flex flex5">5: flex-basis test</li> +</ul> -<ul class="container"> - <li class="flex flex6">6: flex-basis test</li> -</ul> -</pre> +<ul class="container"> + <li class="flex flex6">6: flex-basis test</li> +</ul> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.container { +```css +.container { font-family: arial, sans-serif; margin: 0; padding: 0; @@ -174,39 +175,22 @@ flex-basis: unset; .flex6:after { content: 'fill'; } -</pre> +``` -<h4 id="Results" name="Results">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}</p> +{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.flex-basis")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li> - <li>{{cssxref("width")}}</li> -</ul> +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS フレックスボックスガイド: _[フレックスアイテムの主軸方向における比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- {{cssxref("width")}} diff --git a/files/ja/web/css/flex-direction/index.md b/files/ja/web/css/flex-direction/index.md index 8e6f817697..0336d1480c 100644 --- a/files/ja/web/css/flex-direction/index.md +++ b/files/ja/web/css/flex-direction/index.md @@ -3,104 +3,102 @@ title: flex-direction slug: Web/CSS/flex-direction tags: - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フレックスボックス + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.flex-direction translation_of: Web/CSS/flex-direction --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>flex-direction</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。</span></p> +**`flex-direction`** は [CSS](/ja/docs/Web/CSS) のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。 -<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> +{{EmbedInteractiveExample("pages/css/flex-direction.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +なお、 `row` および `row-reverse` の値は、フレックスコンテナーの書字方向に影響されます。 {{HTMLAttrxRef("dir")}} 属性が `ltr` である場合は、 `row` は左から右へ向かう水平軸を表し、また `row-reverse` は右から左へ向かう水平軸を表します。一方、 `dir` 属性が `rtl` である場合は、 `row` は右から左へ向かう水平軸を表し、また `row-reverse` は左から右へ向かう水平軸を表します。 -<p>なお、 <code>row</code> および <code>row-reverse</code> の値は、フレックスコンテナーの書字方向に影響されます。 {{HTMLAttrxRef("dir")}} 属性が <code>ltr</code> である場合は、 <code>row</code> は左から右へ向かう水平軸を表し、また <code>row-reverse</code> は右から左へ向かう水平軸を表します。一方、 <code>dir</code> 属性が <code>rtl</code> である場合は、 <code>row</code> は右から左へ向かう水平軸を表し、また <code>row-reverse</code> は左から右へ向かう水平軸を表します。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* 行のテキストの方向に配置 */ +```css +/* 行のテキストの方向に配置 */ flex-direction: row; -/* <row> と同様だが、逆向き */ +/* <row> と同様だが、逆向き */ flex-direction: row-reverse; /* 積み重なるように配置する */ flex-direction: column; -/* <column> と同様だが、逆向き */ +/* <column> と同様だが、逆向き */ flex-direction: column-reverse; /* グローバル値 */ flex-direction: inherit; flex-direction: initial; +flex-direction: revert; flex-direction: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<p>以下の値を指定できます。</p> +以下の値を指定できます。 -<dl> - <dt><code>row</code></dt> - <dd>フレックスコンテナーの主軸は、書字方向と同じに定義されます。 <strong>main-start</strong> および <strong>main-end</strong> の位置は、コンテンツの書字方向と同様になります。</dd> - <dt><code>row-reverse</code></dt> - <dd><code>row</code> と同様ですが、<strong>main-start</strong> および <strong>main-end</strong> の位置が入れ替わります。</dd> - <dt><code>column</code></dt> - <dd>フレックスコンテナーの主軸は、ブロック軸と同じになります。 <strong>main-start</strong> および <strong>main-end</strong> の位置は、 writing-mode における <strong>before</strong> および <strong>after</strong> の位置と同じになります。</dd> - <dt><code>column-reverse</code></dt> - <dd><code>column</code> と同様ですが、 <strong>main-start</strong> および <strong>main-end</strong> の位置が入れ替わります。</dd> -</dl> +- `row` + - : フレックスコンテナーの主軸は、書字方向と同じに定義されます。 **main-start** および **main-end** の位置は、コンテンツの書字方向と同様になります。 +- `row-reverse` + - : `row` と同様ですが、**main-start** および **main-end** の位置が入れ替わります。 +- `column` + - : フレックスコンテナーの主軸は、ブロック軸と同じになります。 **main-start** および **main-end** の位置は、 writing-mode における **before** および **after** の位置と同じになります。 +- `column-reverse` + - : `column` と同様ですが、 **main-start** および **main-end** の位置が入れ替わります。 -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> +## アクセシビリティの考慮 -<p><code>flex-direction</code> プロパティを <code>row-reverse</code> または <code>column-reverse</code> の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。</p> +`flex-direction` プロパティを `row-reverse` または `column-reverse` の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、画面リーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、画面リーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。 -<ul> - <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> - <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN "WCAG を理解する ― ガイドライン 1.3 の解説"</a></li> - <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> -</ul> +- [Flexbox & the keyboard navigation disconnect — Tink](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/) +- [Source Order Matters | Adrian Roselli](https://adrianroselli.com/2015/09/source-order-matters.html) +- [MDN "WCAG を理解する ― ガイドライン 1.3 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways) +- [Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html) -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Reversing_flex_container_columns_and_rows" name="Reversing_flex_container_columns_and_rows">フレックスコンテナーの列と行の反転</h3> +<h3 id="Reversing_flex_container_columns_and_rows">フレックスコンテナーの列と行の反転</h3> -<h4 id="HTML" name="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><h4>This is a Column-Reverse</h4> -<div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> -</div> -<h4>This is a Row-Reverse</h4> -<div id="content1"> - <div class="box1" style="background-color:red;">A</div> - <div class="box1" style="background-color:lightblue;">B</div> - <div class="box1" style="background-color:yellow;">C</div> -</div> -</pre> +```html +<h4>This is a Column-Reverse</h4> +<div id="col-rev" class="content"> + <div class="box red">A</div> + <div class="box lightblue">B</div> + <div class="box yellow">C</div> +</div> +<h4>This is a Row-Reverse</h4> +<div id="row-rev" class="content"> + <div class="box red">A</div> + <div class="box lightblue">B</div> + <div class="box yellow">C</div> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">#content { +```css +.content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; - flex-direction: column-reverse; } .box { @@ -108,49 +106,40 @@ flex-direction: unset; height: 50px; } -#content1 { - width: 200px; - height: 200px; - border: 1px solid #c3c3c3; - display: flex; +#col-rev { + flex-direction: column-reverse; +} + +#row-rev { flex-direction: row-reverse; } -.box1 { - width: 50px; - height: 50px; -}</pre> +.red { + background-color: red; +} + +.lightblue { + background-color: lightblue; +} + +.yellow { + background-color: yellow; +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}</p> +{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.flex-direction")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<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/Ordering_Flex_Items">フレックスアイテムの並べ替え</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/Ordering_Flex_Items)_ diff --git a/files/ja/web/css/flex-flow/index.md b/files/ja/web/css/flex-flow/index.md index 4c77d70ed0..5e34ae19aa 100644 --- a/files/ja/web/css/flex-flow/index.md +++ b/files/ja/web/css/flex-flow/index.md @@ -5,32 +5,39 @@ tags: - CSS - CSS フレックスボックス - CSS プロパティ - - Reference - - 一括指定プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.flex-flow translation_of: Web/CSS/flex-flow --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>flex-flow</code></strong> プロパティは、 {{cssxref("flex-direction")}} プロパティと {{cssxref("flex-wrap")}} プロパティの<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティです。</p> +**`flex-flow`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、フレックスコンテナーの向きと折り返しの動作を同時に指定します。 -<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div> +{{EmbedInteractiveExample("pages/css/flex-flow.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構成要素のプロパティ -<h2 id="Syntax" name="Syntax">構文</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<pre class="brush:css no-line-numbers">/* flex-flow: <'flex-direction'> */ +- [`flex-direction`](/ja/docs/Web/CSS/flex-direction) +- [`flex-wrap`](/ja/docs/Web/CSS/flex-wrap) + +## 構文 + +```css +/* flex-flow: <'flex-direction'> */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; -/* flex-flow: <'flex-wrap'> */ +/* flex-flow: <'flex-wrap'> */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; -/* flex-flow: <'flex-direction'> および <'flex-wrap'> */ +/* flex-flow: <'flex-direction'> および <'flex-wrap'> */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; @@ -38,53 +45,42 @@ flex-flow: column-reverse wrap-reverse; /* グローバル値 */ flex-flow: inherit; flex-flow: initial; +flex-flow: revert; flex-flow: unset; -</pre> +``` + +### 値 -<h3 id="Values" name="Values">値</h3> +値に関して詳しくは、 {{cssxref("flex-direction")}} および {{cssxref("flex-wrap")}} をご覧ください。 -<p>値に関して詳しくは、 {{cssxref("flex-direction")}} および {{cssxref("flex-wrap")}} をご覧ください。</p> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +### column-reverse と wrap の設定 -<pre class="brush:css;highlight:3">element { +```css +element { /* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます */ flex-flow: column-reverse wrap; } -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow') }}</td> - <td>{{ Spec2('CSS3 Flexbox') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.flex-flow")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<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/Ordering_Flex_Items">フレックスアイテムの順序</a></em></li> -</ul> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS フレックスボックスガイド: _[フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ diff --git a/files/ja/web/css/flex-grow/index.md b/files/ja/web/css/flex-grow/index.md index 5d75820101..d6cf8521d9 100644 --- a/files/ja/web/css/flex-grow/index.md +++ b/files/ja/web/css/flex-grow/index.md @@ -3,82 +3,82 @@ title: flex-grow slug: Web/CSS/flex-grow tags: - CSS - - CSS Flexible Boxes - - CSS Property + - CSS フレックスボックス + - CSS プロパティ - NeedsContent - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.flex-grow translation_of: Web/CSS/flex-grow --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>flex-grow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの<a href="https://www.w3.org/TR/css-flexbox/#main-size">主軸方向の寸法</a>のフレックス伸長係数を設定します。</span></p> +**`flex-grow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの[主軸方向の寸法](https://www.w3.org/TR/css-flexbox/#main-size)のフレックス伸長係数を設定します。 -<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div> +{{EmbedInteractiveExample("pages/css/flex-grow.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <number> 値 */ +```css +/* <number> 値 */ flex-grow: 3; flex-grow: 0.6; /* グローバル値 */ flex-grow: inherit; flex-grow: initial; +flex-grow: revert; flex-grow: unset; -</pre> +``` -<p><code>flex-grow</code> プロパティは単一の <code><a href="#<number>"><number></a></code> として指定します。</p> +`flex-grow` プロパティは単一の `[<number>](#<number>)` として指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><a id="<number>" name="<number>"><code><number></code></a></dt> - <dd>{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は0です。</dd> -</dl> +- `<number>` + - : {{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は 0 です。 -<h2 id="Description" name="Description">解説</h2> +## 解説 -<p>このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。</p> +このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。 -<p><a href="https://www.w3.org/TR/css-flexbox/#main-size">主軸方向の寸法</a>は、アイテムの幅または高さのどちらかで、 {{cssxref("flex-direction")}} の値に依存して決まります。</p> +[主軸方向の寸法](https://www.w3.org/TR/css-flexbox/#main-size)は、アイテムの幅または高さのどちらかで、 {{cssxref("flex-direction")}} の値に依存して決まります。 -<p>残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。</p> +残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って分配されます。 -<p>使用するにあたって、 <code>flex-grow</code> は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。</p> +使用するにあたって、 `flex-grow` は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_flex_item_grow_factor" name="Setting_flex_item_grow_factor">フレックスアイテムの伸長係数の設定</h3> +<h3 id="Setting_flex_item_grow_factor">フレックスアイテムの伸長係数の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<div id="Live_Sample"> -<pre class="brush: html notranslate"><h4>This is a Flex-Grow</h4> -<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> -<div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> - <div class="box1" style="background-color:brown;">D</div> - <div class="box1" style="background-color:lightgreen;">E</div> - <div class="box" style="background-color:brown;">F</div> -</div> -</pre> +```html +<h4>This is a Flex-Grow</h4> +<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> + <div class="box1" style="background-color:brown;">D</div> + <div class="box1" style="background-color:lightgreen;">E</div> + <div class="box" style="background-color:brown;">F</div> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">#content { +```css +#content { display: flex; justify-content: space-around; @@ -95,40 +95,22 @@ flex-grow: unset; flex-grow: 2; border: 3px solid rgba(0,0,0,.2); } -</pre> -</div> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}}</p> +{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.flex-grow")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li> - <li><a href="https://css-tricks.com/flex-grow-is-weird/">`flex-grow` is weird. Or is it?</a> Manuel Matuzovic による CSS-Tricks の記事で、どのように flex-grow が動作するかを解説している</li> -</ul> +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS フレックスボックスガイド: _[フレックスアイテムの主軸方向における比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- [`flex-grow` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) Manuel Matuzovic による CSS-Tricks の記事で、どのように flex-grow が動作するかを解説している diff --git a/files/ja/web/css/flex-shrink/index.md b/files/ja/web/css/flex-shrink/index.md index 7984548518..02703bbfb0 100644 --- a/files/ja/web/css/flex-shrink/index.md +++ b/files/ja/web/css/flex-shrink/index.md @@ -3,11 +3,10 @@ title: flex-shrink slug: Web/CSS/flex-shrink tags: - CSS - - CSS Flexible Boxes - - CSS Property - CSS フレックスボックス + - CSS プロパティ - NeedsContent - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.flex-shrink translation_of: Web/CSS/flex-shrink @@ -56,9 +55,9 @@ flex-shrink: unset; #### HTML ```html -<p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p> -<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p> -<p>D と E の幅は他より狭くなります。</p> +全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。 +A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。 +D と E の幅は他より狭くなります。 <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> diff --git a/files/ja/web/css/flex-wrap/index.md b/files/ja/web/css/flex-wrap/index.md index 405f21b733..554fb01c26 100644 --- a/files/ja/web/css/flex-wrap/index.md +++ b/files/ja/web/css/flex-wrap/index.md @@ -5,152 +5,139 @@ tags: - CSS - CSS フレックスボックス - CSS プロパティ - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.flex-wrap translation_of: Web/CSS/flex-wrap --- -<div>{{ CSSRef}}</div> +{{ CSSRef}} -<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>flex-wrap</code></strong> プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。</p> +**`flex-wrap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。 -<div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div> +{{EmbedInteractiveExample("pages/css/flex-wrap.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +他のプロパティや詳細情報については [CSS フレックスボックスの使用](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)をご覧ください。 -<p>他のプロパティや詳細情報については <a href="/ja/docs/CSS/Using_CSS_flexible_boxes" title="/ja/docs/CSS/Using_CSS_flexible_boxes">CSS フレックスボックスの利用</a>をご覧ください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">flex-wrap: nowrap; /* 既定値 */ +```css +flex-wrap: nowrap; /* 既定値 */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* グローバル値 */ flex-wrap: inherit; flex-wrap: initial; +flex-wrap: revert; flex-wrap: unset; -</pre> +``` + +`flex-wrap` プロパティは次の値のリストから選択した単一のキーワードで指定します。 -<p><code>flex-wrap</code> プロパティは次の値のリストから選択した単一のキーワードで指定します。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +以下の値を利用することができます。 -<p>以下の値を利用することができます。</p> +- `nowrap` + - : フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 `cross-start` は、 {{cssxref("flex-direction")}} の値に応じて `start` または `before` と同一になります。 +- `wrap` + - : フレックスアイテムは複数行に分割されます。 `cross-start` は `flex-direction` の値に応じて `start` または `before` と同一になり、 `cross-end` は、指定された `cross-start` の反対側になります。 +- `wrap-reverse` + - : `wrap` と同様に動作しますが、 `cross-start` と `cross-end` が入れ替わります。 -<dl> - <dt><code>nowrap</code></dt> - <dd>フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 <code>cross-start</code> は、 {{cssxref("flex-direction")}} の値に応じて <code>start</code> または <code>before</code> と同一になります。</dd> - <dt><code>wrap</code></dt> - <dd>フレックスアイテムは複数行に分割されます。 <code>cross-start</code> は <code>flex-direction</code> の値に応じて <code>start</code> または <code>before</code> と同一になり、 <code>cross-end</code> は、指定された <code>cross-start</code> の反対側になります。</dd> - <dt><code>wrap-reverse</code></dt> - <dd><code>wrap</code> と同様に動作しますが、 <code>cross-start</code> と <code>cross-end</code> が入れ替わります。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<div id="Live_Sample"> -<pre class="brush: html"><h4>This is an example for flex-wrap:wrap </h4> -<div class="content"> - <div class="red">1</div> - <div class="green">2</div> - <div class="blue">3</div> -</div> -<h4>This is an example for flex-wrap:nowrap </h4> -<div class="content1"> - <div class="red">1</div> - <div class="green">2</div> - <div class="blue">3</div> -</div> -<h4>This is an example for flex-wrap:wrap-reverse </h4> -<div class="content2"> - <div class="red">1</div> - <div class="green">2</div> - <div class="blue">3</div> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">/* Common Styles */ +## 例 + +<h3 id="Setting_flex_container_wrap_values">フレックスコンテナーの wrap 値の設定</h3> + +#### HTML + +```html +<h4>This is an example for flex-wrap:wrap </h4> +<div class="content"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +<h4>This is an example for flex-wrap:nowrap </h4> +<div class="content1"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +<h4>This is an example for flex-wrap:wrap-reverse </h4> +<div class="content2"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +``` + +#### CSS + +```css +/* Common Styles */ .content, .content1, .content2 { - color: #fff; - font: 100 24px/100px sans-serif; - height: 150px; - text-align: center; + color: #fff; + font: 100 24px/100px sans-serif; + height: 150px; + width: 897px; + text-align: center; } .content div, .content1 div, .content2 div { - height: 50%; - width: 50%; + height: 50%; + width: 300px; } .red { - background: orangered; + background: orangered; } .green { - background: yellowgreen; + background: yellowgreen; } .blue { - background: steelblue; + background: steelblue; } /* Flexbox Styles */ .content { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .content1 { - display: flex; - flex-wrap: nowrap; + display: flex; + flex-wrap: nowrap; } .content2 { - display: flex; - flex-wrap: wrap-reverse; + display: flex; + flex-wrap: wrap-reverse; } +``` -</pre> -</div> - -<h3 id="Results" name="Results">結果</h3> - -<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p> +#### 結果 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{ EmbedLiveSample('Setting_flex_container_wrap_values', '700px', '700px', '', 'Web/CSS/flex-wrap') }} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td> - <td>{{ Spec2('CSS3 Flexbox') }}</td> - <td> </td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.flex-wrap")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<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/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</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/Mastering_Wrapping_of_Flex_Items)_ diff --git a/files/ja/web/css/flex/index.md b/files/ja/web/css/flex/index.md index 663452dca7..4fe28859c4 100644 --- a/files/ja/web/css/flex/index.md +++ b/files/ja/web/css/flex/index.md @@ -3,148 +3,136 @@ title: flex slug: Web/CSS/flex tags: - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS フレックスボックス + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.flex translation_of: Web/CSS/flex --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>flex</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、フレックス<em>アイテム</em>をフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。</span></p> +**`flex`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、フレックス*アイテム*をフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。 -<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div> +{{EmbedInteractiveExample("pages/css/flex.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構成要素のプロパティ -<h2 id="Constituent_properties" name="Constituent_properties">構成するプロパティ</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +- {{cssxref("flex-grow")}} +- {{cssxref("flex-shrink")}} +- {{cssxref("flex-basis")}} -<ul> - <li>{{cssxref("flex-grow")}}</li> - <li>{{cssxref("flex-shrink")}}</li> - <li>{{cssxref("flex-basis")}}</li> -</ul> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ flex: auto; flex: initial; flex: none; -/* 単位がない数値を1つ指定: flex-grow */ +/* 単位がない数値を 1 つ指定: flex-grow */ flex: 2; -/* 幅または高さを1つ指定: flex-basis */ +/* 幅または高さを 1 つ指定: flex-basis */ flex: 10em; flex: 30%; flex: min-content; -/* 値を2つ指定: flex-grow | flex-basis */ +/* 値を 2 つ指定: flex-grow | flex-basis */ flex: 1 30px; -/* 値を2つ指定: flex-grow | flex-shrink */ +/* 値を 2 つ指定: flex-grow | flex-shrink */ flex: 2 2; -/* 値を3つ指定: flex-grow | flex-shrink | flex-basis */ +/* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* グローバル値 */ flex: inherit; flex: initial; +flex: revert; flex: unset; -</pre> - -<p><code>flex</code> プロパティは1つ、2つ、3つの値を取ることがあります。</p> - -<ul> - <li><strong>値1つの構文:</strong> 値は以下のうちの1つです。 - - <ul> - <li><code><number></code>: この場合は <code>flex: <number> 1 0</code> と解釈されます。 <code><a href="#<'flex-shrink'>"><flex-shrink></a></code> の値は 1 と想定され、 <code><a href="#<'flex-basis'>"><flex-basis></a></code> の値は <code>0</code> と想定されます。</li> - <li>キーワード: <code><a href="#none">none</a></code>, <code><a href="#auto">auto</a></code>, <code>initial</code> のいずれか。</li> - </ul> - </li> - <li><strong>値2つの構文:</strong> - <ul> - <li>1つ目は次の値でなければなりません。 - <ul> - <li>{{cssxref("<number>")}} であり、 <code><a href="#<'flex-grow'>"><flex-grow></a></code> として解釈される。</li> - </ul> - </li> - <li>2つ目は次の値でなければなりません。 - <ul> - <li>{{cssxref("<number>")}}: <code><a href="#<'flex-shrink'>"><flex-shrink></a></code> として解釈される。</li> - <li>{{cssxref("width")}} として有効な値: <code><a href="#<'flex-basis'>"><flex-basis></a></code> として解釈される。</li> - </ul> - </li> - </ul> - </li> - <li><strong>値3つの構文:</strong> 値は以下の順序でなければなりません。 - <ol> - <li>最初の値は単位なしの {{cssxref("<number>")}} でなければならず、 <code><a href="#<'flex-grow'>"><flex-grow></a></code> として解釈されます。</li> - <li>2つ目の値は単位なしの {{cssxref("<number>")}} でなければならず、 <code><a href="#<'flex-grow'>"><flex-shrink></a></code> として解釈されます。</li> - <li>3つ目の値は {{cssxref("width")}} として有効な値でなければならず、 <code><a href="#<'flex-basis'>"><flex-basis></a></code> として解釈されます。</li> - </ol> - </li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>initial</code></dt> - <dd>アイテムは <code>width</code> および <code>height</code> プロパティによって大きさが決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "<code>flex: 0 1 auto</code>" と同等です。</dd> - <dt id="auto"><code>auto</code></dt> - <dd>アイテムは <code>width</code> および <code>height</code> プロパティによって大きさが決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "<code>flex: 1 1 auto</code>" と同等です。</dd> - <dt id="none"><code>none</code></dt> - <dd>アイテムは <code>width</code> および <code>height</code> プロパティによって大きさが決められます。大きさは完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"<code>flex: 0 0 auto</code>" と同等です。</dd> - <dt id="<'flex-grow'>"><code><'flex-grow'></code></dt> - <dd>フレックスアイテムの {{cssxref("flex-grow")}} を定義します。負の値は無効とみなされます。省略時の既定値は <code>1</code> です。 (初期値は <code>0</code>)</dd> - <dt id="<'flex-shrink'>"><code><'flex-shrink'></code></dt> - <dd>フレックスアイテムの {{cssxref("flex-shrink")}} を定義します。負の値は無効とみなされます。省略時の既定値は <code>1</code> です。 (初期値は <code>1</code>)</dd> - <dt id="<'flex-basis'>"><code><'flex-basis'></code></dt> - <dd>フレックスアイテムの {{cssxref("flex-basis")}} を定義します。希望サイズが <code>0</code> ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は <code>1</code> です。 (初期値は <code>auto</code>)</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p>多くの場合、 <code>flex</code> には <code>auto</code>, <code>initial</code>, <code>none</code>, または単位のない正の数を設定してください。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。</p> - -<div id="flex"> -<pre class="hidden brush: html notranslate"><div class="flex-container"> - <div class="item auto">auto</div> - <div class="item auto">auto</div> - <div class="item auto">auto</div> -</div> - -<div class="flex-container"> - <div class="item auto">auto</div> - <div class="item initial">initial</div> - <div class="item initial">initial</div> -</div> - -<div class="flex-container"> - <div class="item auto">auto</div> - <div class="item auto">auto</div> - <div class="item none">none</div> -</div> - -<div class="flex-container"> - <div class="item initial">initial</div> - <div class="item none">none</div> - <div class="item none">none</div> -</div> - -<div class="flex-container"> - <div class="item four">4</div> - <div class="item two">2</div> - <div class="item one">1</div> -</div> -</pre> - -<pre class="hidden brush: css notranslate">* { +``` + +`flex` プロパティは 1 つ、2 つ、3 つの値を取ることができます。 + +- **値 1 つの構文:** 値は以下のうちの 1 つです。 + + - `<number>`: この場合は `flex: <number> 1 0` と解釈されます。[`<flex-shrink>`](#flex-shrink) の値は 1 と想定され、[`<flex-basis>`](#flex-basis) の値は `0` と想定されます。 + - キーワード: `none`, `auto`, `initial` のいずれか。 + +- **値 2 つの構文:** + + - 1 つ目は次の値でなければなりません。 + + - {{cssxref("<number>")}} であり、`<flex-grow>` として解釈される。 + + - 2 つ目は次の値でなければなりません。 + + - {{cssxref("<number>")}}: `<flex-shrink>` として解釈される。 + - {{cssxref("width")}} として有効な値: `<flex-basis>` として解釈される。 + +- **値 3 つの構文:** 値は以下の順序でなければなりません。 + + 1. {{cssxref("<number>")}} で `<flex-grow>` として解釈される。 + 2. {{cssxref("<number>")}} で `<flex-shrink>` として解釈される。 + 3. {{cssxref("width")}} として有効な値で、`<flex-basis>` として解釈される。 + +### 値 + +- `initial` + - : アイテムは `width` および `height` プロパティによって寸法が決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "`flex: 0 1 auto`" と同等です。 +- `auto` + - : アイテムは `width` および `height` プロパティによって寸法が決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "`flex: 1 1 auto`" と同等です。 +- `none` + - : アイテムは `width` および `height` プロパティによって寸法が決められます。寸法は完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"`flex: 0 0 auto`" と同等です。 +- `<'flex-grow'>` + - : フレックスアイテムの {{cssxref("flex-grow")}} を定義します。負の値は無効とみなされます。省略時の既定値は `1` です。 (初期値は `0`) +- `<'flex-shrink'>` + - : フレックスアイテムの {{cssxref("flex-shrink")}} を定義します。負の値は無効とみなされます。省略時の既定値は `1` です。 (初期値は `1`) +- `<'flex-basis'>` + - : フレックスアイテムの {{cssxref("flex-basis")}} を定義します。希望サイズが `0` ならば、自由度として解釈されないように単位をつけなければなりません。省略時の既定値は `1` です。 (初期値は `auto`) + +<h2 id="Description">解説</h2> + +多くの場合、 `flex` には `auto`, `initial`, `none`, または単位のない正の数を設定してください。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。 + +```html hidden +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item auto">auto</div> +</div> + +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item initial">initial</div> + <div class="item initial">initial</div> +</div> + +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item none">none</div> +</div> + +<div class="flex-container"> + <div class="item initial">initial</div> + <div class="item none">none</div> + <div class="item none">none</div> +</div> + +<div class="flex-container"> + <div class="item four">4</div> + <div class="item two">2</div> + <div class="item one">1</div> +</div> +``` + +```css hidden +* { box-sizing: border-box; } @@ -190,103 +178,87 @@ flex: unset; .one { flex: 1; } -</pre> +``` -<p>{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}</p> +{{EmbedLiveSample("Description", 1200, 400, "", "", "example-outcome-frame")}} -<p>既定ではフレックスアイテムは最小コンテンツサイズよりも収縮することはありません。これを変更するには、 {{cssxref("min-width")}} または {{cssxref("min-height")}} を設定してください。</p> -</div> +既定ではフレックスアイテムは内容物の最小の寸法よりも収縮することはありません。これを変更するには、 {{cssxref("min-width")}} または {{cssxref("min-height")}} を設定してください。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_flex_auto" name="Setting_flex_auto">flex: auto の設定</h3> +<h3 id="Setting_flex_auto">flex: auto の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div id="flex-container"> - <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> - <div class="raw-item" id="raw">Raw box</div> -</div> -</pre> +```html +<div id="flex-container"> + <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> + <div class="raw-item" id="raw">Raw box</div> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">#flex-container { +```css +#flex-container { display: flex; flex-direction: row; } -#flex-container > .flex-item { +#flex-container > .flex-item { flex: auto; } -#flex-container > .raw-item { +#flex-container > .raw-item { width: 5rem; } -</pre> +``` -<div class="hidden"> -<pre class="brush: js notranslate">var flex = document.getElementById("flex"); +```js hidden +var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("click", function() { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); -</pre> +``` -<pre class="brush: css notranslate">#flex-container { +```css hidden +#flex-container { width: 100%; font-family: Consolas, Arial, sans-serif; } -#flex-container > div { +#flex-container > div { border: 1px solid #f00; padding: 1rem; } -#flex-container > .raw-item { +#flex-container > .raw-item { border: 1px solid #000; } -</pre> -</div> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Setting_flex_auto','100%','60')}}</p> +{{EmbedLiveSample('Setting_flex_auto','100%','100')}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状況</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.flex")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ diff --git a/files/ja/web/css/order/index.md b/files/ja/web/css/order/index.md index 16092e59ff..ec63e07ab0 100644 --- a/files/ja/web/css/order/index.md +++ b/files/ja/web/css/order/index.md @@ -5,107 +5,96 @@ tags: - CSS - CSS フレックスボックス - CSS プロパティ - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.order translation_of: Web/CSS/order --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>order</code></strong> プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは <code>order</code> の値の昇順に配置され、さらにソースコード内の順序で配置されます。</p> +**`order`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは `order` の値の昇順に配置され、さらにソースコード内の順序で配置されます。 -<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div> +{{EmbedInteractiveExample("pages/css/order.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <integer> 値 */ +```css +/* <integer> 値 */ order: 5; order: -5; /* グローバル値 */ order: inherit; order: initial; -order: unset;</pre> +order: revert; +order: unset; +``` -<div class="note"> -<p><strong>メモ</strong>: <code>order</code> は要素の<strong>視覚上の順序</strong>にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。<code><strong>order</strong></code> を <a href="/ja/docs/Web/CSS/@media#speech">speech</a> など、視覚的ではないメディアで使用してはいけません。</p> -</div> +`order` は要素の*視覚上の順序*にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。`order` を [speech](/ja/docs/Web/CSS/@media#speech) など、視覚的ではないメディアで使用してはいけません。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<integer>")}}</dt> - <dd>アイテムが割り当てられる順序グループを表します。</dd> -</dl> +- {{cssxref("<integer>")}} + - : アイテムが割り当てられる順序グループを表します。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## アクセシビリティの考慮事項 -{{csssyntax}} +`order` プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、画面リーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、画面リーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。 + +- [Flexbox & the keyboard navigation disconnect — Tink](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/) +- [Source Order Matters | Adrian Roselli](https://adrianroselli.com/2015/09/source-order-matters.html) +- [MDN "WCAG を理解する ― ガイドライン 1.3 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways) +- [Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html) -<h2 id="Example" name="Example">例</h2> +## 公式定義 -<p>基本的な HTML 一式:</p> +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} -<pre class="brush:html; notranslate"><header>...</header> -<main> - <article>Article</article> - <nav>Nav</nav> - <aside>Aside</aside> -</main> -<footer>...</footer></pre> +## 例 -<p>以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。</p> +<h3 id="Ordering_items_in_a_flex_container">フレックスコンテナー内のアイテムの並べ替え</h3> -<pre class="brush:css; notranslate">main { display: flex; text-align:center; } -main > article { flex:1; order: 2; } -main > nav { width: 200px; order: 1; } -main > aside { width: 200px; order: 3; }</pre> +以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout モジュールでは、垂直方向のサイズが同じで水平方向の空間を可能な限り多く使用するブロックを、自動的に作成します。 -<h3 id="Result" name="Result">結果</h3> +#### HTML -<p>{{ EmbedLiveSample('Example') }}</p> +```html +<header>...</header> +<main> + <article>Article</article> + <nav>Nav</nav> + <aside>Aside</aside> +</main> +<footer>...</footer> +``` -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +#### CSS -<p><code>order</code> プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。</p> +```css +main { display: flex; text-align:center; } +main > article { flex:1; order: 2; } +main > nav { width: 200px; order: 1; } +main > aside { width: 200px; order: 3; } +``` -<ul> - <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the keyboard navigation disconnect — Tink</a></li> - <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> -</ul> +#### 結果 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{ EmbedLiveSample('Ordering_items_in_a_flex_container') }} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.order")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<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/Ordering_Flex_Items">フレックスアイテムの並べ替え</a></em></li> - <li>CSS グリッドガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</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/Ordering_Flex_Items)_ +- CSS グリッドガイド: _[CSS グリッドレイアウトとアクセシビリティ](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)_ |
