CSSメディアクエリの書き方｜ブレークポイントとモバイルファースト

CSSメディアクエリの書き方とは

メディアクエリ（@media）は、画面幅や向き、ユーザーの設定などの条件に応じて、CSSを切り替える仕組みです。レスポンシブWebデザインの中心となる機能で、PCとスマートフォンで列数や文字サイズを変える場面で使います。

HTMLの <head> に <meta name="viewport" content="width=device-width, initial-scale=1"> がないと、スマートフォンでは幅がPC用の仮想幅に広げられ、メディアクエリが期待どおりに働きません。必ず合わせて書きます。レスポンシブ全体の注意点は レスポンシブWebデザインを実装してみて分かった11＋αのポイント も参考になります。

基本（構文・仕組み）

MDNでは、基本の形を @media (feature: value) { ... } として説明しています。従来は min-width / max-width を使いましたが、現在は比較演算子の範囲構文も使えます。

/* 従来の書き方 */
@media (min-width: 600px) and (max-width: 1200px) { ... }

/* 範囲構文 */
@media (600px <= width <= 1200px) { ... }
条件 例 用途
画面幅 (width >= 768px) 列数・余白の切り替え
ホバーの有無 (hover: hover) ホバー演出を限定
動きの設定 (prefers-reduced-motion: reduce) アニメーションの軽減
配色の設定 (prefers-color-scheme: dark) ダークモード対応
印刷 print 印刷用の調整

モバイルファーストは、小さい画面を基本のスタイルにして、広い画面で上書きする書き方です。

/* 基本 = スマホ */
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* 768px以上 */
@media (width >= 768px) { .cards { grid-template-columns: repeat(2, 1fr); } }
/* 1024px以上 */
@media (width >= 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

サンプルコード（実行結果つき）

次は、6枚のカードを画面幅に応じて1列・2列・3列に切り替える例です（gap はMDNでグリッドの間隔に使える Baseline の機能として説明されています）。

<div class="cards">
  <div class="card">A</div><div class="card">B</div><div class="card">C</div>
  <div class="card">D</div><div class="card">E</div><div class="card">F</div>
</div>

.card { padding: 16px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; }
@media (hover: hover) { .card:hover { background: #dbeafe; } }
@media print { .card { break-inside: avoid; } }

動作確認（検証環境と結果）

  • 環境: Windows 11、Microsoft Edge 154（Chromium系、headless）。ログは C:Tempks2techtestscss-media-query.md。
  • 実行: render.ps1 で幅1200と390を指定して描画し、JavaScriptで getComputedStyle(...).gridTemplateColumns と matchMedia を確認しました。
  • 結果: 幅1200指定（実際のビューポートは1174px）では3列、(width >= 768px) と (min-width: 768px) はどちらも true でした。幅390指定（headlessの最小幅の都合で実際は496px）では1列で、どちらも false でした。範囲構文と従来構文が同じ結果になることを確認しました。
  • 未検証: 実機のスマートフォン、768〜1023px の2列表示、印刷時の表示。

CSSメディアクエリの書き方の注意点

  • ブレークポイントは、機種の画面幅ではなく、内容が崩れる幅を基準にします。機種は次々に変わります。
  • モバイルファーストで min-width / width >= を使うなら、同じ種類で統一します。max-width が混ざると、境界の1pxで条件が重なることがあります。
  • 条件が max-width: 767px と min-width: 768px のように、小数の画面幅で隙間が生じることがあります。範囲構文を使えば、この問題が避けやすくなります。
  • 範囲構文は比較的新しい書き方です。対象ブラウザを can I use で確認してください。

CSSメディアクエリの書き方でよくあるミス

ブラウザ対応・バージョン

min-width / max-width の書き方は、長く使える形です。範囲構文（width >= 768px）や新しいメディア特性は、MDNの互換性表と can I use で確認してから使ってください。古いブラウザへの対応が必要な案件では、従来の書き方を使うほうが安全です。

CSSメディアクエリの書き方のチェックリスト

  • viewport の <meta> を入れたか。
  • モバイルファーストで、書き方（min か max か）を統一したか。
  • ブレークポイントは、内容が崩れる幅から決めたか。
  • ホバー・動き・配色の設定を、メディアクエリで考慮したか。
  • 実機（または開発者ツール）で、境界付近を確認したか。

CSSメディアクエリの書き方のFAQ（よくある質問）

Q. ブレークポイントは何pxがよいですか？
A. 決まった正解はありません。768px・1024px付近がよく使われますが、まず1列で崩れない作りにして、窓幅を広げながら崩れる幅を見つけるのが確実です。

Q. メディアクエリとコンテナクエリの違いは？
A. メディアクエリは画面（ビューポート）基準、コンテナクエリは親要素の幅基準です。部品を再利用するなら コンテナクエリ が向いています。

Q. 文字サイズの切り替えにも使えますか？
A. 使えます。ただ、連続的に変えたいなら clamp() のほうが、条件分岐を減らせます。

筆者の見解（CSSメディアクエリの書き方）

私見では、メディアクエリは「画面の大きさに合わせる」道具から、「利用者の環境に合わせる」道具へ役割が広がっていると考えます。幅だけでなく、ホバーの有無や動き・配色の設定も条件にすることで、より多くの人が使いやすいサイトになります。まずはモバイルファーストで、少ないブレークポイントから始めることをおすすめします。

CSSメディアクエリの書き方の関連項目

出典（一次情報）

タイトルとURLをコピーしました