7. メディア

last modified: 23rd/Aug./2001

Contents

メディアの種類
メディアタイプの特定

ここでいう「メディア」とは、ウェブページの出力媒体のことです。例えば、コンピュータスクリーンは、 screen に分類されます。 CSS では、出力媒体に応じて、文書の見栄えを変更することができます。

このページでは、コンピュータスクリーン (media="screen") 向けの外部スタイルシートと、印刷物と印刷プレビューモード (media="print") 向けの外部スタイルシートを参照しています。ブラウザに「印刷プレビュー」のメニューがある場合には、試してみてください。もしブラウザがメディアタイプをサポートしていれば、コンピュータスクリーンでご覧になる見栄えと、印刷物や印刷プレビューモードでご覧になる見栄えとは、異なっているはずです。

メディアの種類

本稿では殆どふれませんでしたが、全ての CSS Propaty には、一連のメディアタイプが設定されており、該当するメディアでなければ機能しません。コンピュータ・スクリーン screen で機能しないプロパティの代表的なものでは、ページ媒体 print の改ページ、音声合成機器（スピーチ・シンセサイザー） aural の喋る大きさ、速さなどがあります。

CSS ではこのような出力媒体の種類を、メディアタイプとして区別しています。利用できるメディアタイプは以下の通りです：

screen: 非ページ型のコンピュータ・スクリーンを示す。
tty: 固定幅の文字グリッドを用いたメディア、例えば、テレタイプ、端末、表示能力に制限のある携帯デバイスなどを示す。このメディアでは、画素単位 px は使えない。
tv: テレビ型デバイス（解像度、色数が低く、スクロール能力に制限がある）を示す。
projection: プロジェクタを示す。ページ媒体固有の整形モデルが存在する。
handheld: 携帯デバイス（小画面、モノクロ、ビットマップ画像、大域幅に制限がある）を示す。
print: ページ形式の不透明な物質及び、印刷プレビュー・モードで見る文書を示す。ページ媒体固有の整形モデルが存在する。
braille: 点字の触覚をフィードバックするデバイスを示す。
embossed: 点字のページを出力するプリンタを示す。
speech: 音声合成機器を示す。CSS2.1 では、将来の拡張予定のために speech を予約するが、未定義とされる。逆に、CSS2 で定義されたメディア・タイプ aural は、CSS2.1 で廃止予定 (deprecated) とされるが、CSS2.1 仕様書の付録で定義されている。
all: 全てのデバイスに適当。

メディアタイプは、大文字と小文字を区別しません。
メディアタイプの殆どは HTML 4, XHTML 1 での定義と同様。
メディアタイプが指定されていない場合は、一般に all が適用されます。

例えば、次のような場合に、メディアを指定しておくことは有意義です：

印刷媒体 "print" では、明朝、シェリフ系のフォントを小さく出力
PCなどのモニタ "screen" では、ゴシック、サン・シェリフ系のフォントを大きく出力
OHP 用フォイル "projector" では、文字をできる限り大きく

また、次のようなメリットもあります：

無関係なデバイスが、不要なスタイルシートを読み込むロスがない。

例えば、目の不自由な方などが利用する点字出力ブラウザや音声ブラウザに対して、フォントなどのビジュアル指定のスタイルシートは読み込んでも、良いことがありません。システムリソースを浪費し、読み込み時間が無駄なだけです。

メディア・グループ

メディア・タイプ毎に、指定できるプロパティが異なります。CSS 仕様書では、メディアタイプを all を含めた 11 個のグループに分けて定義しています。

各グループ毎に、どのメディアタイプが含まれるかをまとめたのが次のリストです。

continuous

braille, handheld, screen, speech, tty, tv

paged

embossed, handheld, print, projection, tv

visual

handheld, print, projection, screen, tty, tv

audiod

handheld, screen, tv

speech

handheld, speech

tactile

braille , embossed

grid

braille, embossed, handheld, tty

bitmap

handheld, print, projection, screen, tv

interactive

braille, handheld, projection, screen, speech, tty, tv

static

braille, embossed, handheld, print, screen, speech, tty, tv

メディアタイプ毎に、どのグループに属するかをまとめたのが次のテーブルです。

