media 属性

media 属性は、リンク先の文書や読み込む外部リソースが、どのメディアに適用するのかを指定します。media 属性の値は、妥当なメディア・クエリである必要があります。

例えば、link 要素に指定された media 属性値は link 要素によってリンクされるリソースがどのメディアに対して適用されるべきかという指定になります。例えばその外部リソースがスタイルシートであれば、ユーザエージェントは、指定された値が、閲覧中のメディアと一致する場合は文書にスタイルを適用します。

a 要素や area 要素に media 属性が指定されている場合、その値はリンク先の文書が、どのメディア向けに意図されているのかという情報を、参考情報として伝えます。

media 属性に指定できるメディア名は下記の通りです。2つ以上の値を指定したい場合は、カンマ（,） 区切りで複数指定することが可能です。

名前	適用対象
all	全てのデバイス
aural	音声合成装置
braille	点字出力デバイス
handheld	携帯電話など、画面が小さいデバイス
print	プリンタでの印刷、あるいは印刷のプレビュー画面
projection	プロジェクタ。Opera のフルスクリーンモード時もこれに該当します
screen	一般的なコンピュータスクリーン。通常、パソコン、スマートフォンで動作するブラウザソフトはすべて対象になります
tty	テレタイプなど、表示文字幅が固定されたデバイス
tv	テレビなど、解像度や色数に制限があるデバイス

media 属性が省略されている場合は all として取り扱われます。ですので、特に対象デバイスを指定する必要がない場合は指定する必要はありません。

また、メディア名の後ろに 「and」 に続けて細かい条件を指定することも可能です。

media="screen and (max-width: 870px)"

<!-- link 要素に指定した例。指定されたメディアでのみスタイルが適用されます -->
<link media="screen, projection" rel="stylesheet" href="/style.css" />

<!-- 点字デバイス向けの代替文書の場所を示した例。
     ただしブラウザがこの情報を閲覧者に提供するかは不明なため、
     文書内にa 要素などでリンクも設置しておくべきでしょう -->
<link media="braille" title="点字デバイス向け" rel="alternate" href="braille.html" />

<!-- a 要素に指定することでリンク先がプリント用ページであることを示します -->
<p>
 <a media="print" href="print.html">プリント用ページはこちら</a>
</p>