せまいときだけ効くCSSを書く

01 / 06

ふつうのルールは幅を選べない

.card { padding: 24px; } と書いたら、それはどんな画面でも 24px。

「広いときは 24px、せまいときは 10px」と言い分けたい。そのためのしくみがこのレッスンの主役だよ。

02 / 06

CSS のルールを @media (...) の枠でかこむと、条件に合うときだけ読まれるルールになる。

枠の中身はふつうのルールとまったく同じ書き方。ぜんたいが1つ深くなるだけだよ。

@media (max-width: 700px) {  .card {    padding: 10px;  }}

03 / 06

max-width: 700px は「画面の幅が 700px 以下のとき」という条件。700px ちょうども入るよ。

スマホ（375px くらい）もタブレット（600px くらい）もこの条件に合う。逆に 1200px の画面では枠の中は読まれない。

@media (max-width: 700px) {  .lead {    color: #d9822b;  }}

04 / 06

同じ強さのルールが2つあるとき、あとに書いたほうが勝つ。これは前に習ったとおり。

だから @media の枠は、ふつうのルールを全部書いたあと、CSS のいちばん下に置く。上に書くと下のふつうのルールに負けて、何も起きなくなってしまう。

.card {  padding: 24px;}@media (max-width: 700px) {  .card {    padding: 10px;  }}

05 / 06

700px のような切り替えの境目をブレークポイント（切り替え点）と呼ぶ。

決め方はかんたん。プレビューの幅をだんだん狭めて、形が崩れはじめた幅をそのまま境目にすればいい。「機種に合わせる」のではなく「崩れに合わせる」んだ。

06 / 06

演習では、せまいときだけ色や余白が変わるCSSを書く。判定はせまい幅で見るものと広い幅で見るものが混ざっているから、問題文をよく読んでね。

ここから書いてみよう。