例
クリック可能な領域を有する画像マップ、:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm" media="screen and (min-color-index:256)">
</map>
»それを自分で試してみてください 定義と使用法
media属性は、ターゲットURLがために最適化されたものメディア/デバイスを指定します。
この属性は、URLは、(iPhoneなどの)特別な機器のために設計されていることを、音声または印刷媒体を特定するために使用されます。
この属性は複数の値を受け入れることができます。
場合にのみ使用されるhref属性が存在しています。
注:この属性は純粋に助言です。
ブラウザのサポート
属性 | |||||
---|---|---|---|---|---|
media | Yes | Yes | Yes | Yes | Yes |
HTML 4.01とHTML5の違い
media属性はHTML5で新しく追加されました。
構文
<area 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)" |