メディアクエリ（）は画面の解像度 (例えばスマートフォンの画面とノートパソコンの画面) といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。2012年6月にはW3C勧告になり、レスポンシブウェブデザイン (; RWD) の基礎になっている。
歴史 メディアクエリは1994年にホーコン・ウィウム・リーの最初のCSS案で初めて概要が示されたが、CSS1の一部にはならなかった。1997年からのHTML 4勧告で将来どのようにメディアクエリが追加されるかに関する具体例が示されている。2000年にはW3Cによって、メディアクエリや CC/PP の制定が始められた。この2つの案は同じ問題に対処しているが、CC/PP はサーバ中心であるのに対してメディアクエリはブラウザ中心である。2001年には、メディアクエリに関する最初の公開ワーキングドラフトが発行され、2012年には、ブラウザによる対応に伴いその仕様書はW3C勧告となった。
使い方 メディアタイプと1つ以上の式でメディアクエリは構成され、真または偽に決定されるメディア特性に関係を持つ。 メディアクエリで定められたメディアタイプと文書が表示されているデバイスの種類が合い、メディアクエリの式がすべて真であればクエリの結果は真になる。 メディアクエリが真なら対応するスタイルシートやスタイルルールが通常のカスケードルールにあわせて適用される。
使用例 CSSのメディアクエリの使用例を次に示す。
@media screen and (display-mode: fullscreen) { /* 全画面表示の画面にだけここのコードは適用される。 */ } @media all and (orientation: landscape) { /* 画面が横向きの時にだけここのコードは適用される。 */ }
@media screen and (min-device-width: 500px) { /* 500ピクセルより幅が広い画面にだけここのコードは適用される。) */ }
メディアタイプ メディアタイプはHTML文書の先頭で要素の中で"media"属性を使って宣言できる。どのデバイスでリンクされた文書が表示されるかが"media"属性の値で指定される。またメディアタイプはXML処理命令の @import at-rule や @media at-rule で定義することもできる。CSS2ではこれらがメディアタイプとして定義されている。 all (すべてのデバイスに適した) braille (点字) embossed handheld (ハンドヘルドコンピュータ) print projection screen speech tty tv
スタイルシートがすべてのメディアタイプに適応されることを示す目的にも、メディアタイプの"all"は用いられる。
メディア属性 2017年9月5日付のメディアクエリ レベル4の勧告にのせられたメディア属性を次の表でしめす。廃止予定のメディア属性は示していない。 属性 値 種類 説明 width <length> 範囲 出力デバイスの対象となる表示エリアの幅 height <length> 範囲 出力デバイスの対象となる表示エリアの高さ aspect-ratio <ratio> (<integer> / <integer>) 範囲 "height"属性の値にたいする"width"メディア属性の値の比率 orientation portrait または landscape 個別 "height"属性の値が"width"属性の値以上ならportrait、そうでなければlandscape resolution <resolution> または infinite 範囲 解像度 (数字の後ろに"dpi"、"dpcm"、または"dppx"をつける) scan interlace または progressive 個別 一部表示デバイスのスキャン方式 grid <mq-boolean>{0, 1} 個別 出力デバイスがマス目ベースなら1、ビットマップベースなら0 update none または slow または fast 個別 表示されたコンテンツの表示を更新できるか overflow-block none または scroll または optional-paged または paged 個別 コンテンツが表示エリアからはみだすときどうするか overflow-inline none または scroll 個別 インラインのコンテンツが表示エリアからはみだすときどうするか color <integer> 範囲 色要素ごとのビット数 color-index <integer> 範囲 色参照テーブルのエントリー数 monochrome <integer> 範囲 モノクロームのフレームバッファならピクセルごとのビット数、そうでなければ0 color-gamut srgb または p3 または rec2020 個別 ユーザーエージェントや出力デバイスでサポートされるおおよその色の範囲 pointer none または coarse または fine 個別 ポインティングデバイスがあるならその精度、なければnone hover none または hover 個別 カーソルがページの要素の上を通過するか any-pointer none または coarse または fine 個別 "pointer"属性と同じだが使用可能なすべてのポインティングデバイスに対応する any-hover none または hover 個別 "hover"属性と同じだが使用可能なすべてのポインティングデバイスに対応する
脚注 訳注
出典
外部リンク W3C - Media Queries recommendation 19 June 2012 W3C - CSS specs > Media Queries