こんにちは、yutaです。
WEB制作の勉強をしているとレスポンシブ対応の際に、PCとスマホでカラムの表示順を変えたいんだけどどうしたらいいのかな？と思ったことはありませんか。
PCサイトではよく2カラムや3カラムのブログや情報サイトなどをたくさん見かけますよね。HTMLでは、通常上に記述された要素(ex:カラム)から表示されます。↓画像で言えば、HTML文書には「サイドバー1→メインコンテンツ→サイドバー2」の順番で記述されています。
これをBootstrapなどを使ってスマホで見たときにコンテンツを縦並びにすると↓のようにサイドバー1が一番上に表示されます。
でも、実際にはサイドバー1よりもメインコンテンツを一番上に表示させたいですよね。実は、Flexboxのorder指定をすることでカラムの表示順を変更することができます。
1.HTMLはモバイル表示順で記述
2.CSSにメディアクエリを追加
3.参考:コード
1.HTMLはモバイル表示順で記述
まずコーディングする上での注意点ですが、HTMLはモバイル表示時の順番で要素を記述してください。今回の場合は、上から順に、「メインコンテンツ→サイドバー1→サイドバー2」です。
それから、flexboxを使うために、これらのコンテンツ全体を<div>で囲んでください。
HTMLは↓のようになります。
2.CSSにメディアクエリを追記
現状では、要素がモバイル表示時の並びになっているので、PC表示時にカラムの並び順を変えるための記述をCSSで記述していきます。
メディアクエリ
メディアクエリとは、画面サイズによって効かせるCSSを変更できる機能のことです。記述の仕方は↓のようになります。
@media screen and (min-width: ○px){ 効かせるCSSを記述 }
※○px以上の画面幅で{}内のCSSが有効になるという意味
flexbox
ここからはメディアクエリの{}内に記述していきます。まずはflexboxを有効化して要素を横並びにします。
.flex{
display: flex;
flex-direction: row;
}ここが一番重要なポイントですが、各要素にorderを指定します。(orderはflexboxでしか利用できません。)
orderを指定することで、flexbox内にある要素の並び順を好きなように変えることができます。
.MainContent{order: 2;}
.Sidebar1{order: 1;}
.Sidebar2{order: 3;}↑のコードを見ると、Sidebar1のorderが1になっていますよね。これはつまり、Sidebar1を一番最初に表示するということですが、今回flexboxで(左から)横並びに指定しているのでSidebar1は画面の左側に表示されることになります。
ただし、現状では各要素の幅を指定しておらず、画面いっぱいに要素が広がってしまいうまく横並びになりませんので、最後に各要素の幅指定を行います。
.MainContent{width: 60%;}
.Sidebar1, .Sidebar2{width: 20%;}メインコンテンツがブラウザの画面幅の60%、サイドバー1と2がそれぞれ20%で合計100%なので、ちょうど3つの要素が横並びで入りますね。
これでPCとスマホでカラムの表示順が変わるレスポンシブ対応ができました。実際にブラウザで開いて見ると↓のようになります。
PC表示のときは画面両端にサイドバー、スマホ表示のときは最上部にメインコンテンツが表示できていますね！
3.参考:コード
今回のコードを公開します。HTMLは1から変更していないのでそちらを参照してください。
今回は以上となります。ブログランキングに参加していますので↓のバナーをクリックしていただけると嬉しいです。では、また！
