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 のように直感的な記述が可能になり、レスポンシブデザインの実装がより効率的になります。今後のプロジェクトで積極的に活用してみましょう。