HTML <style> media属性
例
2つの異なるメディアタイプ（スクリーンと印刷）向けの2つの異なるスタイルシート：
試してみる »
ブラウザサポート
すべての主要ブラウザがmedia属性をサポートしています。
定義と用法
media属性は、現在のリソースがどのメディア/デバイス向けに最適化されているかを指定します。
この属性は、異なるメディアタイプごとに異なるスタイルを指定するCSSスタイルシートで主に使用されます。
ヒント：この属性は複数の値を受け付けることができます。
HTML 4.01 と HTML5 の違い
なし。
構文
可能な演算子
| 值 | 説明 |
|---|---|
| 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 |
ターゲットディスプレイ/用紙の device-width/device-height 比率を指定します。 "min-" および "max-" プレフィックスを使用できます。 例：media="screen and (device-aspect-ratio:16/9)" |
| color |
ターゲットディスプレイの bits/color を指定します。 "min-" および "max-" プレフィックスを使用できます。 例：media="screen and (color:3)" |
| color-index |
ターゲットディスプレイが処理できる色数を指定します。 "min-" および "max-" プレフィックスを使用できます。 例：media="screen and (min-color-index:256)" |
| monochrome |
モノクロフレームバッファの bits/pixel を指定します。 "min-" および "max-" プレフィックスを使用できます。 例：media="screen and (monochrome:2)" |
| resolution |
ターゲットディスプレイ/用紙のピクセル密度（dpi または dpcm）を指定します。 "min-" および "max-" プレフィックスを使用できます。 例：media="print and (resolution:300dpi)" |
| scan |
tv ディスプレイの走査方式を指定します。 可能な値："progressive" および "interlace"。 例：media="tv and (scan:interlace)" |
| grid |
出力デバイスがグリッドかビットマップかを指定します。 可能な値："1" はグリッド、それ以外は "0"。 例：media="handheld and (grid:1)" |
HTML <style> タグ その他の拡張