メディアクエリ

画面幅で CSS を切り替える

viewport を入れたので、ブラウザは本当の画面幅を教えてくれるようになりました。次は、その幅によって別の CSS を当てます。使うのがメディアクエリです。

@media のうしろの丸かっこが条件です。min-width: 600px は「画面幅が 600px 以上のとき」という意味で、中の指定は条件に合うときだけ効きます。合わないときは書いていないのと同じあつかいになります。この切り替えの境目を、ブレークポイントと呼びます。

せまいほうを土台にする

作品ギャラリーはいま 3 列で固定です。スマホでは 1 枚が 100px ほどになり、文字がつぶれてしまいます。そこで、ふだんの指定を 1 列にして、3 列は 600px 以上のときだけ足します。

1 列のときは 2 マス結合も意味がないので、.work-card:first-child の指定はいったん外します。広い画面用に戻すのは、この章の最後の回です。

書くこと

.work-list を grid-template-columns: 1fr の 1 列にし、grid-auto-rows と .work-card:first-child を土台から外します。そしてファイルのいちばん下にメディアクエリを足し、その中に 3 列の指定と grid-auto-rows を書きます。body の余白も、ふだんは 16px、600px 以上では 24px に分けます。

1. .work-list を grid-template-columns: 1fr の 1 列にし、grid-auto-rows と .work-card:first-child を土台から外す
2. ファイルの末尾に @media (min-width: 600px) を足し、その中に 3 列の指定と grid-auto-rows を書く
3. body の余白を土台では 16px にし、メディアクエリの中で 24px にする