CSS-メディアタイプ

スタイルシートの最も重要な機能の1つは、画面、紙、音声合成装置、点字デバイスなど、さまざまなメディアでドキュメントをどのように表示するかを指定することです。

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

@mediaまたは@ importat-rulesを使用して、スタイルシートからターゲットメディアを指定します。
ドキュメント言語内でターゲットメディアを指定します。

@mediaルール

@mediaのルールは、ルールのセットのターゲットメディアタイプ（カンマで区切られた）を指定します。

以下に例を示します-

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
	
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

ドキュメント言語

HTML 4.0では、LINK要素のmedia属性は、外部スタイルシートのターゲットメディアを指定します-

以下は例です-

<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "foo.css">
         </head>

         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>

認識されたメディアタイプ

CSSメディアタイプに選択された名前は、関連するプロパティが意味を持つターゲットデバイスを反映しています。これらは、メディアタイプが参照することを意図しているデバイスの感覚を与えます。以下に、さまざまなメディアタイプのリストを示します-

シニア番号	値と説明
1	all すべてのデバイスに適しています。
2	aural 音声合成装置を対象としています。
3	braille 点字触覚フィードバックデバイスを対象としています。
4	embossed ページ付き点字プリンターを対象としています。
5	handheld ハンドヘルドデバイス（通常、小さな画面、モノクロ、限られた帯域幅）を対象としています。
6	print ページ付きの不透明な素材、および印刷プレビューモードで画面に表示されるドキュメントを対象としています。ページメディアのセクションを参照してください。
7	projection プロジェクターやOHPフィルムへの印刷など、投影されたプレゼンテーションを対象としています。ページメディアのセクションを参照してください。
8	screen 主にカラーコンピュータ画面を対象としています。
9	tty テレタイプ、端末、または表示機能が制限されたポータブルデバイスなど、固定ピッチの文字グリッドを使用するメディアを対象としています。
10	tv テレビタイプのデバイスを対象としています。

NOTE −メディアタイプ名では大文字と小文字は区別されません。