CSSでのメディアについて。
CSSにおける出力メディアの概念に関して解説します。
- CSS第三水準(CSS 3)では、本記事で述べるメディアの概念を大幅に拡張したメディアクエリが策定されており、平成24年 3月28日現在勧告候補案が公開され、間もなく正式勧告される予定です。
- 本記事で解説するメディアの概念は、メディアクエリに完全に含まれたものとなります。
CSSが対象としている出力メディア。
CSSが対象としている出力メディアには、PC向けのディスプレイだけでなく、携帯電話, プリンタなど様々なメディアがあります。
さらに、映像メディアだけでなく、音声メディアや点字メディアもサポートの範囲にあります。
- 現時点では点字メディアへのスタイルと言うのは確立しておりませんが、メディアの一つとして扱われております。
CSSに於けるメディア型。
さて、CSSでは、メディア型と言うものを定めております。
このメディア型は、HTMLでのmedia属性で取れる値と似ております。
screen- 通常のPCなど高解像度でスクロール出来るディスプレイを指します。
PC向けのユーザエージェントは殆どがこのメディア型となります。
- オペラではフルスクリーンモードとスモールスクリーンモード(モバイル端末では携帯電話モード)は別のメディア型としております。
また、スマートフォンもこのメディア型を採っております。
メディアグループとしては、以下のような属性となります。
- 連続メディア(スクロール可能)
- 視覚メディア
- ビットマップメディア(文字が自由に配置可能)
- 対話型か否かは問いません
tty- テレタイプなど文字幅が固定されている端末を指します。
携帯電話も該当しますが、実際には携帯端末でこの値に対応しているものは無いようです。
メディアグループとしては、以下のような属性となります。
CUI環境向けの視覚系ユーザエージェント、特にリンクス(CSS非対応)はページメディアとは言えこのメディア型に属すると考えられます。
tv- 家庭用テレヴィなどを指します。
メディアグループとしては、以下のような属性となります。
- 連続メディアか, ページメディアか、すなわちスクロールの可否は問いません
- 視覚メディアでも聴覚メディアでもあります(家庭用テレヴィでは映像も音声も出るので)
- ビットマップメディア(文字が自由に配置可能)
- 対話型か否かは問いません
projection- 大きなスクリーンに映し出すプロジェクタなどが該当します。
オペラのフルスクリーンモードはこのメディア型になります。
メディアグループとしては、以下のような属性となります。
- ページメディア(スクロール不可能)
- 視覚メディア
- ビットマップメディア(文字が自由に配置可能)
- 非対話型メディア
但し、オペラのフルスクリーンモードは、対話型メディアの実装となっております。
handheld- 画面が小さい携帯端末を指します。
- 多くの携帯電話(フィーチャーフォン…いわゆるガラケー)
- オペラなどのスモールスクリーンモード
はこのメディア型となります。
メディアグループとしては、以下のような属性となります。
- 連続メディアか, ページメディアか、すなわちスクロールの可否は問いません
- 視覚メディア
- 文字格子メディアか, ビットマップメディアかは問いません
- 非対話型メディア
実際には、WAP 2.0携帯電話やオペラなどのスモールスクリーンモードでは以下の属性となります。
- 連続メディア(スクロール可能)
- 視覚メディア
- ビットマップメディア(文字が自由に配置可能)
- 対話型メディア
print- プリンタ出力を指します。
メディアグループとしては、以下のような属性となります。
- ページメディア(スクロール不可能)
- 視覚メディア
- ビットマップメディア(文字が自由に配置可能)
- 非対話型メディア
braille- 点字出力ディスプレイを指します。
メディアグループとしては、以下のような属性となります。
emboss- 点字出力プリンタを指します。
メディアグループとしては、以下のような属性となります。
aural- 音声ディスプレイを指します。
メディアグループとしては、以下のような属性となります。
- 連続メディア(スクロール可能)
- 聴覚メディア
- 文字格子メディアか, ビットマップメディアかと言う概念はありません
- 対話型か否かは問いません
all- 全デヴァイスを指します。