このカードにはあまりコンテンツがありません。
+
+
+```
+
+```css live-sample___row-wrap
+.box {
+ width: 500px;
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.box > * {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ flex: 1 1 160px;
+}
+```
+
+{{EmbedLiveSample("row-wrap")}}
+
+フレックス列でも同じことが起こります。 列を折り返して新しい列を作成するには、コンテナーに高さを指定する必要があります。 列の場合、アイテムは垂直方向に伸縮し、各列を完全に埋めます。
+
+```html live-sample___column-wrap
+One
+ Two
+ Three
+ Four
+ Five
+ Six
+ Seven
+ Eight
+ Nine
+ Ten
+
+
+```
+
+```css live-sample___column-wrap
+.box {
+ border: 2px dotted rgb(96 139 168);
+ height: 300px;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+}
+.box > * {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ flex: 1 1 80px;
+}
+```
+
+{{EmbedLiveSample("column-wrap", "", "320px")}}
## 折り返しと flex-direction
折り返しは、`flex-direction` と組み合わせることで、期待通りの効果を発揮します。`flex-direction` が `row-reverse` に設定されている場合、アイテムはコンテナーの端から始まり、逆順に並んでいきます。
-{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}
+```html live-sample___row-reverse-wrap
+One
+ Two
+ Three
+ Four
+ Five
+ Six
+ Seven
+ Eight
+ Nine
+ Ten
+
+
+```
+
+```css live-sample___row-reverse-wrap
+.box {
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row-reverse;
+ width: 500px;
+}
+.box > * {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ flex: 1 1 160px;
+}
+```
+
+{{EmbedLiveSample("row-reverse-wrap")}}
なお、反転は行内方向にのみ行われます。右から開始して 2 行目に進み、再び右から開始します。下から開始してコンテナーを上がっていくという、両方の方向で反転しているわけではありません。
@@ -33,35 +126,133 @@ l10n:
上の例で見たように、アイテムが伸縮することが許されていれば、最後の行や列のアイテムが少なくなると、それらのアイテムは空いた空間を埋めるように伸びていきます。
-フレックスボックスには、ある行のアイテムとその上の行のアイテムの位置を揃える方法はありません。各フレックス行は新しいフレックスコンテナーのように機能します。これが主軸の空間分配を行います。アイテムが 1 つだけで、そのアイテムが成長することが許可されている場合、1 つのアイテムのフレックスコンテナーがある場合と同様に、その軸いっぱいに表示されます。
-
-2 次元でのレイアウトが必要な場合は、おそらくグリッドレイアウトを使用します。上記の折り返し行の例を CSS グリッド版のレイアウトと比較すると、違いが分かります。次のライブサンプルでは、CSS グリッドレイアウトを使用して、160 ピクセル以上の列が収まるだけのレイアウトを作成し、余分な空間をすべての列に分配しています。ただし、この場合、アイテムはグリッド内に留まり、最終行のアイテム数が少なくなっても伸びることはありません。
-
-{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}
-
-これが一次元と二次元のレイアウトの違いです。フレックスボックスのような一次元方式では、行または列のみを制御します。グリッドのような二次元のレイアウトでは、両方を同時に制御します。行ごとに空間を分配したい場合は、フレックスボックスを使用してください。そうでない場合は、グリッドを使用してください。
+フレックスボックスには、ある行のアイテムとその上の行のアイテムの位置を揃える機能はありません。各フレックス行は新しいフレックスコンテナーのように機能します。これが主軸の空間分配を行います。アイテムが 1 つだけで、そのアイテムが成長することが許可されている場合、1 つのアイテムのフレックスコンテナーがある場合と同様に、その軸いっぱいに表示されます。二次元でのレイアウトが必要な場合は、おそらくグリッドレイアウトを使用します。
+
+この例では、 CSS グリッドレイアウトを使用して、収まるだけ多くの `160px` 以上の列を持つレイアウトを作成し、余った空間をすべての列に分配することで、その違いを示しています。 HTML は、上記の[フレックスボックスで折り返された行](#折り返しを行う)の例と同じものを使用しますが、 `display: grid` を設定します。 フレックスボックスの外では効果のない {{cssxref("flex")}} 一括指定の代わりに、アイテムの最小幅とコンテナー上で直接成長する能力を {{cssxref("grid-template-columns")}} で設定します。 CSS グリッドを使用すると、最後のアイテムはグリッドセル内に留まります。最後の行のアイテムが少ない場合でも、グリッドアイテムは伸張しません。
+
+```html live-sample___grid-example
+One
+ Two
+ Three
+ Four
+ Five
+ Six
+ Seven
+ Eight
+ Nine
+ Ten
+
+
+```
+
+```css live-sample___grid-example
+.box {
+ border: 2px dotted rgb(96 139 168);
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ width: 500px;
+}
+
+.box > * {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+{{EmbedLiveSample("grid-example")}}
+
+これが一次元と二次元のレイアウトの違いです。フレックスボックスのような一次元レイアウト方式では、行または列のみを制御します。グリッドのような二次元のグリッドレイアウトでは、両方を同時に制御します。行ごとに空間を分配したい場合は、フレックスボックスを使用してください。そうでない場合は、 CSS グリッドを使用してください。
## フレックスボックスベースのグリッドシステムはどのように機能するか
-通常、フレックスボックスベースのグリッドシステムは、フレックスボックスを馴染みのある float ベースのレイアウトの世界に戻すことで機能します。フレックスアイテムにパーセント値の幅を割り当てると、`flex-basis` として、または `flex-basis` の値を `auto` のままにしてアイテム自体に幅を追加することで、2 次元のレイアウトのような印象を与えることができます。以下の例では、この機能を確認できます。
-
-ここでは、`flex-grow` と `flex-shrink` を `0` に設定して、柔軟性のないフレックスアイテムを作り、フロートレイアウトで行っていたように、パーセント値を使って柔軟性をコントロールしています。
-
-{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}
-
-フレックスアイテムを横軸に並べる必要がある場合は、この方法で幅を制御することで実現できます。しかし、ほとんどの場合、この方法でフレックスアイテムに幅を追加する場合は、その部分をグリッドレイアウトに変更した方がよいことがわかります。
+フレックスボックスベースのレイアウトはグリッドシステムとして強制的に整列させることができますが、それはフレックスボックスの意図通りの使い方ではありません。フレックスアイテムに `flex-basis` で、または `flex-basis` を `auto` してアイテム自体に幅を追加することで、フレックスアイテムにパーセント値の幅を割り当てると、二次元のレイアウトのような印象を与えることができます。
+
+ここでは、`flex-grow` と `flex-shrink` を `0` に設定して、柔軟性のないフレックスアイテムを作っています。柔軟性はパーセント値で制御しています。
+
+```html live-sample___flex-grid
+One
+ Two
+ Three
+ Four
+ Five
+ Six
+ Seven
+ Eight
+ Nine
+ Ten
+
+
+```
+
+```css live-sample___flex-grid
+* {
+ box-sizing: border-box;
+}
+
+.box {
+ width: 500px;
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.box > * {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ flex: 0 0 33.3333%;
+}
+```
+
+{{EmbedLiveSample("flex-grid")}}
+
+このテクニックを用いると、フレックスアイテムを交差軸上に整列させることができます。しかし、この方法でフレックスアイテムに幅を追加したり、スペースを取るために空のフレックスアイテムを追加している場合は、そのコンポーネントを CSS グリッドレイアウトに変更した方がよいことを示します。
## アイテム間のすき間の生成
-フレックスアイテム間にすき間または溝を作成するには、 {{CSSXref('gap')}} プロパティを使用します。
-
-CSS の gap プロパティは `row-gap` と `column-gap` の一括指定で、グリッド、フレックス、段組みレイアウトにおける行や列の間の空間である溝の大きさを指定します。
+フレックスアイテム間にすき間または溝を作成するには、 {{CSSXref("gap")}} プロパティをフレックスコンテナーに直接使用することで、その子のフレックスアイテム間に固定幅のすき間を生成することができます。 `gap` プロパティは、 `row-gap` と `column-gap` の一括指定です。これらのプロパティは、グリッド、フレックス、段組みレイアウト内の行と列の間のすき間の寸法を指定します。
-フレックスボックスでは、 `gap` プロパティをフレックスコンテナーに適用します。これは隣接するフレックスアイテムの間に固定された空間を作成します。しかし、アイテムの間に空間を作ることができるのは `gap` プロパティだけではありません。マージン、パディング、`justify-content`、`align-content` も溝のサイズを大きくすることができ、実際のすき間のサイズに影響を与えます。
+アイテムの間に空間を追加することができるのは `gap` プロパティだけではありません。マージン、パディング、`justify-content`、`align-content` もすき間の寸法を大きくすることができ、実際のすき間の寸法に影響を与えます。
両方の軸で `gap` プロパティが `margin` とどのように異なるかを確認するには、コンテナー `.box` の `gap` 値を変更し、下記スタイルシートの `.box > *` ルールに `margin` 値を追加してみてください。リセットボタンをクリックすると前回の値に戻ります。
-{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}
+```html live-sample___gaps
+One
+ Two
+ Three
+ Four
+ Five
+ Six
+ Seven
+ Eight
+ Nine
+ Ten
+
+
+```
+
+```css live-sample___gaps
+.wrapper {
+ border: 2px dotted rgb(96 139 168);
+ width: 500px;
+}
+.box {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+.box > * {
+ flex: 1 1 160px;
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+{{EmbedLiveSample("gaps", "", "220px")}}
## アイテムの折り畳み
@@ -71,24 +262,83 @@ CSS の gap プロパティは `row-gap` と `column-gap` の一括指定で、
この動作は、 JavaScript を使用してフレックスアイテムを対象にし、コンテンツの表示・非表示を行う場合などに便利です。仕様書の例では、そのようなパターンの一つを示しています。
-次のライブ例では、折り返しのないフレックスコンテナーを使用しています。3 番目のアイテムは他のアイテムよりも内容物が多いのですが、 `visibility: collapse` に設定されているため、フレックスコンテナーはこのアイテムを表示するために必要な高さの*支柱*を保持しています。CSS から `visibility: collapse` を削除したり、値を `visible` に変更したりすると、アイテムが現れ、折り畳まれていないアイテムに空間が再分配されますが、フレックスコンテナーの高さは変わりません。
+次のライブサンプルでは、折り返しのないフレックスコンテナーを使用しています。3 番目のアイテムは他のアイテムよりも内容物が多いのですが、 `visibility: collapse` に設定されているため、フレックスコンテナーはこのアイテムを表示するために必要な高さの*支柱*を保持しています。CSS から `visibility: collapse` を削除したり、値を `visible` に変更したりすると、アイテムが現れ、折り畳まれていないアイテムに空間が再分配されますが、フレックスコンテナーの高さは変わりません。
> [!NOTE]
> Chrome や Safari では折りたたまれている部分は非表示として扱われるため、以下の 2 つの例は Firefox を使用してください。
-{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}
+```html live-sample___visibility-collapse
+
+
+One
+ Two
+ Three
+ Four
+ Five
+ Six
+ Seven
+ Eight
+ Nine
+ Ten
+
+
+```
+
+```css live-sample___visibility-collapse
+.box {
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ width: 600px;
+}
+.box > * {
+ flex: 1 1 200px;
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+}
+.hide {
+ visibility: collapse;
+}
+```
+
+{{EmbedLiveSample("visibility-collapse")}}
しかし、複数行のフレックスコンテナーを扱う場合は、折り返しが折り返しの後に再実行されることを理解する必要があります。つまり、ブラウザーは折り畳まれたアイテムがインライン方向に残した新しい空間を考慮して、折り返しの動作を再実行する必要があります。
つまり、アイテムが最初の行とは別の行になってしまう可能性があるのです。アイテムを表示したり隠したりすると、アイテムが別の行になってしまうこともあります。
-次のライブ例では、この動作を作成しました。折り畳まれたアイテムの位置に基づいて、引き伸ばされている行が変化している様子がわかります。2 番目のアイテムにさらにコンテンツを追加すると、十分な長さになった時点で行が変更されます。その結果、一番上の行は、テキストの 1 行分の高さにしかなりません。
-
-{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}
+次のライブサンプルでは、この動作を作成しました。折り畳まれたアイテムの位置に基づいて、引き伸ばされている行が変化している様子がわかります。2 番目のアイテムにさらにコンテンツを追加すると、十分な長さになった時点で行が変更されます。その結果、一番上の行は、テキストの 1 行分の高さにしかなりません。
+
+```html live-sample___wrapped-visibility-collapse
+One
+ Two
+ Three
has
extra
text
+has
extra
text
+
+```
+
+```css live-sample___wrapped-visibility-collapse
+.box {
+ border: 2px dotted rgb(96 139 168);
+ width: 500px;
+ display: flex;
+ flex-wrap: wrap;
+}
+.box > * {
+ padding: 10px;
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ flex: 1 1 auto;
+}
+.hide {
+ visibility: collapse;
+}
+```
+
+{{EmbedLiveSample("wrapped-visibility-collapse")}}
これによりレイアウトに問題が生じる場合は、構造を見直す必要があるかもしれません。たとえば、各行を別々のフレックスコンテナーに入れて、行がずれないようにするなどです。
-### `visibility: hidden` や `display: none` との違い
+### `visibility: hidden` と `display: none` の使用
-前回のライブ例では、 `visiblity: collapse` の代わりに `visibility: hidden` または `display: none` を使用してみてください。 `visibility: hidden` を使用すると、アイテムは見えなくなりますが、ボックスは書式構造内に保持されるので、レイアウトの一部であるかのように動作します。
+上のライブサンプルにおいて、 `visiblity: collapse` の代わりに `visibility: hidden` または `display: none` を使用してみてください。 `visibility: hidden` を使用すると、アイテムは見えなくなりますが、ボックスは書式構造内に保持されるので、レイアウトの一部であるかのように動作します。
`display: none` を使用すると、項目は完全に書式構造から除去されます。見えないだけでなく、構造も除去されます。これはカウンターがそれを無視し、トランジションなどのことが実行されないことを意味しています。
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 9dd22291616187..5fec032f89b3eb 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,12 +2,12 @@
title: フレックスアイテムの順序
slug: Web/CSS/CSS_flexible_box_layout/Ordering_flex_items
l10n:
- sourceCommit: 883b021c97375f872d0702f0d0747b1373155cef
+ sourceCommit: 8a7e911652fcb4a61cc95f458d53f39ad08c0946
---
{{CSSRef}}
-フレックスボックスやグリッドといった新しいレイアウト方式には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法について見ていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。
+フレックスボックスやグリッドなどのレイアウト方式には、コンテンツの順序を制御することができます。この記事では、フレックスボックスを使っている場合にコンテンツの視覚的な順序を変更する方法について見ていきます。また、アイテムの順序の変更が、アクセシビリティにどう影響するかについても考察します。
## アイテムを逆順に表示する
@@ -34,30 +34,53 @@ l10n:
-これは、アイテムが*表示上*でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。
+これは、アイテムを逆順で表示する簡単な方法のように思えるかもしれません。しかし、アイテムは視覚的にのみ逆順で表示されることに留意すべきです。フレックスレイアウトの並び替え機能は、視覚的なレンダリングのみに影響します。タブ順序と読み上げ順序はソースコードの順序に従います。つまり、視覚的な表示のみが変更され、ソース順序は同じままなので、 CSS 非対応の UA （Siri や Alexa を考えてください）や支援技術のユーザーには使い勝手が異なるものになります。ナビゲーションバーの順序を変更しても、タブ順は文書内のソース順のまま変わりません。これは、視覚的な順序ではなく、認知的に混乱を招く可能性があります。
-> 「注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。」 - [Ordering and Orientation](https://www.w3.org/TR/css-flexbox-1/#flow-order)
+逆順の値を設定しているときや、そのほかの方法でアイテムの順序を変更している場合、ソース内の論理的な順序を変更すべきかどうかを考慮する必要があります。
-仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。
+フレックスボックスレイアウトの仕様書では、ソースの課題を修正する方法として並べ替えを使用しないよう警告しています。
-逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。
+> 「文書のアクセシビリティを損なうため、 order や {{cssxref("flex-flow")}}/`flex-direction` の \*-reverse 値をソース順序の修正の代用として利用してはいけません。」
-> 「文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の \*-reverse 値をソース順序の修正の代用として利用してはいけません。」
+次の例ではでリンクからリンクへとタブキーを押していくと、フォーカススタイルが強調表示されます。これで、 `flex-direction` を使用してフレックスアイテムの順序を変更しても、タブ順序は変更されず、ソースコードの順序に従うことで続けることが分かります。
-> [!NOTE]
-> 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。
+```html live-sample___flex-direction
+
+```
-以下の例ではリンクからリンクにタブ移動した際に、どれが強調されているかわかりやすいように focus スタイルを加えています。`flex-direction` を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。
+```css live-sample___flex-direction
+.box > * {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ padding: 10px;
+}
-{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}
+.box > * a:focus {
+ background-color: yellow;
+ color: black;
+}
-`flex-direction` の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。
+.box {
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ flex-direction: row-reverse;
+}
+```
+
+{{EmbedLiveSample("flex-direction")}}
+
+`flex-direction` の変更がタブ順を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。
## order プロパティ
フレックスアイテムが表示される順序を逆転することができましたが、それに加えて {{cssxref("order")}} プロパティを使用することでアイテム個別に表示される順序を変更することができます。
-`order` プロパティは、アイテムを*数字で順序づけたグループ*でレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。
+{{cssxref("order")}} プロパティは、アイテムを*数字で順序づけたグループ*でレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。
例として、5 つのアイテムに対して以下のように `order` を割り当てます。
@@ -79,33 +102,109 @@ l10n:
以下の例で値を変更して、表示順がどのように変わるか試してみてください。また `flex-direction` を `row-reverse` に変えたときに何が起こるか、つまり先頭が変わるために反対側から並べられることを確かめましょう。
-{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}
-
-フレックスアイテムの既定の `order` は `0` です。したがって 0 より大きい `order` をもつアイテムは、明示的に `order` を指定されていないアイテムの後ろに表示されます。
-
-`order` には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムの順序を `-1` を設定することで、0 より小さい `order` のこのアイテムが常に先頭に表示されるようになります。
+```html live-sample___order
+
+```
+
+```css live-sample___order
+.box > * {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ padding: 10px;
+}
+
+.box {
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ flex-direction: row;
+}
+.box :nth-child(1) {
+ order: 2;
+}
+.box :nth-child(2) {
+ order: 3;
+}
+.box :nth-child(3) {
+ order: 1;
+}
+.box :nth-child(4) {
+ order: 3;
+}
+.box :nth-child(5) {
+ order: 1;
+}
+```
+
+{{EmbedLiveSample("order")}}
+
+フレックスアイテムの既定の `order` は `0` です。したがって `0` より大きい `order` をもつアイテムは、明示的に `order` を指定されていないアイテムの後ろに表示されます。
+
+`order` には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムの順序を `-1` を設定することで、 `0` より小さい `order` のこのアイテムが常に先頭に表示されるようになります。
以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている `active` クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。
-{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}
+```html live-sample___negative-order
+
+```
+
+```css live-sample___negative-order
+* {
+ box-sizing: border-box;
+}
+
+.box > * {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ padding: 10px;
+}
+
+.box {
+ width: 500px;
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+}
+
+.active {
+ order: -1;
+ flex: 1 0 100%;
+}
+```
+
+{{EmbedLiveSample("negative-order")}}
アイテムは仕様書の中で _order-modified document order_ として述べられているものに従って表示されます。アイテムが表示される前に、`order` プロパティの値が考慮されます。
-`order` はアイテムの描画順についても変更します。`order` の値が小さいものから先に描画され、大きくなる順に描画されていきます。
+`order` はアイテムの描画順も変更します。 `order` の値が低いアイテムが最初に描画され、 `order` の値が高いアイテムがその後に描画されます。
## order プロパティとアクセシビリティ
-`order` プロパティの使用は、`flex-direction` による方向の変更と同様のアクセシビリティに対する影響があります。`order` は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。
+`order` プロパティを使用するとのアクセシビリティの影響は、 `flex-direction` で方向を変更することと同じ影響があります。 `order` を使用すると、アイテムが描画される順番と、視覚的に表示される順番が変更されます。アイテムの順次ナビゲーション順は変更されません。そのため、ユーザーがページ上のコンテンツをキーボードでタブキーで移動している場合、コンテンツ内をとても混乱した方法でジャンプしてしまう可能性があります。
-この記事中の例でタブ移動を試すことで、`order` がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。
+この記事中の例でタブ移動を試すと、 `order` がマウスのようなポインティングデバイスを使わないユーザーにおかしな体験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。
-- [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/)
+- [Flexbox and the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/) (tink.uk, 2016)
+- [HTML Source Order vs CSS Display Order](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html) (adrianroselli.com, 2015)
+- [The Responsive Order Conflict for Keyboard Focus](https://alastairc.uk/2017/06/the-responsive-order-conflict/) (alastairc.uk, 2017)
-## order の用途
+## `order` の用途
-フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば `order` プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。
+一部の用途では、論理的なフレックスアイテムの順序（したがって読み取り順）と視覚的な順序が異なることが有益な場合があります。気をつけて使えば `order` プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。
例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。
@@ -113,8 +212,59 @@ l10n:
表示上では日付が見出しの上に現れています。しかしスクリーンリーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを `order` プロパティで実現することができます。
-カードをフレックスコンテナーとして、 `flex-direction` を `column` に設定します。そして、日付は `order` を `-1` に設定します。これによって見出しの上に日付を引き上げることができます。
-
-{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}
-
-この例のような細かな調整は `order` プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして `order` プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチ画面ではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。
+カードをフレックスコンテナーとして、 `flex-direction` を `column` に設定します。そして、日付は `order` を `-1` に設定することで、見出しの上に配置します。
+
+```html live-sample___usecase-order
+One
+ Add more text to this box to make it grow
+ Three
has
extra
text
+ has
extra
text
Four
+ Five
+ Six
+ Seven
+ Eight
+ Nine
+ Ten
+
+
+```
+
+```css live-sample___usecase-order
+body {
+ font-family: sans-serif;
+}
+
+.wrapper {
+ display: flex;
+ flex: 1 1 200px;
+ gap: 1em;
+}
+
+.card {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ padding: 1em;
+ display: flex;
+ flex-direction: column;
+}
+
+.date {
+ order: -1;
+ text-align: right;
+}
+```
+
+{{EmbedLiveSample("usecase-order", "", "220px")}}
+
+この例のような細かな調整は `order` プロパティを使うのにふさわしい状況です。文書内の読み上げ順やタブ順と同じ論理順を維持し、最もアクセシビリティが高く構造化された方法で維持しましょう。そして `order` プロパティは純粋に視覚的なデザインの調整のために使いましょう。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチ画面ではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。
+
+## 関連情報
+
+- [フレックスボックスの概要](/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)
+- [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
+- [フレックスアイテムの折り返しをマスターする](/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)
+- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール
diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-card.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-card.png
new file mode 100644
index 0000000000000000000000000000000000000000..3bcd5c7ad52d6b395cc0677e03f62f5882ead260
GIT binary patch
literal 7043
zcmb7pbx<75xAx!?2niYp9w0#i0Ty?Mz~b&f7k7fYLqd=si!BbpVS(VmT^F}a2pV7s
z!Gd4j`@3(|_uc<)*YwPD&go~mPuI*dr)px=RTT*Fsqg^+AXHM6)dT>v@dvzxi}7&A
zCNci@aKW^d0!slvUE-sgcUTWLnun%>G*CT3z4u_?xhfiX006P)KOJq|hRz27FaUKG
zZMpmV`}C}QJ!4}u03f9#zq`A8mr#z}MVZH!J@D3dQECN;>pLi9f%eGEA^@-;hr$
+
+ ニュースアイテムのタイトル
+2017 年 11 月 1 日
+ ニュースアイテムのコンテンツです。とても価値のあるニュースです。
+
+
+もう一つのタイトル
+2017 年 11 月 6 日
+ ニュースアイテムのコンテンツです。とても価値のあるニュースです。
+-
+
- Page 1 +
- Page 2 +
- Page 3 はより長い +
- Page 4 +
+
+
+```
+
+```css live-sample___center
+.box {
+ height: 300px;
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.box div {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ background-color: rgb(96 139 168 / 0.2);
+ width: 100px;
+ height: 100px;
+}
+```
-{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}
+{{EmbedLiveSample("center", "", "320px")}}
-将来、ボックス配置の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナーを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナーをフレックスコンテナーとして扱ってフレックスコンテナーに `align-items` を指定するか、フレックスアイテム自身に `align-self` を指定してください。
+[CSS ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment)プロパティを使用すると、フレックスボックスを使用せずに、ある要素の内部で別の要素を垂直方向に中央揃えすることができます。例えば、ボックスからフレックスプロパティを除去し、 `align-content: center` を追加してみてください。次に、水平方向に中央揃えしたい要素に `margin: auto` を追加します。
## フッターが下端に張り付くカード
@@ -63,23 +196,101 @@ l10n:
-フレックスボックスはこれを解決できます。カード自身もフレックスコンテナーにして、 {{cssxref("flex-direction")}}`: column` を指定します。そしてカードの本文領域に `flex: 1` を指定します。これは `flex: 1 1 0` の一括指定です。アイテムは `0` の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文領域だけの場合、本文領域はフレックスコンテナー内の空間をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから `flex` プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。
+フレックスボックスはこれを解決できます。カード自身もフレックスコンテナーにして、 {{cssxref("flex-direction", "flex-direction: column")}} を指定します。そしてカードの本文領域に `flex: 1` を指定します。これは `flex: 1 1 0` の一括指定です。アイテムは `0` の `flex-basis` をもとに伸縮します。引き伸ばせるフレックスアイテムが本文領域だけの場合、本文領域はフレックスコンテナー内の空間をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから `flex` プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。
+
+```html live-sample___cards
+
+
+```
-{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}
+```css live-sample___cards
+body {
+ font-family: sans-serif;
+}
+.cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ grid-gap: 10px;
+}
+
+.card {
+ border: 2px solid rgb(96 139 168);
+ border-radius: 5px;
+ display: flex;
+ flex-direction: column;
+}
+
+.card .content {
+ padding: 10px;
+ flex: 1 1 auto;
+}
+
+.card footer {
+ background-color: rgb(96 139 168 / 0.2);
+ padding: 10px;
+}
+```
+
+{{EmbedLiveSample("cards", "", "280px")}}
## メディアオブジェクト
-メディアオブジェクトは、ウェブデザインでよく見られるパターンです。このパターンでは、画像やその他の要素が片側に、テキストが右側に配置されています。メディアオブジェクトは、反転させることができるのが理想です。すなわち、画像を左から右に移動することです。
+メディアオブジェクト（画像やその他のメディア要素に説明テキストが横に並んでいるもの）は、ウェブデザインでは一般的なパターンです。メディアオブジェクトは反転できるべきであり、画像をもう一方の端へと移動できるようにします。
+
+このパターンはコメントや、画像をその説明の隣に置く場所で使用されます。フレックスボックスを使用して、画像を含むメディアオブジェクトの一部が画像からサイズ情報を取得し、メディアオブジェクトのコンテンツが残りの空間を占めるように伸縮することができます。
+
+この例では、メディアオブジェクトは `flex-start` に配置され、 `.content` は伸長するように設定され、伸長係数は `1` に設定されています。これらのプロパティは、上記の列のレイアウトカードパターンで使用されているものと同じです。
+
+```html-nolint live-sample___media
+
+
+
+
+
+
+
+
+
+
+ + このカードにはより多くのコンテンツが格納されているため、カードが配置されているコンテナーの高さを定義することになります。カードをグリッドレイアウトで配置したので、カードそのものは同じ高さまで引き伸ばされます。 +
+
+
+```
+
+```css live-sample___media
+img {
+ max-width: 100%;
+ display: block;
+}
-このパターンは、コメント欄をはじめ、画像や説明を表示する必要がある場所でよく見られます。フレックスボックスを使用すると、画像を含むメディアオブジェクトの部分が画像から大きさを取得し、メディアオブジェクトの本文が残りの空間を確保するように拡大縮小します。
+.media {
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ align-items: flex-start;
+}
-下のライブ例では、メディアオブジェクトが表示されています。配置プロパティを使用して、横軸のアイテムを `flex-start` に揃え、`.content` のフレックスアイテムを `flex: 1` に設定しています。前述のカラムレイアウトカードのパターンと同様に、`flex: 1` を使用することで、カードのこの部分を伸長させることができます。
+.media .content {
+ flex: 1;
+ padding: 10px;
+}
+```
-{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}
+{{EmbedLiveSample("media", "", "320px")}}
-このライブ例では、デザインの中でメディアオブジェクトを制約するさまざまな方法を試してみることができます。
+このライブサンプルでは、デザインの中でメディアオブジェクトを制約するさまざまな方法を試してみることができます。
-画像が大きくなりすぎるのを防ぐには、 {{cssxref("max-width")}} を画像に指定します。画像領域のフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では `flex-basis` は auto なので、画像の {{cssxref("width")}} や max-width が `flex-basis` となります。
+画像が大きくなりすぎるのを防ぐために、 {{cssxref("max-width")}} を画像に指定してください。画像領域のフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では `flex-basis` は auto なので、画像の {{cssxref("width")}} や `max-width` が `flex-basis` となります。
```css
.image img {
@@ -87,7 +298,7 @@ l10n:
}
```
-両方の領域の比率を維持したまま伸縮させることもできます。両者に `flex: 1` を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。内容物を元に、両方とも `flex: auto` に設定すると、内容物の寸法や、画像の幅などフレックスアイテムに直接適用される大きさに合わせて拡大縮小することができます。
+両方の領域の比率を維持したまま伸縮させることもできます。両者に `flex: 1` を指定すると、`0` の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。内容物を元に、両方とも `flex: auto` に設定すると、内容物の寸法や、画像の `width` などフレックスアイテムに直接適用される大きさに合わせて伸縮することができます。
```css
.media .content {
@@ -113,27 +324,98 @@ l10n:
}
```
-### メディアオブジェクトを反転させる
+### メディアオブジェクトの反転
+
+画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、`flex-direction` プロパティに `row-reverse` を指定します。
+
+この例では、 `flipped` クラスを `media` クラスの隣に追加しました。 HTML からクラスを除去すると、表示がどのように変化するかが分かります。
+
+```html-nolint live-sample___media-flipped
+
+ 
+
+
+
+ これはメディアオブジェクトのコンテンツです。フレックスコンテナー内に直接配置されたアイテムは、 flex-start に配置されます。
+
+
+
+```
+
+```css live-sample___media-flipped
+img {
+ max-width: 100%;
+ display: block;
+}
+
+.media {
+ border: 2px dotted rgb(96 139 168);
+ display: flex;
+ align-items: flex-start;
+}
-画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、`flex-direction` プロパティに `row-reverse` を指定します。下記のライブサンプルでは、`flipped` のクラスを `.media` の隣に追加することで実現しています。 HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。
+.flipped {
+ flex-direction: row-reverse;
+}
+
+.media .content {
+ flex: 1;
+ padding: 10px;
+}
+```
-{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}
+{{EmbedLiveSample("media-flipped", "", "320px")}}
## フォームコントロール
-フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはたくさんのマークアップや小さな要素があり、それらを配置したいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。
+フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはいくつもの小さな要素があり、それらを互いに整列したいと考えるはずです。よくあるパターンは {{htmlelement("label")}} と {{htmlelement("input")}} の組みと、さらに {{htmlelement("button")}} との組み合わせで、おそらく検索フォームやメールマガジンの登録フォームなどの、来訪者がメールアドレスを入力する局面などで使用されます。
+
+フレックスボックスならばこのようなレイアウトを簡単に実現できます。 `
+
+
+
+
+ これはメディアオブジェクトのコンテンツです。フレックスコンテナー内に直接配置されたアイテムは、 flex-start に配置されます。
+
+