原文の最新版 が公開されたため、この日本語訳は古いものとなっています。原文の最新版に対応した日本語訳は、W3C 仕様書 日本語訳一覧 よりアクセスできます。
この文書「メディアクエリー」は、W3C の CSS ワーキンググループ による「Media Queries (W3C Candidate Recommendation 6 June 2007)」の日本語訳です。
規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。
原文が勧告 (Recommendation) ではなく、勧告候補 (Candidate Recommendation) であることにご注意ください。
原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。
Copyright © 2007 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
HTML4 と CSS2 は、異なる メディア型 (media types) に対し調整された、メディア固有スタイルシートに対応しています。この機能を利用するとたとえば、画面上ではサンセリフ体のフォントで表示され、しかし印刷はセリフ体で行われるといったことが可能となります。この "screen" と "print" は、すでに定義されているメディア型ですが、メディアクエリー (Media Queries) とはこの機能を拡張し、より細かなスタイルシートのラベル付けを行えるようにするものです。
メディアクエリーはメディア型と、スタイルシートの適用範囲を制限するひとつ以上の式 (expression) から成り立ちます。メディアクエリーで使用できる 媒体特性 (media features) には "width"、"height"、"color" などがあります。メディアクエリーを利用することにより、内容を変えることなく特定の出力デバイスごとに視覚的表現を調整することができるようになります。
この章は、この文書の公開時におけるステータスについて説明しています。このため、他の仕様がこの文書を上書きしている可能性があります。W3C による他の出版物およびこの技術レポートの最新版は W3C 技術レポートインデックス (http://www.w3.org/TR/) で探すことができます。
この文書は CSS ワーキンググループ により作成された 勧告候補 (Candidate Recommendation) です。
勧告候補とは、広くレビューがなされ実装段階に入った文書のことをいいます。W3C はこの仕様を実装する方に対し、そのコメントを公開メーリングリスト www-style@w3.org (アーカイブ) に送信するよう促しています (手順 をはじめにお読みください)。メールを送る際は、件名に “css3-mediaqueries” という文字列を含めてください。たとえば、 “[css3-mediaqueries] …summary of comment…” というスタイルが適当です。
勧告候補としての仕様書公開は、W3C メンバーによる支持を意味するものではありません。この文書は更新されたり他の文書と置き換えられたり、また破棄される可能性もある草稿段階の仕様書です。策定中ということを明記せずに、この文書を引用することは適当でありません。
この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成されました。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理しています。リストには情報開示に関する説明もありますので、ご参照ください。特許について十分に知識のある人物が、当該仕様に関し Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要があります。
この仕様が CR ステージを通過した時点で、次のような条件がそろっているものとします。
少なくとも二つの、相互運用可能な実装が存在しています。これを評価基準とするため、ここでは次の用語を定義します。
CSS テストスイートの各テストケースを通ります。もし実装が Web ブラウザでなければ、そのテストスイートと同等なテストを通ります。そのようなユーザーエージェント (UA) が相互運用性を主張するために利用される場合、テストスイート内の該当するテストには、それぞれ代替となるテストが作成されるべきです。また、そのような UA が相互運用性を主張するために利用される場合、同じように相互運用性を主張する別の UA が一つ以上存在し、また関連するテストを通る必要があります。このとき、関連するテストは査読を行いやすいよう、パブリックな場所で公開される必要があります。
次のようなユーザーエージェントが、実装と呼ばれることになります。
CR 期間 (CR Period) は、最低で三ヶ月以上経過する必要があります。これは、この仕様が 2007 年 9 月 6 日の前には CR を通過しないことを意味します。この仕様が CR を追加したとき、実装レポートが公開されます。現段階では、そのようなレポートは存在しません。
仕様に記された技術は、アクセシビリティに害を与えるものであってはなりません。
W3C メンバーは CSS ワーキンググループに直接コメントを送ることもできます。前の草案に対し寄せられたコメント も保存されています。
この CSS3 モジュールは、次の CSS3 モジュールを規範的な参照文書としています。
(このセクションは規範的でありません。)
HTML4 [HTML401] と CSS2 [CSS2] は現在、異なるメディア型用に調整されたメディア依存のスタイルシートをサポートしています。たとえば、ある文書はスクリーン用と印刷用それぞれに異なるスタイルシートを利用することができます。HTML4 では、次のように記述します。
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
CSS スタイルシートでは、ある部分を特定のメディア型に適用させるといったこともできます。
@media screen {
* { font-family: sans-serif }
}
"print" と "screen" メディア型は HTML4 で定義されています。定義されているメディア型は "aural"、"braille"、"handheld"、"print"、"projection"、"screen"、"tty"、"tv" の八つです。CSS2 ではこれに加え、"embossed" という、点字フィードバックデバイスと点字プリンタを区別するための新しいメディア型が追加されています。また、すべてのメディア型にスタイルを適用する "all" というものも利用されています。
メディア固有のスタイルシートは、いくつかのユーザーエージェントによってサポートされています。頻繁に利用されるのは "screen" と "print" で、スクリーン用と印刷用で異なるスタイルを適用するというものです。
さて、このメディア型指定について、スタイルを適用させたい出力デバイスのタイプをより細かく記述したいというリクエストがありました。HTML4 はそのようなリクエストがあると予想していたため、メディア型について前方互換性のある構文を定義していました。HTML4 仕様書の section 6.13 には、次のように書かれています。
訳註：次の引用部分についても、日本語に翻訳しています。
将来の HTML において新しい値の追加を行うこと、またパラメータ化された値を許容することは可能です。これらの拡張を容易に行うため、適合するユーザーエージェントは次のように media 属性の値をパースできるようになっている必要があります。
- 値はカンマによって分割されたエントリのリストとなっています。
media="screen, 3d-glasses, print and resolution > 90dpi"これは次のように扱われます。
"screen" "3d-glasses" "print and resolution > 90dpi"- 各エントリは US ASCII 文字 [a-zA-Z] (Unicode decimal 65-90, 97-122)、数字 [0-9] (Unicode hex 30-39)、またはハイフン (45) 以外の最初の文字で切り取られます。先ほどの例の場合、次のように処理されます。
"screen" "3d-glasses" "print"
この仕様で定義されるメディアクエリーは、HTML4 で概説されたメカニズムに基づいています。メディアクエリーの構文は、HTML4 で予約されたメディア型の構文に収まるものとなっています。HTML4 の media 属性は XHTML にも、また一般的な XML にも存在しています。また、同じ構文は CSS の ‘@media’ 規則および ‘@import’ でも使用することができます。
一つのメディアクエリーは、メディア型と 媒体特性 (media features) に関わる一つ以上の 式 (expressions) から成り立っています。
次のコードは、HTML で簡単なメディアクエリーを使用したものです。
<link rel="stylesheet" media="screen and (color)" href="example.css" />
この例では、あるスタイルシート (example.css) があるメディア型 (‘screen’) に属するデバイスのうち、ある特性 (カラー画面である必要がある) を持つものにだけ適用されるということを示しています。
先ほどのメディアクエリーを、CSS の @import 規則で記述したものは次のようになります。
@import url(color.css) screen and (color);
メディアクエリーは、真または偽である論理式です。メディアクエリーはクエリー内のメディア型が、実行中のユーザーエージェントが属するメディア型に一致し、またクエリー内のすべての式が真であるとき真となります。また、"not" キーワードのあるメディアクエリーでは、"not" キーワードを含めないクエリーが偽であった場合、真となります。
メディアクエリーが真であるとき、関連するスタイルシートは通常のカスケード処理規則に従って適用されます。
カンマ区切りリストを用いて、複数のメディアクエリーを結合することができます。カンマ区切りリスト中の一つ以上のメディアクエリーが真である場合、関連するスタイルシートが適用されます。そうでない場合、スタイルシートは無視されます。
次の例はカンマ区切りリストを用い、複数のメディアクエリーを指定したものです。CSS の @media 規則で記述しています。
@media screen and (color), projection and (color) { ... }
メディアクエリー構文において、カンマは論理式の OR を、また ‘and’ キーワードは論理式の AND を表しています。
論理式の NOT は ‘not’ キーワードによって表されます。
<link rel="stylesheet" media="not screen and (color)" href="example.css" />
‘not’ キーワードをクエリーの先頭に記述すると、キーワード以降のクエリーを否定することになります。つまり、‘not’ のないメディアクエリーが真であった場合、‘not’ をつけることにより偽となります。反対に ‘not’ のない状態でクエリーが偽であった場合、‘not’ をつけることで真となります。HTML4 で定義されたメディア型のみをサポートするユーザーエージェントは ‘not’ キーワードを理解しないため、クエリーに関連付けられたスタイルシートは適用されません。
‘only’ キーワードは、古いユーザーエージェントからスタイルシートを隠すために使うことができます。ユーザーエージェントは ‘only’ から始まるメディアクエリーを、‘only’ キーワードが存在していないように解釈した上で処理する必要があります。
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
メディアクエリー構文は HTML や XHTML、XML [XMLSTYLE]、そして CSS の @import と @media 規則に使用することができます。
次の例は、同じメディアクエリーを HTML、XHTML、XML、@import、@media でそれぞれ記述したものです。
<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css"> <link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" /> <?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?> @import url(example.css) screen and (color), projection and (color); @media screen and (color), projection and (color) { ... }
媒体特性が現在実行しているデバイスに当てはまらない場合、その媒体特性に関わる式は偽となります。
媒体特性 ‘device-aspect-ratio’ は視覚的デバイスのみに適用されます。音声デバイスでは、‘device-aspect-ratio’ に関わる式はすべて偽となります。
<link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" />
クエリーで使用されている単位が対象となるデバイスに当てはまらない場合、式は常に偽となります。
単位 ‘px’ は ‘tty’ デバイスに当てはまりません。このため、次のメディアクエリーは常に偽となります。
<link rel="stylesheet" media="tty and (min-device-width: 800px)" href="example.css" />
しかし、この例におけるメディアクエリーに対し、‘not’ をクエリーの先頭に付加することで、このクエリーを真にすることができます。
式を評価するためにスタイルを適用する必要はありません。これは循環依存関係を避けるためです。たとえば、印刷された文書のアスペクト比はスタイルシートに影響されるでしょう。しかし、‘device-aspect-ratio’ に関わる式はユーザーエージェントが持つアスペクト比の規定値を基にします。
次にあるのは、メディアクエリーの構文を擬似 BNF で表したものです。
media_query_list: <media_query> [, <media_query> ]* media_query: [[only | not]? <media_type> [ and <expression> ]*] | <expression> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
CSS スタイルシートは基本的に大文字と小文字を区別しないため (case-insensitive)、メディアクエリーもこれに準じます。
式を囲む括弧 ("()") は必須です。この仕様に適合するユーザーエージェントは、括弧のない式を処理してはいけません。この要件に従うことにより、将来における構文の拡張性を確保することができます。
未知のメディア型を指定しているメディアクエリーは常に偽となります。
次の例で考えてみましょう。
<link rel="stylesheet" media="3d and (color)" href="example.css" />
"3d" というメディア型は定義されていない未知のものです。つまり、このメディアクエリーは偽となり、リンク先のスタイルシートは適用されないことになります。
また、未知の媒体特性や、不正な値を指定する式も常に偽となります。
次の例で考えてみましょう。
<link rel="stylesheet" media="all and (max-weight: 3kg) and (color)" href="example.css" />
"max-weight" は未知の媒体特性です。つまり、このメディアクエリーは偽となり、リンク先のスタイルシートは適用されないことになります。
カンマ区切りリスト内のあるメディアクエリーが退けられたとき、リスト内の他のメディアクエリーは、退けられたメディアクエリーが存在していなかったかのように評価されます。
<link rel="stylesheet" media="screen and (max-weight: 3kg) and (color), (color)" href="example.css" />
この例では、最初のメディアクエリーが未知の媒体特性と未知の値を利用していることから退けられますが、二番目のメディアクエリーは、最初のクエリーが指定されていなかったかのように評価されます。
媒体特性は、構文的に CSS プロパティのように表されています。特性の名前と、いくつかの値を持つという意味です。しかし、媒体特性とプロパティの間には、いくつかの重要な違いがあります。
たとえば、媒体特性 ‘color’ は、値なしの式 (‘(color)’) となる場合もあれば、値ありの式 (‘(min-color: 1)’) となる場合もあります。
この仕様は、視覚的デバイスと触覚デバイスに利用可能な媒体特性を定義します。媒体特性は音声デバイスに対しても同様に定義することができるでしょう。
媒体特性 ‘width’ は、出力デバイスにおける描画面の幅を表します。連続的なメディアにおいては、表示域 (viewport) の幅を表します (表示域は CSS2 の section 9.1.1 [CSS2] にて定義されています)。ページメディアについては、ページボックス (page box) の幅を表します (ページボックスは CSS2 の section 13.2 [CSS2] にて定義されています)。
次の例は、幅が 25cm 以上ある印刷物に対して適用されるスタイルシートを表しています。
<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://...." />
次のメディアクエリーは、表示域 (スクリーン上/紙上の文書が表示される部分) が 400 ピクセル以上 700 ピクセル以下のメディアに適合します。
@media screen and (min-width: 400px) and (max-width: 700px) { ... }
次のメディアクエリーは、表示域の幅が 20em 以上のスクリーンデバイスおよびハンドヘルドデバイスに適合します。
@media handheld and (min-width: 20em),
screen and (min-width: 20em) { ... }
なお、‘em’ の値はルート要素のフォントサイズに比例します。
媒体特性 ‘height’ は、出力デバイスにおける描画面の高さを表します。連続的なメディアにおいては、表示域の高さを表します。ページメディアについては、ページボックスの高さを表します。
媒体特性 ‘device-width’ は、出力デバイスの幅を表します。
@media screen and (device-width: 800px) { ... }
この例は、現在の幅がちょうど 800 ピクセルであるスクリーンに対して、スタイルシートを適用するメディアクエリーを表しています。単位 ‘px’ は、単位 のセクションで説明されているように、論理種である単位です。
媒体特性 ‘device-height’ は、出力デバイスの高さを表します。
<link rel="stylesheet" media="screen and (device-height: 600px)" />
この例は、高さがちょうど 600 ピクセルであるスクリーンに対して適用されるスタイルシートを表しています。単位 ‘px’ の定義は、他の CSS 仕様と同じものです。
媒体特性 ‘device-aspect-ratio’ は出力デバイスのアスペクト比を表します。値は ‘/’ で区切られた、二つの正の数からなります。
この仕様書では、アスペクト比を横縦のピクセル数による比と定義しています。
たとえば次に挙げるメディアクエリーはすべて、横 1280 ピクセル、縦 720 ピクセルである ("16:9" とよく呼ばれる) スクリーンデバイスに適合します。
@media screen and (device-aspect-ratio: 16/9) { ... }
@media screen and (device-aspect-ratio: 32/18) { ... }
@media screen and (device-aspect-ratio: 1280/720) { ... }
@media screen and (device-aspect-ratio: 2560/1440) { ... }
指定したアスペクト比がデバイスのアスペクト比に適合しているか、掛け算によって確かめることができます (例: 1280*9 = 11520 = 720*16)。掛け算を利用することで、浮動小数点処理を避けることができます。
接頭辞を使用し、縦長 (portrait) や 横長 (landscape) といったアスペクト比を表現することもできます。
@media screen and (max-device-aspect-ratio: 1/1) /* 縦長または正方形 */
@media screen and (min-device-aspect-ratio: 1/1) /* 横長または正方形 */
媒体特性 ‘color’ は、出力デバイスが持つ各カラーチャンネルのビット数を表します。デバイスがカラーデバイスでない場合、値は 0 となります。
次の二つのメディアクエリーは、すべてのカラーデバイスに適合します。
@media all and (color) { ... }
@media all and (min-color: 1) { ... }
次のメディアクエリーは、各カラーチャンネルのビット数が 2 以上のデバイスに適合します。
@media all and (min-color: 2) { ... }
各カラーチャンネルがそれぞれ異なるビット数を持つ場合は、その最小値が使われます。
つまり、ある 8 ビットカラーシステムが赤 3 ビット、緑 3 ビット、青 2 ビットで構成される場合、媒体特性 ‘color’ はその値に 2 を持ちます。
インデックスカラーを持つデバイスでビット数の最小値を求めるには、カラーテーブルを利用します。
Note: ここに記載された機能は、あくまで表面的なレベルで色表現能力を指定することができるものです。それ以上の機能が必要とされる場合は、RFC2531 [RFC2531] にて今後対応するかもしれない、より細かい媒体特性が提供されています。
媒体特性 ‘color-index’ は、出力デバイスが持つカラーテーブルのエントリ数を記述します。
次のメディアクエリーは、すべてのカラーテーブルに適合します。
@media all and (color-index) { ... }
@media all and (min-color-index: 1) { ... }
次のメディアクエリーは、256 色以上のカラーテーブルを持つデバイスにスタイルシートを適用します。
<?xml-stylesheet media="all and (min-color-index: 256)"
href="http://www.example.com/..." ?>
媒体特性 ‘monochrome’ はモノクロームフレームバッファにおける、ピクセルあたりのビット数を表します。デバイスが白黒デバイスでない場合、値は 0 をとります。
次のメディアクエリーはどちらも、すべての白黒デバイスに適合します。
@media all and (monochrome) { ... }
@media all and (min-monochrome: 1) { ... }
次のメディアクエリーは、1 ピクセルあたり 2 ビット以上の色深度を持つ白黒デバイスに適合します。
@media all and (min-monochrome: 2) { ... }
一方をカラーデバイス用、もう一方を白黒デバイス用としてスタイルシートを適用させたい場合は、次のメディアクエリーを記述します。
<link rel="stylesheet" media="print and (color)" href="http://..." /> <link rel="stylesheet" media="print and (monochrome)" href="http://..." />
媒体特性 ‘resolution’ はピクセル密度など、出力デバイスの持つ解像度を表します。
たとえば、次のメディアクエリーは、解像度が 300dpi 以上のデバイスに適合します。
@media print and (min-resolution: 300dpi) { ... }
次のメディアクエリーは、118dpcm 以上のデバイスに適合します。
@media print and (min-resolution: 118dpcm) { ... }
媒体特性 ‘scan’ は、種類が "tv" である出力デバイスが持つ走査処理方法を表します。
たとえば、次のメディアクエリーは、プログレッシブ方式の TV デバイスに適合します。
@media tv and (scan: progressive) { ... }
媒体特性 ‘grid’ は、出力デバイスがグリッドであるかビットマップであるかを表します。出力デバイスがグリッドベース ("tty" ターミナルや、一つの固定フォントしか持たない電話のディスプレイなど) である場合、値は 1 となります。グリッドベースでない場合、値は 0 となります。
単位 ‘em’ は、グリッドデバイスにおいて特別な意味を持ちます。‘em’ の正確な幅を決定できないため、‘em’ はグリッドセルの横の幅と、縦の高さとして判断されます。
次に二つの例を示します。
@media handheld and (grid) and (max-width: 15em) { ... } @media handheld and (grid) and (device-max-height: 7em) { ... }
メディアクエリーで使用される単位は、他の CSS 仕様と同じものです。たとえば、ピクセルは CSS ピクセルを意味し、物理的なピクセルを意味しません。
しかし、‘em’ は前のセクションで解説しているように、グリッドデバイスにおいて特別な意味を持っています。
メディアクエリーにおいて相対的な単位は、文書のルート要素の初期値を基にしています。たとえば HTML の場合、html 要素に指定された ‘font-size’ プロパティの初期値が ‘em’ の値となります。
二つの単位 ‘dpi’ と ‘dpcm’ はピクセル密度など、出力デバイスの持つ解像度を表します。解像度を表す単位は次のようになっています。
この仕様書において、これらの単位は媒体特性 ‘resolution’ のみに使用されます。
この仕様は、W3C の Cascading Style Sheets ワーキンググループによって作成されました。
またこの仕様は、Christoph Päper、Simon Pieters、Anne van Kesteren、Sigurd Lerstad、Arve Bersvendsen、Susan Lesch、Melinda Grant、そして L. David Baron からの指摘により改善されています。