Flexboxのorderは見た目だけを並べ替え本文と操作の順番を変えない

Flexboxのorderは、画面に並ぶ順番を変えるpropertyです。スマホでは画像を先に見せ、desktopでは本文の横へ置く、といったlayoutに使えます。ただし、見出し、説明、buttonの意味上の順番までCSSだけで入れ替えないでください。

画面で先に見えることと、HTMLに書かれた順番は同じとは限りません。見た目の都合でbuttonを前へ出しても、説明を読む前に申し込ませる構成になるなら、pageの目的を損ねます。

orderは視覚上の順番を変える

CSS Flexible Box Layout Module Level 1は、Flexboxのitemをstyle layerで並べ替えられ、視覚上の順番がsourceやspeechの順番と独立しうることを説明しています。仕様の例でも、HTMLではtitle、description、imageの順に置き、orderで画像を視覚上の先頭へ動かしています。

このため、画面で画像が先に見えるからといって、HTMLも画像を先に置く必要はありません。記事の題名と説明を先に読ませたいなら、HTMLでは題名、説明、画像の順にします。desktopでは画像を左へ動かし、文章を右へ置いても、狭い画面で上から読んだときに題名から意味を追えます。画面の構図と、内容を理解する順序を一つの問題にしません。

orderを使う前に、なぜ並べ替えたいのかを一文で書きます。「写真を先に見せたい」のように視覚上の理由なら、画像だけを動かす候補になります。「先に申し込ませたい」のように内容を読む順番を変える理由なら、CSSではなく文章とHTMLの構造を見直します。見た目を変えるpropertyへ、事業上の説明不足を補わせないことが大切です。

つまり、orderは文章の構造を組み替えるpropertyではありません。HTMLには、読んだときに意味が通る順番を置き、画面のlayoutだけを必要な範囲で変えます。

たとえばservice紹介で、desktopでは写真を左、本文を右に置くことがあります。このとき本文のHTMLを、写真のあとに題名、説明、条件、buttonと続ければ、画面を縦に並べたときも自然に読めます。写真を先に置きたいからといって、buttonを説明より先へ動かす必要はありません。画像の位置は変えても、申し込む判断に必要な条件まで移動しないようにします。

mobileとdesktopを同じ順番で読む

responsive designでは、横幅に合わせてitemを横並びから縦並びへ変えます。このとき、desktopの二列表示だけを見てorderを決めると、mobileで見出しと説明が離れたり、buttonだけが先に現れたりします。

mobileでは一画面に見える量が少ないため、順番のずれが大きく見えます。desktopでは画像と説明が横に並んでいても、mobileでは画像の後に別のsectionが入り、説明が画面の下へ追いやられることがあります。利用者が画像を見たあとに何を読むのか、条件を読んだあとにどのbuttonを押すのかを、縦に並んだ画面で確認します。二列の見た目が整っていることだけでは、mobileの操作順は分かりません。

keyboardで確認するのは、画面上の見え方と操作が大きく食い違わないかを見るためです。画面では下に見えるlinkへ先に移動したり、説明より先にbuttonへ移動したりすれば、操作する人は今どこにいるかをつかみにくくなります。すべてを同じ順番に見せる必要はありませんが、重要な説明と操作が離れすぎるなら、orderを減らすかHTMLを直します。

1. HTMLを、見出し、説明、条件、buttonの順に書く。
2. desktopで横並びにしたいitemだけをFlexboxへ入れる。
3. orderを指定したら、desktopとmobileで表示順を読む。
4. keyboardでlinkとbuttonへ移動し、画面上の移動と意味が大きくずれないかを見る。
5. 見た目を整えるためだけに本文の順番を変えていないかを確認する。

画像を先頭へ動かすことはできます。しかし、料金や納期の説明をbuttonより後ろへ追いやると、利用者は条件を知らないまま操作します。layoutを依頼する場合も、design dataだけでなく、HTMLに置く文章の順番を確認します。

確認用には、実際の長さの文章を入れます。短い仮文だけで二列を組むと、長い商品名、複数行の条件、リンクの多い説明を入れたときの順番が分かりません。画像の高さが変わった場合、文章が折り返した場合、buttonが二行になった場合に、どのitemがどこへ動くかを見ます。見本の画面だけで決めると、公開後の内容で順序が崩れます。

CSSを増やす前にHTMLを直す

HTMLの順番そのものが読みにくいなら、orderで隠さずHTMLを直します。逆に、文章の順番が自然で、画面の幅だけが問題ならFlexboxを使います。手段を選ぶ順番を逆にしないでください。

CSSを切った状態で読む確認には、二つの意味があります。一つは、styleが読み込まれない場面でも内容の順が通るかを見ることです。もう一つは、どの要素を動かしているかを忘れずに確認することです。CSSを外して題名、説明、条件、buttonの順に読めるなら、orderは画面を整える役割に留まっています。CSSを外すとbuttonが説明より先に現れるなら、HTMLの順番を直す方が先です。

制作を委託する場合は、design dataに見える並びだけで承認しません。desktop、mobile、CSSを切った状態、keyboardで移動した状態を確認し、HTMLに置く順番を受け取ります。担当者が交代して画像や本文を増やしたとき、orderの意図が分からなければ、見た目を直すつもりで意味の順番を崩します。どのitemを動かすための指定かをCSSと手順書へ残します。

最初の一手は、orderを使うsectionを一つ選び、CSSを切った状態で上から読むことです。そこで意味が通らないなら、先にHTMLの構造を直します。