広告
■メディアタイプ
メディアごとにスタイルシートを指定
現在のところ、ウェブページはブラウザを使用してパソコンのスクリーン上で表示されることがほとんどですが、
CSSの仕様では、スクリーン以外にもテレビ・プロジェクタ・携帯機器・印刷・音声・点字などの
様々なメディアにウェブページが出力されて利用されることが想定されています。
メディアタイプは<link>要素や<style>要素のmedia属性、または、@mediaで指定します。
メディアタイプを指定することで、スクリーン表示用（screen）やプリント用（print）など、
メディアごとにスタイルシートを指定し分けることができます。
複数のメディアタイプに同じCSSを適用する場合には、メディアタイプの値をカンマ（ , ）で区切って指定します。
例：メディアタイプに合わせてCSSファイルを適用する
<html>
<head>
<link rel=”stylesheet” type=”text/css” media=”screen, tv“ href=”browse.css”>
<link rel=”stylesheet” type=”text/css” media=”handheld“ href=”mobile.css”>
<link rel=”stylesheet” type=”text/css” media=”print“ href=”print.css”>
<style type=”text/css” media=”aural, speech“>
<!–
p {voice-family:male;}
–>
</style>
</head>
<body><p>段落となります。</p></body>
</html>
メディアタイプの値
CSS2で定義されているメディアタイプには以下のものがあります。
| screen | パソコンのスクリーン |
|---|---|
| tty | 文字幅が固定の機器 |
| tv | テレビ |
| projection | プロジェクタ |
| handheld | 携帯機器 |
| プリンタ | |
| braille | 点字ディスプレイ |
| embossed | 点字プリンタ（※CSS2より追加、HTML4.01の仕様には無い値） |
| aural | 音声出力（※CSS 2.1では「aural」は非推奨、新たに「speech」が追加予定） |
| all | すべてのメディア |
| <前へ | 記事一覧へ | 次へ> |
広告