この文書は「Media Queries (W3C Recommendation 19 June 2012)」の日本語訳である。日本語訳は参考情報であり、公式な文書ではない。また、翻訳に誤りがある可能性にも注意されたい。

原文の最新版 は、この日本語訳が参照した版から更新された可能性がある。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照されたい。

公開日:
2012-06-29
翻訳者:
矢倉 眞隆 <yakura-masataka@mitsue.co.jp>

W3C

メディアクエリー

2012 年 6 月 19 日付 W3C 勧告 (Recommendation)

この版:
http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
最新版:
http://www.w3.org/TR/css3-mediaqueries/
最新の編集ドラフト:
http://dev.w3.org/csswg/css3-mediaqueries/
前の版:
http://www.w3.org/TR/2012/PR-css3-mediaqueries-20120426/
コメントへの対応:
http://www.w3.org/Style/2012/MediaQueriesDisposalOfComments.html
Editor:
Florian Rivoal <>
以前の Editor:
Håkon Wium Lie <>
Tantek Çelik <>
Daniel Glazman <>
Anne van Kesteren <>

仕様の規範的な内容が修正された可能性があるため、errata もあわせて参照されたい。

この仕様の 翻訳 も参照されたい。

訳注:この文書は日本語訳である。


概要

HTML4 と CSS2 は、異なる 媒体型 (media types) 用に調整した、媒体固有のスタイルシート機能をサポートしている。この機能を利用すると、たとえば、「画面上ではサンセリフ体が指定され、印刷時にはセリフ体のフォントが指定される」スタイルシートの作成も可能となる。この例の場合、‘screen’ と ‘print’ という、定義済みの媒体型を利用することで実現できる。メディアクエリー (Media queries) はこの機能を拡張し、より細かなスタイルシートのラベル付けを行えるようにするものである。

メディアクエリーは、媒体型と、特定の 媒体特性 (media features) に関する条件を調べる 0 以上の式 (expressions) から構成される。メディアクエリーで使用できる媒体特性には ‘width’, ‘height’, ‘color’ などがある。メディアクエリーを利用することで、ページの内容を変えることなく、特定の出力デバイスごとにスタイルの調整が可能となる。

この文書のステータス

このセクションは、この文書の公開時におけるステータスについて説明する。他の文書がこの文書を上書きする可能性に注意されたい。この技術文書や W3C から公開された他の文書の最新版は W3C 技術文書インデックス (http://www.w3.org/TR/) より探すことができる。

W3C 勧告は広く検証され、実装可能と判断された成熟した文書である。W3C はこの仕様の実装を奨励している。仕様に関するコメントの公開メーリングリスト www-style@w3.org (アーカイブ) への送信を奨励している (メーリングリストへの 参加手順 も参照されたい)。メールを送信する際には、“css3-mediaqueries” を件名に含めていただきたい。たとえば “[css3-mediaqueries] …コメントの要約…” といった形が望ましい。

この文書は W3C Member, ソフトウェア開発者、そしてその他の W3C グループや関係者によって評価が行われ、Director によって W3C 勧告と承認された。この文書は安定しており、参考資料として、または他の文書からの引用に利用されることがあるだろう。仕様の勧告において W3C の果たす役割とは、仕様に注目させ、その普及を促すことである。これにより、Web の機能と相互運用性の向上が期待できる。

Working Group の作成した 実装レポート およびメディアクエリーの テストスイート も参照されたい。

コメントへの対応勧告案 から加えられた 変更点 も参照されたい。

この文書は Style ActivityCSS Working Group によって作成された。

この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成された。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理している。リストには情報開示に関する説明もあるため、あわせて参照されたい。特許について十分に知識のある人物が、当該仕様に Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要がある。

この文書は勧告案と基本的に同じだが、スタイルシートの変更と、タイトルや日付、それに古い変更点の削除など、編集的な変更が加わっている。

目次

1. 背景

(このセクションは規範的ではない。)

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 で定義されている。HTML4 で定義される媒体型は ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ の計 8 つである。CSS2 ではこのリストから ‘aural’ を非推奨扱いとし、‘embossed’ と ‘speech’ を加えた。また、すべての媒体に対しスタイルを適用する媒体型 ‘all’ も利用される。

訳註: ここでの「媒体型 (media type)」は、Content-Type や MIME を意味する “媒体型 (media type)” ではなく、出力デバイスの種類や性質を表す。

媒体固有のスタイルシートは、いくつかのユーザーエージェントによってサポートされている。頻繁に利用されるのは ‘screen’ と ‘print’ で、スクリーンと印刷機器で異なるスタイルを適用する際に使われる。

この媒体型の指定について、出力デバイスの型をより細かく限定したいという要望が寄せられていた。HTML4 はそのような要望を予想していたため、媒体型について前方互換性のある構文を定義していた。HTML4 仕様書の section 6.13 には、次のように書かれている。

訳註: 次の引用部分についても、日本語に翻訳している。

将来の HTML において、新しい値の追加を行うこと、またパラメータ化された値をとるようになる可能性がある。これらの拡張を容易に行うため、適合するユーザーエージェントは次のように media 属性の値を パース できなければならない。

  1. 値はカンマによって区切られたリストとなっている。
    media="screen, 3d-glasses, print and resolution > 90dpi"

    これは次のように扱われる。

    "screen"
    "3d-glasses"
    "print and resolution > 90dpi"
  2. 各エントリは 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’ でも使用できる。

しかしながら、メディアクエリーの構文解析処理規則は、CSS で利用されるメディアクエリーの処理規則と一貫性を持つため、HTML4 の処理規則と互換性がない。

HTML5 [HTML5] (策定中) はメディアクエリー仕様を直接参照するため、HTML の規則を改定することになる。

2. メディアクエリー

メディアクエリーは、媒体型と、特定の 媒体特性 (media features) に関する条件を調べる 0 以上の 式 (expressions) から構成される。

メディアクエリーに関する言及は、構文のセクション に従うことを前提とする。構文に適合しないメディアクエリーは、エラー処理のセクション で説明される。つまり、このセクションの要件よりも構文のほうが優先される。

次のコードは、HTML で簡単なメディアクエリーを利用した例である。

<link rel="stylesheet" media="screen and (color)" href="example.css" />

この例は、媒体型 (‘screen’) に属するデバイスのうち、ある特性 (カラー画面) を持つものにだけ、スタイルシート (example.css) が適用されることを示す。

前述のメディアクエリーを CSS の @import 規則で利用する例を示す。

@import url(color.css) screen and (color);

メディアクエリーは、真あるいは偽となる論理式である。クエリー内の媒体型がユーザーエージェントの属する媒体型 ("適用対象" に記載) に一致し、かつクエリー内のすべての式が真と評価されたときに、メディアクエリーは真と評価される。

メディアクエリーには、すべての媒体型を指す短縮形構文が存在する。キーワード ‘all’ は (それに続く ‘and’ とともに) 省略可能である。つまり、媒体型が明示的に指定されていない場合、それは ‘all’ として扱われる。

次のふたつは等価である。

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

次のふたつも等価である。

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

カンマで区切ることにより、複数のメディアクエリーを繋げられる。複数のクエリーのうちひとつ以上が真である場合、リスト全体が真となる。それ以外の場合は偽となる。メディアクエリーの構文において、カンマは論理式の OR を、‘and’ キーワードは論理式の AND を表す。

次の例は、複数のメディアクエリーをカンマで区切って指定したものである。CSS の @media 規則で記述している。

@media screen and (color), projection and (color) { ... }

メディアクエリーのリストが空 (宣言が空文字列もしくは空白のみ) の場合、そのメディアクエリーは真と評価される。

次の例は等価である。

@media all { … }
@media { … }

論理式の NOT は ‘not’ というキーワードで表せる。‘not’ をメディアクエリーの先頭に記述すると、クエリーの結果が否定される。つまり、このキーワードのないメディアクエリーが真である場合、‘not’ をつけたものは偽となる。逆の場合も同様である。(HTML4 で記された通り) 媒体型のみをサポートするユーザーエージェントは ‘not’ キーワードを理解しないことから、関連付けられたスタイルシートが適用されることはない。

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

古いユーザーエージェントにスタイルシートを解釈させないよう、‘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) { … }

