スマホとPCで要素の表示順番を入れ替えるには？flexbox「order」を使ってレスポンシブデザインに最適化！

レスポンシブデザインを簡単に説明すると、１つのHTMLを使って、スマホ版やPC版など画面サイズによってデザインを切り替えることを指します。

ですので、レスポンシブデザインで制作していく上で
HTMLの構造は変えたくないけど、見栄えの表示したい順番は変えたい・・・
ということが起こります。

今回は１つのHTMLで、表示順を入れ替える方法をご紹介します。

f:id:misallychan:20180525100439j:plain

レスポンシブで要素の表示順番を入れ替えたい時って？
- A.こうしたい
- B.でもこうなる
HTMLをいじる必要なし！CSSだけで表示順番の調整が可能！！
- orderで順番を指定
レスポンシブデザインあれこれ

レスポンシブで要素の表示順番を入れ替えたい時って？

例えば
PC表示では「左右・右左」で「画像文字・文字画像」と表示しているとします。
それをスマホでは縦に「上下・上下」で「画像文字・画像文字」と表示させたい。

でも、何もしないままだとHTML上での順番ままに表示されるので、スマホでも「画像文字・文字画像」となってしまいます。

こんな感じです。

A.こうしたい

f:id:misallychan:20180516154353p:plain

B.でもこうなる

f:id:misallychan:20180516154356p:plain
こうなる。

今回は、このAの状態にする方法をご紹介します。

HTMLをいじる必要なし！CSSだけで表示順番の調整が可能！！

普通にPC用に書いていくと・・・
スマホ表示で１列にするときに「上下・上下」にしたいのに「上下・下上」という表示になってしまいます。
それをCSSだけでどう調整できるか？というお話ですが…

orderで順番を指定

flex-boxで解決します！！

親要素

.box{
 display: flex;
}
@media screen and (max-width: 768px) {
 .box{
  flex-direction: column;
 }
}

flex-directionプロパティは値によって横並びにしたり逆順にしたりできます。
今回、スマホでは縦一列に並べたいので、768px以下の場合は親要素にflex-direction: column;を追加しましょう。

子要素

order: 数字;で順番を指定します。
order用のclassを作っておくと便利だそうです。
参考：【Flexbox】並び順を指定するflexboxのプロパティ – Snaplog

例えば768px以下のスマホでのみ、orderを対応させたい場合

@media screen and (max-width: 768px) {
.order1 {
  order: 1;
}
.order2 {
  order: 2;
}
.order3 {
  order: 3;
}
.order4 {
  order: 4;
}
.order5 {
  order: 5;
}
}

このようにmediaクエリも利用すると、スマホでのみ順番を変えることができます。

htmlの例

HTMLでは子要素にそれぞれ表示したいclassを追加してあげてください。

<div class="box">
  <div class="set">
    <div class="img left order1"><img src="image.png"></img></div>
    <div class="text right order2">テキストテキスト</div>
  </div>
  <div class="set">
    <div class="text left order4">テキストテキスト</div>
    <div class="img right order3"><img src="image.png"></img></div>
  </div>
</div>