7. メディア

last modified: 23rd/Aug./2001

Contents

  1. メディアの種類
  2. メディアタイプの特定
    1. link 要素
    2. @import 規則
    3. @media 規則

ここでいう「メディア」とは、ウェブページの出力媒体のことです。例えば、コンピュータスクリーンは、 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
全てのデバイスに適当。

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

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

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

メディア・グループ

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

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

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

relationship between media groups and media types
media types media groups
  continuous/paged visual/audio/speech/tactile grid/bitmap interactive/static
braillecontinuoustactilegridboth
embossedpagedtactilegridstatic
handheldbothvisual, audio, speechbothboth
printpagedvisualbitmapstatic
projectionpagedvisualbitmapinteractive
screencontinuousvisual, audiobitmapboth
speechcontinuousspeechn/aboth
ttycontinuousvisualgridboth
tvbothvisual, audiobitmapboth

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

all
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
visual, interactive
visual, paged

メディアタイプの特定

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

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

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

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

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

@import 規則

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

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

@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" で結構です。

Copyright © 2004 SUGAI, Manabu. All rights reserved.
2001-08-23 published, 2004-06-20 revised.
SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO