[PR]���ޔԑg�\
����̔ԑg����

ようこそ。

仕様書の規範的なバージョンはW3Cのサイトにある英語版である。翻訳された文書は翻訳からの誤りが含まれているかもしれない。

このバージョン:
http://isweb34.infoseek.co.jp/computer/zinganx/standards/2001/WD-css3-mediaqueries-20010517.html
最新のバージョン:
http://www.jtw.zaq.ne.jp/zing/spec/css3-mediaqueries.html
前のバージョン:
なし
翻訳者:
織田 宏

メディアクエリ(Media queries)

5月17日付 W3C 作業中の草案

この版:
http://www.w3.org/TR/2001/WD-css3-mediaqueries-20010517
最新版:
http://www.w3.org/TR/css3-mediaqueries
前の版:
http://www.w3.org/TR/2001/WD-css3-mediaqueries-20010404
著者:
Håkon Wium Lie, Opera Software, howcome@opera.com
Tantek Çelik, Microsoft Corporation, tantekc@microsoft.com

摘要

HTML4とCSS2は現在、異なるメディアタイプにあわせたメディア依存のスタイルシートに対応している。例えば、ある文書がディスプレイに表示される時はsans-serifフォントを使い、印刷される時はserifフォントを使ってもよい。"Screen"や"print"は定義されたメディアタイプのうちの2つである。スタイルシートがどのような形式の機器に適合しているかを詳しく説明するために、この文書はメディアクエリを提唱する。

メディアクエリはメディアタイプと一つもしくはそれ以上のあるスタイルシートの範囲の制限の表現を含む。提案された中で表現で使われることのある媒体特性は"width[幅]"、"height[高さ]"、"color[色]"である。 メディアクエリを使うことによってその外観は、内容自体を取り替えることなく、一連の機器に適合することが出来る。

最後に、この文書で説明されている媒体特性はIANAの主要な記録所に媒体特性の用語として登録されるべきであることは提案されている。

文書の状態

この節は、この文書が発表された時点での文書の状態を説明する。一連のこの文書の最新状態はW3Cにより維持されている。技術文書の一覧又は"latest version[最新バージョン]"を参照のこと。

これはW3Cの会員や他の利害関係者によって再検討するため公開された公のW3Cの草案である。それは草案の文書であり、いつでも他の文書により更新、変更、廃案される可能性がある。参考資料としてW3Cの草案を使うことや、"進行中の作業"以外のものに引用することは相応しくない。

この文書はCSSワーキンググループ(スタイル活動の一部)によって作成されている。意見は著者に送られるかもしれないが、ワーキンググループは文書に対する反応や議論を出来れば公開メーリングリストwww-style@w3.org上で行うのを歓迎する。(説明過去ログを参照のこと。)

目次Contents

1. 序論(Introduction)

HTML4とCSS2は現在異なるメディアタイプに合わせたメディア依存のスタイルシートに対応している。例えばある文書が、ディスプレイに表示される時はsans-serifフォントを使い、印刷される時はserifフォントを使ってもよい。 HTML4でこれはこのように書かれる:

<link rel="stylesheet" type="text/css" media="print" href="serif.css">
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">

スタイルシート内ではこのように書かれる:

@media print {
  * { font-family: serif }
}
@media screen {
  * { font-family: sans-serif }
}

"print"や"screen"はHTML4で定義された8つのメディアタイプのうちの2つである。ここに全ての一覧を示す: aural, braille, handheld, print, projection, screen, tty, tv。 CSS2はその同じ一覧に加え、"embossed"を点字の感触ある反応の危機と点字印刷機を区別するために定義する。 さらに、"all"はそのスタイルシートが全てのメディアタイプに適合するということを示すために使われる。

特定メディアのスタイルシートはいくつかのユーザーエージェントによって対応される。 前途の例の中としては、最もありふれた特徴は"screen"と"print"を区別することだ。

スタイルシートがどんな形式の機器に適合するのかをさらに詳しく描画するという方法の要望があった。現在のメディアタイプの名前は幾分適当だ。例えば、ある機器が"screen"であることをやめて、代わりに"handheld"になった時に明らかだ。

幸運にも、HTML4はこれらの要求を予測して、メディアタイプのための上位互換の文法を定義している。ここに、HTML4の第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"
    

2. Requirements(必要なもの)

HTML4との下位互換を残しながら、便利で新しい機能を規定する解決策のため、以下の要求が満たされるべきである:

3. The hypothetical example in HTML4(HTMLでの仮定した例)

新しい文法を提唱する前に、HTML4の仕様書から仮定上の例を話し合う方が便利だ:

<link rel="stylesheet" media="screen, 3d-glasses, print and resolution > 90dpi" ... >

