メディアクエリ
画面幅で CSS を切り替える
viewport を入れたので、ブラウザは本当の画面幅を教えてくれるようになりました。次は、その幅によって別の CSS を当てます。使うのがメディアクエリです。
@media (min-width: 600px) {
.work-list {
grid-template-columns: repeat(3, 1fr);
}
}@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 に分けます。
課題
.work-listをgrid-template-columns: 1frの 1 列にし、grid-auto-rowsと.work-card:first-childを土台から外す- ファイルの末尾に
@media (min-width: 600px)を足し、その中に 3 列の指定とgrid-auto-rowsを書く bodyの余白を土台では 16px にし、メディアクエリの中で 24px にする