中くらいの幅から手をつける

01 / 05

いちどにスマホまで飛ばない

下地は広い画面用にできている。ここからスマホ幅まで直すんだけど、一気に飛ばさない。

広い → 中くらい → せまい、と段の順に降りていく。1段ずつなら、どこで崩れたかがすぐ分かるんだ。

02 / 05

タブレットを横に持つと 1000px くらい、たてに持つと 600px くらい。ちょうど中間の幅だね。

この章では「700px 以下」を中くらいの幅として扱う。3列のままでは細いけれど、1列にするほどでもない幅だよ。

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

03 / 05

中くらいの幅でやることはこれだけ。カードの幅を 30% から 45% へ 広げると、1行に2枚しか入らなくなって自然に2列になる。

display はさわらない。inline-block のままなら、入りきらないカードは次の行へこぼれるからね。

04 / 05

幅がせまくなるほど、大きな余白は場所を食う。帯の上下を少し詰めておこう。

中くらいの幅で書くのは、だいたい「列の数」と「余白」の2つ。細かい仕上げはもっとせまい幅でやるよ。

@media (max-width: 700px) {  .events {    padding: 20px 0;  }}

05 / 05

このレッスンの判定は幅 600pxで見る。3列が2列になっていて、まだ1列にはなっていない状態だよ。

ここから書いてみよう。