幅ごとに並びを切り替える

01 / 05

色より大きな変化をつける

@media で変えられるのは色や余白だけじゃない。並び方も変えられる。

「広い画面では横に3枚、せまい画面ではたてに1枚ずつ」——これができると、ページはぐっとスマホらしくなるよ。

02 / 05

横に並べる形は前に組んだとおり。display: inline-block; で文字と同じあつかいにして、幅を割合で決める。

3枚並べたいなら1枚 30% くらい。すきまのぶん、ぴったり 33% にはしないよ。

.card {  display: inline-block;  width: 30%;}

03 / 05

display: block; に戻すと、要素は1つで1行を使う。横に並ばず、上から順に積まれる。

そこへ width: 100%; を足せば、外の箱いっぱいの1列になる。この2行が「たてに積む」の中身だよ。

@media (max-width: 700px) {  .card {    display: block;    width: 100%;  }}

04 / 05

枠の中に書くのは display と width の2行だけ。色・余白・文字の大きさは上のルールがそのまま残る。

書き直す量が少ないほど、直すときのまちがいも減る。「せまいときの差分だけを書く」と覚えよう。

05 / 05

演習では、広い幅で並べてから、せまい幅で積み替える。判定を広い幅で見る問題とせまい幅で見る問題があるから、どちらの形を作るのか確かめてね。

ここから書いてみよう。