前へ   次へ   目次   プロパティ   索引  

7 メディアタイプ

目次

7.1 メディアタイプの概要

スタイルシートの最も重要な機能の1つは、異なるメディアで文書をどのように提示するかを指定することです。例えば、スクリーン上、紙上、音声合成装置、点字機器などで提示します。

特定のCSSプロパティは特定のメディア専用に設計されています（例えば、'page-break-before'プロパティはページメディアにのみ適用されます）。ただし、異なるメディアタイプのスタイルシートがプロパティを共有する場合もありますが、そのプロパティに異なる値を必要とすることがあります。例えば、'font-size'プロパティはスクリーンと印刷メディアの両方で有用です。これらのメディアタイプは十分に異なるため、共通のプロパティに異なる値を必要とします。通常、文書はコンピュータスクリーン上では紙よりも大きなフォントを必要とします。そのため、スタイルシートまたはスタイルシートの一部が特定のメディアタイプに適用されることを表現する必要があります。

7.2 メディア依存のスタイルシートの指定

現在、スタイルシートのメディア依存を指定する方法は2つあります:

@importルールはカスケードに関する章で定義されています。

7.2.1 @mediaルール

@mediaルールは、メディアタイプ（カンマで区切られる）のターゲットを指定し、一連のステートメント（中括弧で区切られる）を含みます。無効なステートメントは、4.1.7「ルールセット、宣言ブロック、およびセレクター」および4.2「解析エラーの処理規則」に従い無視されなければなりません。@media構造を使用すると、同じスタイルシート内で異なるメディアに対するスタイルシートルールを指定できます:

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

@mediaルールの外にあるスタイルルールは、スタイルシートが適用されるすべてのメディアタイプに適用されます。@media内のアットルールは、CSS 2.2では無効です。

7.3 認識されるメディアタイプ

CSSメディアタイプの名前は、関連するプロパティが意味を持つターゲットデバイスを反映しています。以下のCSSメディアタイプのリストでは、メディアタイプの名前は規範的ですが、説明は情報提供的です。同様に、各プロパティの説明にある「メディア」フィールドも情報提供的です。

all
すべてのデバイスに適しています。
braille
点字触覚フィードバックデバイス向け。
embossed
ページングされた点字プリンタ向け。
handheld
携帯機器向け（通常は小さな画面、限られた帯域幅）。
print
ページ化された資料および印刷プレビューモードで画面上に表示される文書向け。ページ化されたメディアに特有のフォーマット問題については、ページ化されたメディアのセクションを参照してください。
projection
投影型プレゼンテーション向け（例: プロジェクター）。ページ化されたメディアに特有のフォーマット問題については、ページ化されたメディアのセクションを参照してください。
screen
主にカラーコンピュータスクリーン向け。
speech
音声合成装置向け。注: CSS2にはこの目的のための「aural」というメディアタイプがありました。詳細については聴覚スタイルシートの付録を参照してください。
tty
固定ピッチの文字グリッドを使用するメディア（例: テレタイプ、端末、限られた表示機能を持つ携帯機器）向け。著者は「tty」メディアタイプでピクセル単位を使用すべきではありません。
tv
テレビタイプデバイス（低解像度、カラー、限られたスクロール可能な画面、音声利用可能）向け。

メディアタイプ名は大文字小文字を区別しません。

メディアタイプは相互に排他的であり、ユーザーエージェントは文書をレンダリングする際に1つのメディアタイプのみをサポートできます。ただし、ユーザーエージェントは異なるキャンバスで異なるメディアタイプを使用する場合があります。例えば、文書が1つのキャンバスで「screen」モード、別のキャンバスで「print」モードで同時に表示される場合があります。

注: 1つのメディアタイプが複数のモードを持つ場合でも、それは1つのメディアタイプに過ぎません。例えば、「tv」メディアタイプは、1つのキャンバスで視覚的および聴覚的にレンダリングする複数モードのメディアタイプです。

@mediaおよび@importルールで未知の（それでも有効な識別子である）メディアタイプは、未知のメディアタイプが存在しないかのように扱われます。@media/@importルールに形式の誤ったメディアタイプ（識別子ではない）が含まれる場合、そのステートメントは無効です。

注: メディアクエリはこのエラー処理に取って代わります。

例:

例えば、次のスニペットでは、P要素のルールは「screen」モードで適用されます（「3D」メディアタイプが未知であっても）。 

@media screen, 3D {
  P { color: green; }
}

注。 CSSの将来の更新でメディアタイプのリストが拡張される可能性があります。著者は、まだCSS仕様で定義されていないメディアタイプ名に依存するべきではありません。

7.3.1 メディアグループ

このセクションは情報提供を目的としており、規範的ではありません。

各CSSプロパティの定義には、そのプロパティが適用されるメディアタイプが指定されています。プロパティは一般的に複数のメディアタイプに適用されるため、各プロパティ定義の「適用されるメディア」セクションには、個々のメディアタイプではなくメディアグループが記載されています。各プロパティは、その定義にリストされているメディアグループ内のすべてのメディアタイプに適用されます。

CSS 2.2では、次のメディアグループを定義しています:

以下の表は、メディアグループとメディアタイプの関係を示しています:

メディアグループとメディアタイプの関係
メディアタイプ メディアグループ
  連続/ページ 視覚/音声/スピーチ/触覚 グリッド/ビットマップ インタラクティブ/静的
braille 連続 触覚 グリッド 両方
embossed ページ 触覚 グリッド 静的
handheld 両方 視覚、音声、スピーチ 両方 両方
print ページ 視覚 ビットマップ 静的
projection ページ 視覚 ビットマップ インタラクティブ
screen 連続 視覚、音声 ビットマップ 両方
speech 連続 スピーチ N/A 両方
tty 連続 視覚 グリッド 両方
tv 両方 視覚、音声 ビットマップ 両方

前へ   次へ   目次   プロパティ   索引