メディアクエリ

メディアクエリは、デバイスの種類や特性に応じて切り替えることができる仕組みです。

CSS で使用すれば、特定の種類のデバイスのみに適用したいスタイルを定義したり、ある条件、例えばデバイスの画面サイズが指定のサイズより小さかった場合に適用するスタイルを定義したりと言うことが可能です。

メディアクエリは、デバイスの種類を定義した「メディアタイプ（Media Types）」とデバイスの特性を定義した「メディア特性（Media Features）」に分類され、それら単体、もしくは組み合わせで指定可能です。また、not and only あるいは or といったメディアクエリ修飾子を使用することで複数のメディアクエリを組み合わせた指定も可能になっています。

メディアタイプの種類

CSS2.1 および Media Queries Level 3 では下記以外にも様々なメディアタイプが定義されていましたが、Media Queries Level 4 以降は下記の 3 種類のみの使用が推奨されています。

メディア特性の種類

Media Queries Level 4、および Level 5 で新たに定義されたメディア特性も紹介しますが、どちらも現時点では正式に勧告された仕様ではありませんし、メディア特性によってはブラウザのサポート状況にばらつきがありますので注意してください。

メディアクエリ修飾子

メディアクエリは、メディアクエリ修飾子を使用することで複数組み合わせることが可能です。キーワードとして not and only or が使用できます。

@media (min-width: 30em) and (max-width: 50em) {
  /* and キーワードを使用して、min-width: 30em かつ max-width: 50em の場合にマッチさせた例 */
}

上記の記述は、Media Queries Level 4 で下記のように記述することもできるようになりました。min-width や max-width を使用しなくても同様の記述が可能です。

@media (30em <= width <= 50em) { ･･･略･･･ }

not キーワードを使用すると、ある条件と、それ以外、という分岐がわかりやすく記述できます。

@media (min-width: 768px) {
  /* 768px 以上の場合にマッチ */
}
@media not (min-width: 768px) {
  /* not キーワードを使用して、min-width: 768px 以外、つまり 768px よりも小さい場合にマッチさせた例 */
}

なお、カンマ区切りを使用すると or の扱いになります。

@media (min-width: 980px), screen and (orientation: portrait) {
  /* min-width: 980px または、screen に合致するデバイスが縦長モードの場合にマッチさせた例 */
}

Media Queries Level 4 では or キーワードが加わったため、下記のようにも記述することもできます。

@media (min-width: 980px) or screen and (orientation: portrait) { ･･･略･･･ }