女性向けエンジニアスクール
3秒でわかる
画面幅や向きなどの条件に合ったときだけCSSを適用する仕組み。1枚のスタイルシートでスマホと PC の見た目を作り分けるために使います。
もう少し詳しく
どういうものか
メディアクエリは、表示している環境が特定の条件を満たしたときだけ CSS を適用する仕組みです。@media から始まるブロックの中にスタイルを書くと、その条件が成立している間だけ中身が有効になります。条件に使えるのは画面幅（width）、高さ、向き（orientation）、色数、ダークモードの好み（prefers-color-scheme）などです。
条件を切り替える幅の値をブレークポイントと呼びます。多くのサイトは 768px 前後と 1024px 前後にブレークポイントを置き、スマートフォン、タブレット、デスクトップの3段階で組んでいます。
なぜ必要か
同じ HTML を、幅 375px のスマートフォンと幅 1920px のモニタの両方で読みやすく見せる必要があります。端末ごとに別ページを用意すると、更新のたびに2箇所直すことになり、URL も分かれて検索エンジンから見た評価も割れます。1枚の HTML に条件つきのスタイルを重ねる形なら、内容はひとつのまま見た目だけを切り替えられます。
具体例
/* 既定はスマートフォン向けの1<a href="/glossary/column" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">カラム</a> */
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* 幅が 768px 以上になったら2カラム */
@media (min-width: 768px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
/* 幅が 1200px 以上なら3カラム */
@media (min-width: 1200px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}
/* 端末がダークモード設定のとき */
@media (prefers-color-scheme: dark) {
body {
background: #111;
color: #eee;
}
}つまずきやすいところ
まず、HTML の head に viewport の指定が無いとメディアクエリはほぼ効きません。スマートフォンのブラウザが仮想的な幅 980px でページを描画してしまい、768px 以上の側の条件が常に成立するためです。head に次の1行を先に入れておきます。
<meta name="viewport" content="width=device-width, initial-scale=1">次に、最小幅の条件と最大幅の条件を混ぜて書くと、境界の 768px ちょうどでどちらも当たる、あるいはどちらも外れる、という穴が生まれます。片方に揃えるのが安全で、狭い画面を既定にして最小幅の条件だけで広げていく書き方（モバイルファースト）が主流です。
最後に、CSS の後勝ちの原則はメディアクエリでも変わりません。@media ブロックを、上書きしたい規則より前に書くと打ち消されます。
似た用語との違い
| 語 | 役割 |
|---|---|
| メディアクエリ | 画面全体の条件でスタイルを切り替える |
| コンテナクエリ | 親要素の幅を基準に切り替える。部品単位のレスポンシブ向け |
| レスポンシブデザイン | 端末に合わせて見た目を変える設計方針そのもの |
