【CSS】画像とテキストをレスポンシブでPCで左右交互にスマホで上下にレイアウト【メモ】

今回の記事は、前回の記事の続きになります。
レスポンシブサイトでよく見かける画像とテキストを左右交互に、スマホで上下に配置してくレイアウトをflexboxを利用して実装する方法の個人的メモ。
ようやく最近使用するようになったflexboxの学習用メモです。

前回の記事の内容を応用して、実際に実装したい画像とテキストをレスポンシブでPCで左右交互にスマホで上下にレイアウトしていきたいと思います。

前回記事
【CSS】flexboxで画像とテキストを横並び、縦並びにレイアウト【メモ】

実装したいレイアウト
PCファースト版
モバイルファースト版
アレンジ（背景色付き版）
補足
あとがき

実装したいレイアウト

ソースの記述の順番は同じでもPCでは、画像とテキストを左右交互に表示する。スマホでは、写真とテキストの並びを同じするレイアウトをするための覚書になります。

言葉だけだとわかりづらいので、実際にやりたいことを画像にしたものが下記になります。

上記の画像のようなレイアウトを、出来るだけソースをシンプルに実装出来ればということです。

flexboxで画像とテキストを横に並べて左右交互に表示し、スマホでは上下に並べる【PCファースト版】

ニワカ個人的には、PCからのコーディングが先の機会が多いのでまずはPC優先でのコーディング例を作成していきます。

前回の画像とテキストを横に並べて交互に表示したソースをベースに、スマホでは画像とテキストが上下に並ぶようにCSSを追加していきます。

実装例

例は768px以下で画像とテキストが上下に並ぶように設定しています。
レスポンシブの変化を見たい場合は右上のCodepenの箇所を押して大きな画面で確認してください。

See the Pen flexboxで画像とテキストを横並びに交互に、スマホで上下にレイアウト【PCファースト版】 by niwaka-web (@niwaka-web) on CodePen.

css例

@media (min-width:768px) {
  .box {
    flex-direction: column;
  }
  .box:nth-child(even) {
    flex-direction: column;
  }
}

htmlは、前回と同様に同じソースの繰り返しなので省略。
cssは重要な部分のみ掲載しています。
スマホで上下に並べるため、親要素にflex-direction: column;を指定する。flex-directionは初期値はrowなので指定をしないと上下には並びません。

PCでは、交互に表示するため、偶数のまとまりにはflex-direction: row-reverse;を指定しているので、こちらを上書きしないと偶数のまとまりが上下に並びませんので、.box:nth-child(even)にもflex-direction: column;を指定して上下に並ぶようにします。

基本的には、以上です。
他は調整として、テキストや画像が中央寄せになるように、余白の調整などをCSSで調整しています。

flexboxで画像とテキストをスマホでは上下に並べ、PCでは横に並べて左右交互に表示する【モバイルファースト版】

まだ、全く慣れないモバイルファースト用の書き方も覚書として書いておきます。

スマホで画像とテキストを上下に並べたものを、PCで横に並べて左右交互に表示していく形になります。

前回の画像とテキストをソースの順番通りに上下に並べて表示したソースをベースに、PCでは横に並べて左右交互に表示になるようにCSSを追加していきます。

実装例

例は768px以上で画像とテキストを横に並べて左右交互に表示になるように設定しています。
レスポンシブの変化を見たい場合は右上のCodepenの箇所を押して大きな画面で確認してください。

See the Pen flexboxで画像とテキストをスマホで上下に、PCでは横並びに交互にレイアウト【モバイルファースト版】 by niwaka-web (@niwaka-web) on CodePen.

css例

@media (min-width:768px) {
  .box {
    flex-direction: row;
    justify-content: space-between;
  }
  .box:nth-child(even) {
    flex-direction: row-reverse;
  }
}

htmlは、前回と同様に同じソースの繰り返しなので省略。
cssは重要な部分のみ掲載しています。
PCで画像とテキストを左右に並べるため、親要素にflex-direction: row;を指定する。
スマホ用にflex-direction: column;を指定しているので上書きして横並びにさせます。

そのままだと同じレイアウトが続いてしまうので、今回実装したい交互に表示するため、偶数のまとまりにはflex-direction: row-reverse;を指定して交互に並ぶようにします。

基本的には、以上です。
他は調整として、要素の端寄せにjustify-content: space-between;を指定したり、余白やテキストの位置などをCSSで調整しています。

背景にも交互に色をつけるアレンジ版

実際のサイトで使用する際は、まとまりごとに交互に背景色を入れていくことも多いので、背景色を交互に入れたバージョン実装例もおいておきます。ベースは、モバイルファースト版を調整したものになります。

See the Pen flexboxで画像とテキストをスマホで上下に、PCでは横並びに交互にレイアウト【背景色追加版】 by niwaka-web (@niwaka-web) on CodePen.

補足

画像とテキストをソースと逆に表示したい場合は、flex-direction: column;をflex-direction: column-reverse;に変更するなど調整していけば出来ていくので省略してます。

あとがき

htmlのソースはシンプルに出来ましたが、CSSはもう少し簡潔にできるのではないかと思いましたが、ニワカなオイラにはわからんとです。。。
他の人が読んでわかるように簡潔には書けなかった気がしますが、個人的メモとして公開しました。
久しぶりに記事を書きましたが、他の人はどうやって書いているのだろうと思うほど時間掛かりました。。。