relationship between media groups and media types
media types	media groups
	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	n/a	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both

各々のグループごとに、指定可能なプロパティは、次のように分類されています。

all

視覚フォーマッティング...'display'
内容生成...'content', 'counter-increment', 'counter-reset'

aural

'azimuth', 'cue-after', 'cue-before', 'cue', 'elevation', 'pause-after', 'pause-before', 'pause', 'pitch-range', 'pitch', 'play-during', 'richness', 'speak-header', 'speak-numeral', 'speak-punctuation', 'speak', 'speech-rate', 'stress', 'voice-family', 'volume'

visual

色...'background-attachment', 'background-color', 'background-image', 'background-position', 'background-repeat', 'background', 'color'
マージン...'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'margin'
パッディング...'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'padding'
ボーダー...'border-bottom-color', 'border-bottom-style', 'border-bottom-width', 'border-bottom', 'border-color', 'border-left-color', 'border-left-style', 'border-left-width', 'border-left', 'border-right-color', 'border-right-style', 'border-right-width', 'border-right', 'border-spacing', 'border-style', 'border-top-color', 'border-top-style', 'border-top-width', 'border-top', 'border-width', 'border'
視覚フォーマッティング...'bottom', 'left', 'right', 'top', 'clear', 'direction', 'float', 'position', 'unicode-bidi', 'z-index'
視覚フォーマッティングの詳細...'height', 'line-height', 'max-height', 'max-width', 'min-height', 'min-width', 'vertical-align', 'width'
視覚効果...'clip', 'overflow', 'visibility
リスト...'list-style-image', 'list-style-position', 'list-style-type', 'list-style'
内容生成...'quotes'
フォント...'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'font'
テキスト...'letter-spacing', 'text-align', 'text-decoration', 'text-indent', 'text-transform', 'white-space', 'word-spacing'
テーブル...'border-collapse', 'caption-side', 'empty-cells', 'table-layout'

visual, interactive

ユーザインタフェース...'cursor', 'outline-color', 'outline-style', 'outline-width', 'outline'

visual, paged

ページメディア...'orphans', 'page-break-after', 'page-break-before', 'page-break-inside', 'widows'

メディアタイプの特定

ウェブ文書にスタイルシートを適用させるときに、上述のメディアタイプも指定する方法は、次の三つの方法が用意されています：

link 要素で外部スタイルシートの読み込み
@import 宣言でスタイルシートの合成
@media 宣言でスタイル定義を構造化

`link` 要素

外部スタイルシートを HTML 文書から参照するには、 link 要素を用います。このとき、 HTML 4, XHTML 1.0 では、依存するメディアタイプを指定することが出来ます。

<link rel="stylesheet" type="text/css"
      href="./atomic.css" media="screen, print">

この例では、ファイル atomic.css を、当該文書に適用するスタイルシートとして参照しています。且つ、このリンクは、メディアタイプが screen か print であるデバイスに対してだけ有効です。

media 属性の値は、単独のメディアタイプか、それらをコンマで区切ったリストになります。 rel 属性のリンクタイプはスペース区切りでしたから、間違えないように注意が必要です。

`@import` 規則

他のスタイルシートから規則をインポートするために、 @import 宣言を用います。このとき、メディアタイプを指定することが出来ます。

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

メディアタイプは、単独か、複数のものをコンマで区切ったリストで記述する。
@import 規則は、当該スタイルシート内のあらゆる規則に先行して、スタイルシートの冒頭に記述しなければならない。

`@media` 規則

@import と似たようなものに、 @media があります。これを用いると、一つのスタイルシートに、複数のメディアタイプに対する規則を記述することが出来ます。

@media print {
    /* 紙媒体向けスタイル定義 */
    body { font: 10pt serif }
  }
@media screen {
    /* コンピュータスクリーン向けスタイル定義 */
    body { font: 12pt sans-serif }
  }
@media screen, print {
    /* スクリーン及び紙媒体向けスタイルシート */
    body { line-height: 1.2 }
  }

では、このスタイルシート自体のメディアタイプはどうすればよいでしょう？上記の例では、 media="print, screen" とするのが適当でしょうが、一般には、 media="all" で結構です。