今回はレスポンシブデザインを作成する際に、避けては通れない、２カラムを１カラムにする方法を紹介します。
よくあるパターンです。
PC表示で写真とテキストが横並びになっているレイアウトを、
スマホ表示になると、写真とテキストが縦並びになるやつです。
さっそくコードを見ていきましょう。
コード
ＰＣサイズ
See the Pen
2column by t.h (@tomtom15)
on CodePen.
*親要素に「flex」を設定し、子要素の「div」を横並びにして２カラムにします。
スマホサイズ
See the Pen
1column by t.h (@tomtom15)
on CodePen.
ポイントは flex-direction: column; です。
これで１カラムになります。
※メディアクエリの表記は省略します。
順番を逆にできる
See the Pen
column-reverse by t.h (@tomtom15)
on CodePen.
ちなみに、順番を逆にしたいな、というときは、
flex-direction: column-reverse;
これで順番が逆になります。
カラムのレイアウト方法は他にもいろいろあるので、詳しく知りたい方はこちらもどうぞ。
https://kiyoblog.org/css-flex/
flex時に要素の割合を変える方法も紹介しておきます↓ 続きを見る
【CSS】flexを使った２カラムのレイアウト方法 とっても簡単です