スマホ幅で縦に積む

01 / 05

2列でも細すぎる幅がある

中くらいの幅で2列にしたけれど、375px の画面ではどうだろう。1枚あたり 160px ほどしかない。

見出しが2行に折り返し、日付が切れて、指で押す面積も小さい。ここは1列にする段だよ。

02 / 05

@media (max-width: 480px) の枠を、タブレット用の枠の下に足す。

375px はどちらの条件にも合うから、あとに書いたスマホ用が勝つ。段を降りるたびに枠を下へ足していく、これが書き方の型だよ。

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

03 / 05

1列にするのはこの2行。display: block; で1つで1行を使うようにして、width: 100%; で入れ物いっぱいに広げる。

下地で box-sizing: border-box; を書いてあるから、余白があっても 100% でぴったり収まるよ。

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

04 / 05

横に並んでいたときのすきまは左右にあった。たてに積んだら、必要なのは下のすきまだよ。

margin: 0 0 12px; のように下だけ空ける。向きが変わることに気づけると、積み替えたあとの見た目が急にきれいになる。

.card {  margin: 0 0 12px;}

05 / 05

このレッスンの判定は幅 375pxで見る。カードが1枚ずつ縦に並んだ状態だよ。

ここから書いてみよう。