media属性

link要素のmedia属性は、外部リソースを適用するメディアやデバイスを指定する任意属性。スタイルシートの適応条件の指定に使う。

ブラウザ対応

構文

<link href="URL" rel="リンクタイプ" media="メディアクエリ">

メディアクエリ

メディアクエリには、スタイルシートの適応条件を、メディアタイプやメディア特性で指定する。

演算子を使い、複数の条件を指定することもできる。

メディアタイプ
  • all：全てのデバイス。初期設定値。
  • aural：音声デバイス。
  • braille：点字デバイス。
  • handheld：携帯デバイス。
  • print：プリンター・デバイス。印刷プレビュー。印刷結果。
  • projection：プロジェクター・デバイス。
  • screen：コンピューター・スクリーン。コンピューター用ディスプレイ画面。コンピューター用モニター画面。
  • tty：テレタイプの様なメディア。
  • tv：テレビ型出力デバイス。
メディア特性
  • width：表示領域の幅。min/max前置詞使用可。
  • height：表示領域の高さ。min/max前置詞使用可。
  • device-width：出力デバイスの幅。画面の幅や、印刷用紙の幅。min/max前置詞使用可。
  • device-height：出力デバイスの高さ。画面の高さや、印刷用紙の高さ。min/max前置詞使用可。
  • orientation：縦表示か横表示か。
    • landscape：横表示。
    • portrait：縦表示。
  • aspect-ratio：表示領域のアスペクト比。水平ピクセル数と垂直ピクセル数を、スラッシュ「/」区切りで指定する。min/max前置詞使用可。
  • device-aspect-ratio：出力デバイスのアスペクト比。水平ピクセル数と垂直ピクセル数を、スラッシュ「/」区切りで指定する。min/max前置詞使用可。
  • color：出力デバイスのカラーコンポーネントあたりのビット数。デバイスがカラーデバイスでない場合の値は「0」。min/max前置詞使用可。
  • color-index：出力デバイスのカラールックアップテーブルのエントリ数。min/max前置詞使用可。
  • monochrome：モノクロ・デバイス上のピクセルあたりのビット数。モノクロデバイスでない場合の値は「0」。min/max前置詞使用可。
  • resolution：出力デバイスの解像度。min/max前置詞使用可。
  • scan：テレビ型出力デバイスの走査方式。
    • progressive：プログレッシブ方式。
    • interlace：インターレース方式。
  • grid：出力デバイスがグリッドまたはビットマップであるかどうかを調べる。
演算子
  • and：AND演算子。
  • not：NOT演算子。
  • ,：OR演算子。
  • only：メディアクエリ非対応ブラウザからスタイルシートを隠す。

要点

  • link要素のmedia属性は、外部リソースを適用するメディアやデバイスを指定する属性である。
  • 主に、異なるメディアタイプや、異なる画面サイズごとに、異なるスタイルシートを適用したい時に使う。例えば、印刷用の外部スタイルシートを読み込む場合、media属性にprintを指定する。
  • media属性を指定しない場合、全てのデバイスが適用対象になる。

サンプルコード

印刷に適用

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="print">

携帯デバイスに適用

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="handheld">

コンピューター・スクリーンとプロジェクターに適用

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen, projection">

表示領域の幅が1024px以上であるコンピューター・スクリーンに適用

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen and (min-width:1024px)">

表示領域の幅が768px以上1023px以下である場合に適用

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="(min-width:768px) and (max-width:1023px)">

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<link href="sample-link.css" rel="stylesheet" type="text/css" media="print, (min-width:768px) and (max-width:1023px)">
		<title>link要素のmedia属性のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

CSSファイル

link要素で読み込む「sample-link.css」の内容。

h1 {
    color: #f00;
}
h2 {
    color: #009900;
}
p {
    color: #4800ff;
}

実際の表示

別窓で表示。

サンプルの動作について

印刷プレビューを表示するか、印刷するか、ブラウザの幅を768px以上1023px以下にするかすると、「見出し[h1]」は赤色、「見出し[H2]」は緑色、「記事セクション。」は青色の文字色になる。