HTML <area> media属性
例
クリック可能な領域を持つイメージマップ：
<img src="planets.gif.html" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm.html" media="screen and (min-color-index:256)">
</map>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm.html" media="screen and (min-color-index:256)">
</map>
試してみる »
ブラウザサポート
すべての主要ブラウザは media 属性をサポートしています
定義と使用方法
media 属性は、対象URLがどのデバイスに表示されるかを指定します。
この属性は、指定されたURLを指定されたデバイス（iPhoneなど）、オーディオ、または印刷メディアに表示するために使用します。
このattributeは複数の値を受け付けることができます。
href属性を使用している場合にのみ、media属性が必要です。
HTML 4.01 と HTML5 の違い
The media attribute is new in HTML5.
構文
<area 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)" |
| 向き | 対象のディスプレイ/用紙の向きを指定します。 可能な値: "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 | Specifies the number of colors the target display can handle. 通常は "min-" および "max-" プレフィックスを使用します。 例: media="screen and (min-color-index:256)" |
| monochrome | モノクロのフレームバッファのピクセルあたりのビット数を指定します。 通常は "min-" および "max-" プレフィックスを使用します。 例: media="screen and (monochrome:2)" |
| resolution | 対象のディスプレイ/用紙のピクセル密度（DPIまたはDPCM）を指定します。 通常は "min-" および "max-" プレフィックスを使用します。 例: media="print and (resolution:300dpi)" |
| scan | テレビディスプレイの走査方法を指定します。 可能な値は "progressive" と "interlace" です。 例: media="tv and (scan:interlace)" |
| grid | 出力デバイスがグリッドまたはビットマップであるかを指定します gridの値は "1"、それ以外は "0" です。 例: media="handheld and (grid:1)" |
その他の拡張