読む 編集 履歴表示

メディアクエリ

ウィキペディアから、無料の百科事典

メディアクエリ（英: media query）は画面の解像度 (例えばスマートフォンの画面とノートパソコンの画面) といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。2012年6月にはW3C勧告になり、[1]レスポンシブウェブデザイン (responsive web design; RWD) の基礎になっている。

歴史

メディアクエリは1994年にホーコン・ウィウム・リーの最初のCSS案で初めて概要が示されたが[2]、CSS1の一部にはならなかった。1997年からのHTML 4勧告で将来どのようにメディアクエリが追加されるかに関する具体例が示されている[3]。2000年にはW3Cによって、メディアクエリや CC/PP の制定が始められた。この2つの案は同じ問題に対処しているが、CC/PP はサーバ中心であるのに対してメディアクエリはブラウザ中心である[4]。2001年には、メディアクエリに関する最初の公開ワーキングドラフトが発行され[5]、2012年には、ブラウザによる対応に伴いその仕様書はW3C勧告となった。

使い方

メディアタイプと1つ以上の式でメディアクエリは構成され、真または偽に決定されるメディア特性に関係を持つ。 メディアクエリで定められたメディアタイプと文書が表示されているデバイスの種類が合い、メディアクエリの式がすべて真であればクエリの結果は真になる。 メディアクエリが真なら対応するスタイルシートやスタイルルールが通常のカスケードルールにあわせて適用される[6][7]。

使用例

CSSのメディアクエリの使用例を次に示す。

@media screen and (display-mode: fullscreen) {
  /* 全画面表示の画面にだけここのコードは適用される。 */
}

@media all and (orientation: landscape) {
  /* 画面が横向きの時にだけここのコードは適用される。 */
}

@media screen and (min-device-width: 500px) {
  /* 500ピクセルより幅が広い画面にだけここのコードは適用される。) */
}

[訳注 1]

メディアタイプ

メディアタイプはHTML文書の先頭で<link>要素の中で"media"属性を使って宣言できる。どのデバイスでリンクされた文書が表示されるかが"media"属性の値で指定される[9]。またメディアタイプはXML処理命令の @import at-rule や @media at-rule で定義することもできる。CSS2ではこれらがメディアタイプとして定義されている[10]。

スタイルシートがすべてのメディアタイプに適応されることを示す目的にも、メディアタイプの"all"は用いられる[11]。

メディア属性

2017年9月5日付のメディアクエリ レベル4の勧告にのせられたメディア属性を次の表でしめす。廃止予定のメディア属性は示していない[8]。

属性値種類説明
width<length>範囲出力デバイスの対象となる表示エリアの幅
height<length>範囲出力デバイスの対象となる表示エリアの高さ
aspect-ratio<ratio> (<integer> / <integer>)範囲"height"属性の値にたいする"width"メディア属性の値の比率
orientationportrait または landscape個別"height"属性の値が"width"属性の値以上ならportrait、そうでなければlandscape
resolution<resolution> または infinite範囲解像度 (数字の後ろに"dpi"、"dpcm"、または"dppx"をつける)
scaninterlace または progressive個別一部表示デバイスのスキャン方式
grid<mq-boolean>{0, 1}個別出力デバイスがマス目ベースなら1、ビットマップベースなら0
updatenone または slow または fast個別表示されたコンテンツの表示を更新できるか
overflow-blocknone または scroll または optional-paged または paged個別コンテンツが表示エリアからはみだすときどうするか
overflow-inlinenone または scroll個別インラインのコンテンツが表示エリアからはみだすときどうするか
color<integer>範囲色要素ごとのビット数
color-index<integer>範囲色参照テーブルのエントリー数
monochrome<integer>範囲モノクロームのフレームバッファならピクセルごとのビット数、そうでなければ0
color-gamutsrgb または p3 または rec2020個別ユーザーエージェントや出力デバイスでサポートされるおおよその色の範囲
pointernone または coarse または fine個別ポインティングデバイスがあるならその精度、なければnone
hovernone または hover個別カーソルがページの要素の上を通過するか
any-pointernone または coarse または fine個別"pointer"属性と同じだが使用可能なすべてのポインティングデバイスに対応する
any-hovernone または hover個別"hover"属性と同じだが使用可能なすべてのポインティングデバイスに対応する

脚注

訳注

  1. ↑ device-widthはメディアクエリ レベル4で廃止予定になっています。[8]

出典

  1. ↑ “Media Queries Publication History”. W3C. 2012年6月19日閲覧。
  2. ↑ ホーコン・ウィウム・リー. “Cascading HTML Style Sheets”. 20 January 2013閲覧。
  3. ↑ “Basic HTML data types”. W3C. 2013年1月20日閲覧。
  4. ↑ ホーコン・ウィウム・リー. “Re: Feedback on Media Queries CR”. W3C. 2013年1月20日閲覧。
  5. ↑ “Media queries”. W3C (2001年4月4日). 2013年1月20日閲覧。
  6. ↑ “CSS media queries”. Mozilla Developer Network and individual contributors. 28 April 2017閲覧。
  7. ↑ Ryan Boudreaux (2012年7月31日). “How to create media queries in Responsive Web Design - TechRepublic”. TechRepublic. 2014年3月1日閲覧。
  8. 1 2 “Media Queries Level 4”. W3C (2017年9月5日). 2018年8月26日閲覧。
  9. ↑ “HTML link tag”. W3Schools. 28 April 2017閲覧。
  10. ↑ “Media Queries”. World Wide Web Consortium. 28 April 2017閲覧。
  11. ↑ “Media Queries”. World Wide Web Consortium. 28 April 2017閲覧。

外部リンク