例
二つの異なるメディアタイプ（画面と印刷）のための二つの異なるスタイルシート：
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
»それを自分で試してみてください 定義と使用法
media属性は、ターゲット・リソースがために最適化されたものメディア/デバイスを指定します。
この属性は、主に異なるメディアタイプごとに異なるスタイルを指定するCSSスタイルシートで使用されます。
media属性が複数の値を受け入れることができます。
ブラウザのサポート
| 属性 | |||||
|---|---|---|---|---|---|
| media | はい | はい | はい | はい | はい |
HTML 4.01とHTML5の違い
media属性は、今以上の値をサポートしています。
構文
<link media="value">
可能なOperators
| 値 | 説明 |
|---|---|
| and | AND演算子を指定します |
| not | NOT演算子を指定します。 |
| , | OR演算子を指定します。 |
デバイス
| 値 | 説明 |
|---|---|
| all | デフォルト。 すべてのデバイスのための適切な |
| aural | スピーチシンセサイザー |
| braille | 点字フィードバック装置 |
| handheld | ハンドヘルドデバイス（小さな画面、限られた帯域幅） |
| projection | プロジェクター |
| 印刷プレビューモード/印刷されたページ | |
| screen | コンピュータ画面 |
| tty | 固定ピッチの文字格子を使用して、テレタイプと同様のメディア |
| tv | テレビ型デバイス（低解像度、制限されたスクロール機能） |
価値観
| 値 | 説明 |
|---|---|
| width | 対象となる表示領域の幅を指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (min-width:500px)" |
| height | 対象となる表示領域の高さを指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (max-height:700px)" |
| device-width | ターゲット表示/紙の幅を指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (device-width:500px)" |
| device-height | ターゲット表示/紙の高さを指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (device-height:500px)" |
| orientation | ターゲット表示/用紙の向きを指定します。 可能な値： "portrait"や"landscape" 例： media="all and (orientation: landscape)" |
| aspect-ratio | 対象となる表示領域の幅/高さの比率を指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | ターゲット表示/紙のデバイス幅/デバイスの高さの比率を指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (aspect-ratio:16/9)" |
| color | ターゲットディスプレイの色あたりのビットを指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (color:3)" |
| color-index | ターゲット表示が扱うことができる色の数を指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (min-color-index:256)" |
| monochrome | モノクロームフレームバッファ内のピクセルあたりのビット数を指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="screen and (monochrome:2)" |
| resolution | ターゲット表示/紙の画素密度（解像度またはDPCM）を指定します。 "min-"と"max-"接頭辞を使用することができます。 例： media="print and (resolution:300dpi)" |
| scan | テレビディスプレイの走査方法を指定します。 可能な値は"progressive"と"interlace" 。 例： media="tv and (scan:interlace)" |
| grid | 出力デバイスがグリッドまたはビットマップであるかどうかを指定します。 可能な値は"1"グリッド、および"0"そうでありません。 例： media="handheld and (grid:1)" |