こんにちは、けいすけです。
webサイトを作っていると、横方向に並んでいる要素のうち、左側ではなく、右側に見出しとなる要素を表示することがあると思います。
単純に、ソース上でも表示されている順番に記述していけば実現できますが、やはり、見出しは、最初に記述したほうが良いでしょう。
また、タブレットやPCで、横方向に並んで表示されていたときに右側に合った要素が、スマホで、縦一列の表示となった際に、一番上にくるなんてこともあります。
今回紹介するのは、そのような”display: flex”で並べられた要素に対して、表示する順番を入れ替える方法になります。
目次 [表示する]
“flex-direction”を指定する方法
flex-direction: row;
“flex-direction”は、その名の通り、要素を並べる方向を指定するプロパティです。
縦横4方向の以下の値を指定できます。
- row： “flex-direction”の初期値。左から右へ横方向に要素を並べます。
- column： 上から下へ縦方向に要素を並べます。
- row-reverse： rowの反対方向。右から左へ横方向に要素を並べます。
- column-reverse： columnの反対方向。下から上に要素を並べます。
ちなみに、要素の配置を設定するための”justify-content”や、”align-items”というプロパティがありますが、これらはそれぞれ、「要素が並んでいる方向」と、「要素が並んでいる方向と交差する方向」に沿って、要素の配置を設定するためのものです。
そのため、”justify-content”や、”align-items”を使用する際は、”flex-direction”で設定した方向によって、適宜、使い方を変える必要があります。
“order”を指定する方法
.box1 {
order: 1;
}
.box2 {
order: 2;
}
.box3 {
order: 3;
}
“order”は、要素の一つ一つに対して、表示する順番を指定できるプロパティです。
そのため、”flex-direction”で方向を指定する方法よりも、自由に順番を入れ替えることが可能になります。
“order”には、正または負の値を設定でき、その値が小さい順に表示されます。
要素の”order”の初期値は、0のため、-1を設定すれば、その要素が一番最初に表示されることになります。
“flex-direction”や、”order”で表示する順番を入れ替えるときは、次の通り考慮すべき事項があります。
order プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。
引用：CSS: カスケーディングスタイルシート | MDN
読み上げソフトの利用者を混乱させないために、見出しの表示位置を変えるときは、見出しとコンテンツの違いをはっきりさせるなどの工夫が必要になってきます。
