CSSメディアクエリを直感的に書く方法を解説

2022年に登場したCSSメディアクエリの新記法 @media (width > 1200px) の使い方を解説します。より直感的にレスポンシブデザインが実装できる最新の方法を学びましょう。

はじめに

2022年、CSSに新しいメディアクエリの記法が導入され、より直感的なコードが書けるようになりました。従来のmin-widthやmax-widthに代わり、width > 1200px のように直接的な比較演算子が使用可能になり、レスポンシブデザインの記述がよりスマートになります。

本記事では、新記法の基本構文や活用例、従来の方法との違いを解説します。

新記法の基本構文

CSSメディアクエリの新記法では、次の比較演算子が使用できます：

具体例

1. 画面幅が1200pxより大きい場合（>）

@media (width > 1200px) {
  body {
    background-color: lightblue;
  }
}

2. 画面幅が600px以上1200px以下の場合（>= と <= の組み合わせ）

@media (600px <= width <= 1200px) {
  body {
    background-color: lightgreen;
  }
}

3. 画面幅が600px未満の場合（<）

@media (width < 600px) {
  body {
    background-color: lightcoral;
  }
}

従来の記法との違い

これまでのmin-widthやmax-widthと比較して、新記法はコードの可読性が向上します。

例：従来の記法

@media (min-width: 1201px) {
  body {
    background-color: lightblue;
  }
}

例：新記法

@media (width > 1200px) {
  body {
    background-color: lightblue;
  }
}

✅ 新記法では、条件がより直感的に書ける ため、レスポンシブデザインのコーディングがスムーズになります。

対応ブラウザ

新しいメディアクエリの記法は、以下のブラウザでサポートされています：

• Chrome 106以降
• Firefox 105以降
• Safari 16以降
• Edge 106以降

古いブラウザ向けには、従来のmin-widthやmax-widthを併用するのが安全です。

実用例：レスポンシブデザイン

body {
  background-color: white;
}

// sp
@media (width < 600px) {
  body {
    background-color: lightcoral;
  }
}

// tab
@media (600px <= width <= 1200px) {
  body {
    background-color: lightgreen;
  }
}

// pc
@media (width > 1200px) {
  body {
    background-color: lightblue;
  }
}

まとめ

CSSの新しいメディアクエリ記法は、width > 1200px のように直感的な記述が可能になり、レスポンシブデザインの実装がより効率的になります。今後のプロジェクトで積極的に活用してみましょう。

実務Tips（ベストプラクティス集）

● range（比較演算子）構文を基本にする

従来の min-/max- をやめて、@media (width >= 768px) のように比較演算子（<, <=, >, >=）で書くと意図が明瞭になります。範囲指定も @media (400px <= width <= 1024px) と1本で表現できます。

● min-/max- と混在させない

同じコードベースで min-width と width >= を混ぜると可読性が落ちます。プロジェクト方針を「range構文で統一」などに決めておきましょう。

● しきい値を“意味”で決める

端末名ではなくデザインの崩れ点（コンテンツの折返しやグリッド切替）でブレークポイントを設定します。例：600px（1→2列）/960px（2→3列）など。

● 将来衝突を避ける書き方

複数条件は and / or / not を活用。例：@media (width >= 768px) and (prefers-reduced-motion: no-preference)。長くなる場合は分割管理（レイヤーやパーシャル）を。

よくある質問

Q. @media (width >= 768px) と @media (min-width: 768px) はどう違いますか？

A. 表現の仕方が違うだけで意味は同じです。range構文は「範囲」を1本で書けるため、読みやすくリファクタもしやすい利点があります。

Q. 範囲指定はカンマ区切りではなく <= を使うの？

A. はい。@media (480px <= width <= 960px) のようにチェーン比較で表現します。複数離れた範囲をまとめたい場合はカンマ（＝or）も使えます。

Q. and とカンマ（or）の使い分けは？

A. 条件を同時に満たすなら and、どちらか一方を満たせばよいならカンマ。例：@media (width >= 768px) and (hover: hover)／@media (width < 480px), (width > 1280px)。

Q. prefers-color-scheme はダークテーマが標準？

A. いいえ。ユーザー設定に追従します。@media (prefers-color-scheme: dark) でダーク用、同スタイルをデフォルトにしたい場合はCSSカスケード順や明示的な切替を設計しましょう。

Q. タッチ向けだけホバー効果を無効化したい

A. @media (hover: none) and (pointer: coarse) を使います。ボタンサイズやフォーカスリングの強調もこの条件で最適化できます。

Q. 古いブラウザへの対応は？

A. まずベースを通常CSSで実装し、上から新構文で強化する方法が安全です。必要箇所のみ min-/max- を残し、レビュー時に段階的に置換していくのがおすすめです。