上記の例では2つの論理演算子がある。コンマは論理和を意味し、"and"の文字は論理積を意味する。論理和は既にHTML4の仕様書の一部にある。しかしながら、論理積は定義されていない。

上記の例で使われているもう1つの演算子は"greater-than"で、">"がそれを意味する。十分な表現力を持たせるため、これらの演算子も解決策の一部となるであろう。">",">=","<","<=","="。小括弧"("やアンパサンド"&"はHTMLやXMLで予約されている。したがって、使うのには適していない。

最後に、2つの違う用語はこのように使われる。すなわち(上で使われた"resolution: 解像度"やどの)メディアの特徴や、("dpi"などの)単位は名前を必要とする。

W3Cでは、CC/PP (Composite Capabilities/Preference Profiles)の作業で同様の問題を述べている。CC/PPフレームワークの目的は受け手の機器が能力や好みを送り手にどのように表現するかを明確に記すことだ。この計画では、機関は違った方向に進んでいる。すなわちそれはスタイルシートがどのような種類のメディアタイプに適しているのかを宣言する文章だ。それでも、メディアの特徴は両方の場合で使用する。

CC/PP Attribute Vocabulariesという題のワーキングドラフトでは、プリンタやディスプレイのためのクライアント用語が"属性名"一覧の間で定義されていて、5つの一般的なメディアの特徴がある:

名前 説明
charWidth 整数 テキストを表示する機器の表示できる文字数の幅
charHeight 整数 テキストを表示する機器の表示できる文字数の高さ
pix-x 整数 画像を表示する機器のディスプレイの幅
pix-y 整数 画像を表示する機器のディスプレイの高さ
color binary | grey | limited | mapped | full 機器の色の機能の目安

後ろの3つのメディアの特徴はRFC2534:ディスプレイ、プリンタ、ファックス用の媒体特性から取り入れられている。

<pはじめの2つのメディアの特徴は、後ろの3つとは違った名前の付け方(いわゆる"CamelCase"型)を使っていることは注目に値する。

RFC2534はほかの一般的な媒体特性を定義している:

名前 説明
ua-media screen | screen-paged | stationery | transparency | envelope | envelope-plain | continuous 機器の形式を指し示す
dpi 合理的な数値 1インチあたりのドット数での解像度
paper-size letter | a4 | b4 | a3 | legal 出力される機器の1ページの大きさ

いくつかの理由から、これらを直接再利用することはできない:

4.1. RFC 2506

The Internet Assigned Numbers Authority (IANA) は媒体特性用語の中央記録所を設立し、新しい媒体特性を登録するための手続きはRFC2506で説明されている。RFC2506によると、以前に説明された媒体特性が登録されることは提案されている。

5. Media queries(メディアクエリ)

この文章はCSSとHTMLにメディアクエリを加えることを計画する。メディアクエリはメディアタイプとひとつ以上の媒体特性を伴う表現を含む。ここにHTMLで書かれた簡単な例を示す。

<link rel="stylesheet" media="screen and (color)" href="http://style.com/color">

