CSS WEB制作

【flex】レスポンシブデザインで要素の並び順や幅の指定を自由自在に

from-2column-to- 1column

今回はflexを使用したレスポンシブデザインのよくあるパターンを紹介します。

この記事でわかること

  • 2カラム(PC)から1カラム(スマホ)に変更する
  • 2カラムから1カラムに変更するとき、要素の順番を逆にする
  • 2カラムそれぞれの幅(widtf)を指定できる

 

2カラム(PC)から1カラム(スマホ)に変更

写真とテキストを組み合わせた、よく見かける2カラムのパターンです。

PCサイズ

See the Pen
2column
by t.h (@tomtom15)
on CodePen.


*親要素に「flex」を設定し、子要素の「div」を横並びにして2カラムにします。

 

 

スマホサイズ

See the Pen
1column
by t.h (@tomtom15)
on CodePen.

ポイントは flex-direction: column;  です。
これで1カラムになります。

 

※メディアクエリの表記方法は省略しておりますので、知りたい方はこちらをどうぞ。

準備
【レスポンシブデザイン】ビューポート設定とメディアクエリの書き方

続きを見る

 

 

 

1カラム時の順番を逆にする

See the Pen
column-reverse
by t.h (@tomtom15)
on CodePen.

スマホ表示にしたとき、要素の順番を逆にしたい、というときは、

flex-direction: column-reverse;  
を設定してくだしてください。

これで順番が逆になります。

 

要素の幅(width)を指定

2カラムのレイアウトでは、それぞれのカラムの幅(width)を指定できます。

左右ともに50%

See the Pen
flex-2columns
by t.h (@tomtom15)
on CodePen.

「flex」で、子要素のdivを横並びにします。
そして、左右のdivのwidthを両方50%にすれば、左右均等の2カラムが完成します。

 

 

比率を変えてみよう

割合を 6:4 や 7:3 などにしたい場合は、左右合わせて100%になるように数値を設定すればOKです。

【例:左60% 右40%】

See the Pen
flex-2columns_6:4
by t.h (@tomtom15)
on CodePen.

 

なぜ「px(ピクセル)」ではなく「%」にしたかというと、pxだと絶対値なので、幅が固定されてしまうからです。

%にすると、「親要素の幅に対して○○%のwidth」となるので、レスポンシブデザインに対応しやすいです。

 

ちなみに、スマホ時の要素の幅を「width:100%;」に指定すれば、スマホ時は画面横いっぱいに要素が広がります。

 

まとめ

いかがでしたでしょうか。

  • 2カラムから1カラムに変更する
  • 1カラムにするときに順番を変更できる
  • 要素の幅を指定できる

これさえ抑えておけば、flexもレスポンシブデザインも基本はバッチリです。

それではまたお会いしましょう。

 

gridで要素を並べる方法もありますので参考までにどうぞ。

grid
【CSS】display: grid; を使って、簡単にグリッドを実装しよう

続きを見る

 

-CSS, WEB制作
-, ,

© 2024 人生フリーハンド Powered by AFFINGER5