CSSのmedia queryの新しい書き方（range記法）｜ブログ

はじめに CSSのMedia Queryにおける「Range記法」を利用すると、メディア特性（スクリーン幅、解像度など）の範囲を指定して、さらに直感的にレスポンシブデザインを実現できます。従来のmin-widthやmax-widthを使った書き方に加え、このRange記法により、コードが簡潔かつ読みやすくなるのが大きな利点です。この記事では、CSSのMedia Queryで使えるRange記法の基本的な構文と使用例について解説します。 Media Queryの従来の書き方 まず、従来のMedia Queryではmin-widthやmax-widthを用いて、特定のデバイス幅でスタイルを適用します。例えば、幅が375px以上のデバイスで適用する場合、以下のように記述します。 css @media (min-width: 375px) { / 375px以上の幅に対するスタイル / } 同様に、幅が375px以下の場合はmax-widthを使用して、次のように指定します。 css @media (max-width: 375px) { / 375px以下の幅に対するスタイル / } この方法は多くのプロジェクトで活用されていますが、範囲が増えると読みづらくなるため、Media Queries Level 4からRange記法が登場しました。 ※Media Queries Level 4についてはこちらのリンクから。 Range記法の書き方と使い方 Range記法を使うと、Media Queryの記述をよりシンプルに、そして直感的に表現できます。これは、算術比較演算子（ , >=）を使って指定する方法です。 基本構文 css @media (幅 [演算子] 値) { / スタイル / } 演算子には、次のものが利用できます。 : 指定した値より大きい >= : 指定した値以上 例えば、幅が375px以上で適用するスタイルは、次のように書けます。 css @media (width >= 375px) { / 375px以上の幅に対するスタイル / } 従来のmin-widthを使った場合と比べても、条件が明確に表現できていることがわかります。 範囲指定の例 Range記法を使うと、2つの条件を組み合わせて範囲を指定することもできます。例えば、デバイス幅が375px以上で768px未満の場合、以下のように記述します。 css @media (375px <= width < 768px) { / 375px以上768px未満の幅に対するスタイル / } このように、複数の条件を組み合わせた指定ができるため、レスポンシブデザインの表現力が向上します。従来の方法と比較しても、条件が一目で理解しやすくなり、さらに直感的なスタイル調整が可能です。 まとめ Range記法は、レスポンシブデザインにおけるメディアクエリの記述をシンプルにし、より効果的なコード管理を実現します。従来の記述と比べて、読みやすく保守しやすい範囲指定ができるため、今後のCSS設計にぜひ取り入れてみてください。