【HTML】media属性を使って最適化されているデバイスを指定する

このページについて

このページではHTMLで使う事ができるmedia属性の機能と使い方の解説をしています。

media属性はリンクされたドキュメントが最適化されているデバイスやメディアなどが指定できます。

media属性はhref属性がある場合にのみ使う事ができます。基本的な構文は以下の通りです。

<a href="リンクURL" media="値">リンク</a>

media属性では以下の演算子を使う事ができます。

all	デフォルトで全てのデバイス指定
aural	音声シンセサイザー
braille	点字フィードバック装置
handheld	ハンドヘルドデバイス(小画面、限られた帯域幅)
projection	プロジェクター
print	プリンター
screen	標準的なパソコンなど
tty	固定ピッチ文字グリッドを使用したテレタイプおよび類似メディア
tv	テレビタイプのデバイス(低解像度、限られたスクロール能力)

media属性では値を使って細かく指定することも出来ます。使える値の種類は以下の通りです。

width	ディスプレイの横幅を指定 maxもしくはminを使って、横幅が一定値以上、一定値以下の指定も可能
height	ディスプレイの縦サイズを指定 maxもしくはminを使って、縦サイズが一定値以上、一定値以下なども指定可能
orientation	ターゲットがランドスケープモード(横向き)か、縦向きかを指定
aspect-ratio	ターゲットディスプレイ領域の幅/高さ比を指定します。「Min-」と「max-」が使えます
color	ターゲットディスプレイの色ごとのビットを指定可能。 max-minが使える
color-index	ターゲットデバイスが処理できる色数を指定します max-minが使えます
monochrome	モノクロフレームバッファ内のピクセルあたりのビット数を指定します。 min-maxが使えます
resolution	ターゲットディスプレイ/紙のピクセル密度(dpiまたはdpcm)を指定します。 max-minが使えます
scan	テレビディスプレイのスキャン方法を指定します。可能な値は「プログレッシブ」と「インターレース」です。
grid	出力デバイスがグリッドかビットマップかを指定します。可能な値は、グリッドの場合は「1」、そうでない場合は「0」です。

media属性は扱う事ができる値が多いんですが、実際にはそんな複雑な指定は行いません。

<a href="リンク先URL" media="screen and (min-wight:500px)>リンク先</a>

このように書くと「リンク先は標準的なパソコンなどで、最低でも横幅が500px以上で」という指定内容になります。

基本的にはリンク先がよほどデバイスによって左右されるようなコンテンツの場合に使ったりしますが、滅多に出番はありません。viewportとはまた違ったものなので、そこまで必要とはいえません。