何をする書き方？
メディアクエリーは条件に合うときだけCSSを適用します。小さい画面で1列、広い画面で3列、と切り替えられます。HTMLのheadにはviewportのmetaも設定しておきます。
基本の形
@media (min-width: 768px) {
/* 広い画面の設定 */
}@media条件付きのスタイル。min-width指定幅以上で適用。viewport携帯端末で画面幅を正しく扱う設定。短い例で確かめる
style.css
p { font-size: 20px; }
@media (max-width: 600px) {
p { font-size: 16px; }
}結果
画面幅600px以下で文字が16pxになります。
準備・実行方法を確認する
HTMLのheadに <link rel="stylesheet" href="style.css"> を入れ、同じフォルダーにstyle.cssを作ります。HTMLをブラウザーで開き、保存後に再読み込みして確認します。
もう少し詳しいコードを見る
style.css
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}結果
768px未満では1列、768px以上では3列に切り替わります。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「画面幅に合わせる」の書き方はどれ？
少し変えてみよう
ブラウザーの幅を少しずつ狭めて、列数が変わる位置を確かめましょう。
つまずいたら、ここを確認
viewportは <meta name="viewport" content="width=device-width, initial-scale=1"> と書きます。ズームは禁止しないでください。
自分の言葉でメモ
記録はこのブラウザーに保存されます。