[XMLSTYLE] 仕様は media 擬似属性でメディアクエリーを使うように更新されていない。

訳注: 注釈に誤りあり。上記で参照される “Associating Style Sheets with XML documents 1.0” 仕様は2010年10月に改訂され、現在では media 擬似属性中でメディアクエリーが利用可能となっている。

記されている媒体特性が現在のデバイスに当てはまらない場合、その媒体特性に関わる式は偽と評価される。

媒体特性 ‘device-aspect-ratio’ は視覚的デバイスのみに適用される。このため、音声デバイスにおいて、‘device-aspect-ratio’ に関わる式はすべて偽となる。

<link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" />

クエリーで使用されている単位が対象となるデバイスに当てはまらない場合、式は常に偽と評価される。

単位 ‘px’ は ‘speech’ デバイスに適当ではない。このため、次のメディアクエリーは常に偽となる。

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

しかし、このメディアクエリーに対し、‘not’ をクエリーの先頭に記述することで、このクエリーを真にできる。

式を評価するためにスタイルを適用する必要はない。これは循環依存関係を避けるためである。たとえば、印刷された文書のアスペクト比はスタイルシートに影響されるだろうが、‘device-aspect-ratio’ に関わる式はユーザーエージェントが持つアスペクト比の規定値を基にする。

必須ではないが、ユーザーエージェントは環境が変化した際、クエリーを再評価しページのレイアウトを再構成することが望ましいだろう。環境の変化とはたとえば、デバイスの向きが変化し、画面が横長から縦長になった状態を指す。

3. 構文

メディアクエリーの構文は CSS2 の文法 によって表される。つまり、この仕様書で定義されていない規則は CSS2 で定義されているものとなる。次で定義される media_query_list は、CSS2の media_list を置き換えるものである。[CSS21]

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
media_feature
 : IDENT
 ;

CSS2 に定義されている COMMENT トークンはこの文法中に存在しないが、これは可読性を確保するために省かれている。COMMENT トークンは、他のトークンの間にいくつでも、また何度でも記述できる。[CSS21]

次の定義が新たに導入される。

L  l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|[ \t\r\n\f])?|\\y

次のトークンが新たに導入される。

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

RESOLUTION が CSS2 の term に追加される。

CSS スタイルシートは基本的に大文字と小文字を区別しない (case-insensitive)。メディアクエリーもこれに準ずる。

文法への適合もさることながら、メディアクエリーが適合しているとみなされるには、利用している媒体特性が仕様にて定義されていなければならない。

"example" という媒体型は存在しないため、最初のメディアクエリーのみが適合する。

@media all { body { background:lime } }
@media example { body { background:red } }

3.1. エラー処理

ユーザーエージェントは適合しないメディアクエリーに対し、次の規則に従わなければならない。

4. 媒体特性

媒体特性の構文は、特性の名前とその値を CSS プロパティのように記述するものである。しかし、媒体特性とプロパティの間にはいくつか大きな違いがある。

たとえば、媒体特性 ‘color’ は、値なしの式 (‘(color)’) となる場合もあれば、値ありの式 (‘(min-color: 1)’) となる場合もある。

この仕様は、視覚的デバイスと触覚デバイスに対し利用できる媒体特性を定義する。媒体特性は音声デバイスに対しても同様に定義できるだろう。

4.1. width

値: <length>
適用対象: 視覚的媒体と触覚媒体
min/max 接頭辞: あり

媒体特性 ‘width’ は、出力デバイスにおける対象表示域 (targeted display area) の幅を表す。連続的な媒体においては表示域 (viewport) の幅を表す。スクロールバーがある場合はその大きさが含まれる。(表示域は CSS2 の section 9.1.1 [CSS2] にて定義される)。ページ媒体においてはページボックス (page box) の幅を表す (ページボックスは CSS2 の section 13.2 [CSS2] にて定義される)。

<length> に負の値は指定できない。

次の例は、幅が 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’ の値は ‘font-size’ の初期値に比例する。

4.2. height

