メディアクエリ【Media Queries】

概要

メディアクエリ（Media Queries）とは、Webページのスタイル(見栄え)を記述するCSSの仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替える機能。一つのページで複数の異なる表示環境に対応するレスポンシブWebデザインを実現することができる。

ページが現在表示されている画面の幅や高さ、縦長か横長かなどの情報を取得し、「表示サイズの幅がこれ以上ならこのスタイルを適用」「画面が横長ならこのスタイルを適用」というように、一つのスタイルシートで複数の画面環境に対応することができる。

CSSファイルやHTMLのstyle要素内で「@media」規則として記述することができるほか、「@import」規則やHTMLのstyle要素のmedia 属性の中で条件を指定して読み込むCSSファイルを切り替えることもできる。

調べることができる属性には、表示領域（ウィンドウなど）の幅（width）と高さ（height）、画面全体の幅（device-width）と高さ（device-height）、画面が縦長か横長か（orientation）、表示領域の縦横比（aspect-ratio）、画面全体の縦横比（device-aspect-ratio）、表示可能な色の数（color）、画面の画素密度（resolution）など。

(2020.4.3更新)