HTML <link> media属性
例
2つの異なるメディアタイプ（コンピューター画面と印刷）に対する2つの異なるスタイルシート：
<head>
<link rel="stylesheet" type="text/css" href="theme.css.html">
<link rel="stylesheet" type="text/css" href="print.css.html" media="print">
</head>
<link rel="stylesheet" type="text/css" href="theme.css.html">
<link rel="stylesheet" type="text/css" href="print.css.html" media="print">
</head>
試してみる »
ブラウザサポート
すべての主要ブラウザは media 属性をサポートしています。
定義と使い方
media 属性は、リンク先のドキュメントがどのデバイスに表示されるかを指定します。
この属性は通常、CSS スタイルシートと一緒に使用され、異なるメディアタイプごとに異なるスタイルを指定します。
media 属性はいくつかの値を受け入れます。
HTML 4.01 と HTML5 の違い
media 属性は現在、より多くの値をサポートしています。
構文
<link media="value">
可能な演算子
| 値 | 説明 |
|---|---|
| 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 (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 <link> タグ その他の拡張