値: <length>
適用対象: 視覚的媒体と触覚媒体
min/max 接頭辞: あり

媒体特性 ‘height’ は、出力デバイスにおける対象表示域 (targeted display area) の高さを表す。連続的なメディアにおいては表示域の高さを表す。スクロールバーがある場合はその大きさが含まれる。ページ媒体においては、ページボックスの高さを表す。

<length> に負の値は指定できない。

4.3. device-width

値: <length>
適用対象: 視覚的媒体と触覚媒体
min/max 接頭辞: あり

媒体特性 ‘device-width’ は、出力デバイスにおける描画面 (rendering surface) の幅を表す。連続的な媒体においては画面の幅を表し、ページ媒体においてはページボックスの幅を表す。

<length> に負の値は指定できない。

@media screen and (device-width: 800px) { ... }

この例は、現在の幅がちょうど 800 ピクセルである画面に対しスタイルシートを適用するメディアクエリーを表す。単位 ‘px’ は、単位 のセクションで説明されているように、論理種である。

4.4. device-height

値: <length>
適用対象: 視覚的媒体と触覚媒体
min/max 接頭辞: あり

媒体特性 ‘device-height’ は、出力デバイスにおける描画面の高さを表す。連続的な媒体においては画面の高さを表し、ページ媒体においてはページボックスの高さを表す。

<length> に負の値は指定できない。

<link rel="stylesheet" media="screen and (device-height: 600px)" />

この例は、高さがちょうど 600 ピクセルである画面に対して適用されるスタイルシートを表す。単位 ‘px’ の定義は、他の CSS 仕様と同じである。

4.5. orientation

値: portrait | landscape
適用対象: ビットマップ媒体
min/max 接頭辞: なし

媒体特性 ‘orientation’ は、媒体特性 ‘height’ と ‘width’ の値の関係性を表す。‘height’ の値が ‘width’ の値以上である場合は ‘portrait’ となり、そうでない場合は ‘landscape’ となる。

@media all and (orientation:portrait) { ... }
@media all and (orientation:landscape) { ... }

4.6. aspect-ratio

値: <ratio>
適用対象: ビットマップ媒体
min/max 接頭辞: あり

媒体特性 ‘aspect-ratio’ は、媒体特性 ‘width’ と ‘height’ がとる値の比より定義される。

4.7 device-aspect-ratio

値: <ratio>
適用対象: ビットマップ媒体
min/max 接頭辞: あり

媒体特性 ‘device-aspect-ratio’ は、媒体特性 ‘device-width’ と ‘device-height’ がとる値の比より定義される。

たとえば、次のメディアクエリーはすべて、("16:9" と呼ばれる) 幅が 1280 ピクセル、高さが 720 ピクセルのスクリーンデバイスに適合する。

@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) { ... }

4.8. color

値: <integer>
適用対象: 視覚的媒体
min/max 接頭辞: あり

媒体特性 ‘color’ は、出力デバイスが持つ各カラーチャンネルのビット数を表す。デバイスがカラーデバイスでない場合、値は 0 となる。

<integer> に 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] にて今後対応するかもしれない、より細かい媒体特性が提供されている。

4.9. color-index

値: <integer>
適用対象: 視覚的媒体
min/max 接頭辞: あり

媒体特性 ‘color-index’ は、出力デバイスが持つカラーテーブルのエントリ数を表す。デバイスがカラーテーブルを持たない場合、値は 0 となる。

<integer> に負の値は指定できない。

次のメディアクエリーは、すべてのカラーテーブルに適合する。

@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/..." ?>

4.10. monochrome

値: <integer>
適用対象: 視覚的媒体
min/max 接頭辞: あり

媒体特性 ‘monochrome’ はモノクロームフレームバッファにおける階調数を表す。デバイスがモノクロデバイスでない場合、値は 0 をとる。

<integer> に負の値は指定できない。

次のメディアクエリーはどちらも、すべてのモノクロデバイスに適合する。

@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://..." />

4.11. resolution

値: <resolution>
適用対象: ビットマップ媒体
min/max 接頭辞: あり

