メディアクエリ

メディアクエリ（）は画面の解像度 (例えばスマートフォンの画面とノートパソコンの画面) といった条件に対応してコンテンツの描画が行えるようにする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の勧告にのせられたメディア属性を次の表でしめす。廃止予定のメディア属性は示していない。

脚注

訳注

出典

外部リンク 
 W3C - Media Queries recommendation 19 June 2012
 W3C - CSS specs > Media Queries

ウェブデザイン