上記の例は(http://style.com/colorにある)とあるスタイルシートが(カラースクリーンであることという)特徴を持ったメディアタイプ("Screen")の機器に適合することを示している。

ここに、CSSで書かれた少し複雑な例を示す:

@media print and (min-height: 11in) { 
  IMG { display: none }
}

上記の例は、11インチよりも短い印刷用紙では、IMG属性は印刷されるべきではないという事を示す。

上記の両方の例で、メディアクエリは太字にした。まさに同じ文法をCSSとHTMLの両方で使うことができるということに注意を向けてほしい。

ここにメディアクエリの定義をpseudo-BNFで示した:

media_query: [only | not]? <media_type> [ 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
  | monochrome | min-monochrome | max-monochrome 
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | resolution | min-resolution | max-resolution

の定義は、CSS2を参照しなさい。

"only"と"not"の言葉は遺物のユーザーエージェントがメディアクエリの他の条件を満たしている機器ではないスタイルシートに適合することを避けるため、許される。"only"と"not"はHTML4のメディアタイプでないので、これは正常に作用するだろう。

6. Examples(具体例)

以下は提唱された文法において表現された一般的な例である:

  1. スタイルシートは色が使えるすべての機器で使えるということを表す:
    <link rel="stylesheet" media="all and (color)" href="http://....">
    @media all and (color) { ... }
    
    
  2. スタイルシートは25cmより幅の広い紙で使えるということを示す:
    <link rel="stylesheet" media="print and (min-width: 25cm)" href="http://....">
    @media print and (min-width: 25cm) { ... }" 
    
  3. 1つ目のスタイルシートはカラー対応の、もう1つは白黒用であることを表す:
    <link rel="stylesheet" media="print and (color)" href="http://...">
    <link rel="stylesheet" media="print and (monochrome)" href="http://...">
    
  4. スタイルシートは幅が400から700ピクセルの表示域(文書が表示されている所のスクリーンや紙の部分)を備えた機器で使うことが出来ることを表す:
    @media screen and (min-width: 400px) and (max-width: 700px) { ... } 
    
  5. スタイルシートは表示域が80文字以上のtty(テレタイプ、ターミナルなど)機器で使うことが出来ることを表す:
    <link rel="stylesheet" media="tty and (min-width: 80ch)" href="...">
    

    "ch"という単位はCSS1/CSS2の部品ではないことに注意しなさい。

  6. スタイルシートはスクリーンや、表示域の幅が20emよりも広いならばハンドヘルド機器で使うことが出来ることを表す。
    @media handheld and (min-width: 20em), 
      screen and (min-width: 20em) { ... }
    

    "em"の値は親要素の文字の大きさを基にしている。

  7. スタイルシートは300dpiより高解像度の機器で使えることを表す:
    @media print and (min-resolution: 300dpi)  { ... }
    

7. Media features(媒体特性)

この説明は視覚的、触感的な機器で使うことが出来る7つの媒体特性を提唱する。同様に、媒体特性は視覚的な定義されることが出来る。

すべての媒体特性は"min-"や"max-"の制約を表現するための弁解を受け入れる。どんな弁解も無しに、表現は値が0と違えば真を返す。実際は、"coor"や"monochrome"を除くすべての媒体特性は弁解でのみ使われる。

7.1. width(幅)

値: <length>長さ
単位: CSS2のすべての長さの単位と"ch"
適合要素: 視覚的、触覚的なメディアタイプ

7.2. height(高さ)

値:  <length>長さ
単位: CSS2のすべての長さの単位と"ch"
適合要素: 視覚的、触覚的なメディアタイプ

7.3. viewport-aspect-ratio(表示面の縦横比)

値: 16:9 | 4:3
単位:
適合要素: tv

7.4. color(色)

値:
単位: 下を参照
適合要素: 視覚的なメディアタイプ

"color"媒体特性は色の構成要素のビット数の最小値を持つ。カラー対応機器でなければ、0が返る。例えば、このようにスタイルシートが全てのカラー対応機器に適合することを表す:

@media all and (color) { ... }

このようにスタイルシートが2ビット以上のカラー対応機器に適合することを表す:

@media all and (min-color: 2) { ... }

例えば、8ビットカラーのシステムが3ビットで赤を、3ビットで緑を、2ビットで青を表現するならば、"color"媒体特性は2の値をもつだろう。

インデックスカラーを持つ機器では、"color"媒体特性はカラーテーブルの構成要素のビット数の最小値を返すだろう。

描画された機能は表面的な段階で色の能力を説明できるだけではない。もしはるかに離れた機能が要求されれば、RFC2531(インターネットファックスのためのスキーマの内容)はより明確なメディアクエリを供給する。例:CIELAB-L-depth CIELAB-a-depth CIELAB-b-depth CIELAB-L-min CIELAB-L-max

7.5. color-index(索引をつけられた色)

値:
単位: 以下を参照
適合要素: 視覚的なメディアタイプ

"color-index"媒体特性は色の一覧表に入力された数を持つ。もし機器が索引をつけられた色を持つ機器でなければ、0が返る。例えば、このようにスタイルシートが全てのインデックスカラーを持った機器に適応することを表す:

@media all and (min-color-index: 1) { ... }

このようにスタイルシートが256以上のインデックスカラーを持つ機器に適合することを表す:

@media all and (min-color-index: 256) { ... }

7.6. monochrome(白黒)

値:
単位: 下を参照
適合要素: 視覚的なメディアタイプ

"monochrome"媒体特性は白黒のフレームバッファの1ピクセル当たりのビット数の数を持つ。もし機器が白黒の機器でなければ、0を返す。例えば、このようにスタイルシートが全ての白黒の機器に適合することを表す:

@media all and monochrome { ... }

このようにスタイルシートが1ピクセル当たり2ビット以上の白黒の機器に適合することを表す:

@media all and (min-monochrome: 2) { ... }

7.7. resolution(解像度)

値:
単位: dpi, li
適合要素: dpiはビットで表現されたメディアタイプに適合し、 li はtvのメディアタイプに適合する。

"li"という単位はTVの見える水平線の数を表す。(例えば"height: 575px"などの)高さのプロパティを使うのと同等の機能を表すことは可能である。これはまだ明らかになっていない。

7.8. scan(走査による画像)

値: progressive | interlace
単位:
適合要素: tv

8. New units(新しい単位)

以下に述べられた単位はある媒体特性では有効であるが、ほかのCSSの状況では利用できるかもしれないしできないかもしれない。