媒体特性 ‘resolution’ は、ピクセル密度など、出力デバイスの解像度を表す。非正方ピクセルなデバイスにおいて、‘min-resolution’ クエリーはデバイスの最低密度と指定された値を、また ‘max-resolution’ クエリーはデバイスの最高密度と指定された値を比べる必要がある。"min-" や "max-" 接頭辞のつかないただの ‘resolution’ クエリーは、非正方ピクセルなデバイスにおいて適合することはない。

プリンタについては、網点の解像度に対応する (任意の色の印刷ドットの解像度となる)。

たとえば、次のメディアクエリーは、解像度が 300dpi 以上のデバイスに適合する。

@media print and (min-resolution: 300dpi) { ... }

次のメディアクエリーは、118dpcm 以上のデバイスに適合する。

@media print and (min-resolution: 118dpcm) { ... }

4.12. scan

値: progressive | interlace
適用対象: "tv" 媒体
min/max 接頭辞: なし

媒体特性 ‘scan’ は、種類が "tv" である出力デバイスの走査処理方法を表す。

たとえば、次のメディアクエリーは、プログレッシブ方式の TV デバイスに適合する。

@media tv and (scan: progressive) { ... }

4.13. grid

値: <integer>
適用対象: すべての媒体
min/max 接頭辞: なし

媒体特性 ‘grid’ は、出力デバイスがグリッドであるかビットマップであるかを表す。出力デバイスがグリッドベース ("tty" ターミナルや、ひとつの固定フォントしか持たない電話のディスプレイなど) である場合、値は 1 となる。グリッドベースでない場合、値は 0 となる。

0 または 1 が妥当な値として認識される (-0 も妥当である)。そのほかの値を記述すると、非製形式なメディアクエリーとなる。

次にふたつの例を示す。

@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

5.

この仕様は、ふたつの新しい値を導入する。

<ratio> は、スラッシュ (‘/’) で区切られた、ふたつの正の <integer> により表される。スラッシュの前後には空白を記述することができる。

<resolution> は、正の <number> の直後に単位識別子 (‘dpi’ または ‘dpcm’) を記述したものである。空白を間に記述することはできない。

空白や <integer>, <number>, その他の値は、他の CSS 仕様と同じく CSS 2.1 で規範的に定義されているものである [CSS21]

6. 単位

メディアクエリーで使用される単位は、他の CSS 仕様と同じものである。たとえば、ピクセルは CSS ピクセルを意味し、物理的なピクセルを意味しない。

メディアクエリーにおいて相対的な単位は、初期値を基にする。つまり、単位は宣言の結果を基としない。たとえば HTML の場合、html 要素に指定された ‘font-size’ プロパティの初期値が ‘em’ の値となる。

6.1. 解像度

ふたつの単位 ‘dpi’ と ‘dpcm’ はピクセル密度など、出力デバイスの持つ解像度を表す。解像度を表す単位は次の通り。

dpi
CSS インチあたりのドット数 (CSS ‘inch’)
dpcm
CSS センチメートルあたりのドット数 (CSS ‘centimeter’)

この仕様書において、これらの単位は媒体特性 ‘resolution’ のみに使用される。

Acknowledgments

This specification is the product of the W3C Working Group on Cascading Style Sheets.

Comments from Björn Höhrmann, Christoph Päper, Chris Lilley, Simon Pieters, Rijk van Geijtenbeek, Sigurd Lerstad, Arve Bersvendsen, Susan Lesch, Philipp Hoschka, Roger Gimson, Steven Pemberton, Simon Kissane, Melinda Grant, and L. David Baron improved this specification.

References

Normative references

[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

Other references

[HTML401]
Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[HTML5]
Ian Hickson. HTML5. 29 March 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-html5-20120329/
[RFC2531]
G. Klyne; L. McIntyre. Content Feature Schema for Internet Fax. March 1999. Internet RFC 2531. URL: http://www.ietf.org/rfc/rfc2531.txt
[XMLSTYLE]
James Clark; Simon Pieters; Henry S. Thompson Associating Style Sheets with XML documents 1.0 (Second Edition) 28 October 2010. W3C Recommendation. URL: http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/