media属性

style要素のmedia属性は、スタイル情報を適用するメディアやデバイスを指定する任意属性。

ブラウザ対応

構文

<style media="メディアクエリ">
	スタイル情報
</style>

メディアクエリ

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

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

メディアタイプ
  • 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：メディアクエリ非対応ブラウザからスタイルシートを隠す。

要点

  • style要素のmedia属性は、スタイル情報を適用するメディアやデバイスを指定する属性である。
  • 主に、異なるメディアタイプや、異なる画面サイズごとに、異なるスタイル情報を適用したい時に使う。例えば、スタイル情報を印刷に適用するには、media属性にprintを指定する。
  • media属性を指定しない場合、全てのメディア/デバイスが適用対象になる。

サンプルコード

印刷に適用

<style media="print">
	スタイル情報
</style>

携帯デバイスに適用

<style media="handheld">
	スタイル情報
</style>

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

<style media="screen, projection">
	スタイル情報
</style>

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

<style media="screen and (min-width:1024px)">
	スタイル情報
</style>

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

<style media="(min-width:768px) and (max-width:1023px)">
	スタイル情報
</style>

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<style media="print, (min-width:768px) and (max-width:1023px)">
		h1 {
			color: #f00;
		}
		h2 {
			color: #009900;
		}
		p {
			color: #4800ff;
		}
		</style>
		<title>style要素のmedia属性のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

実際の表示

別窓で表示。

サンプルの動作について

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