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