HTML <style> media 属性

HTML <style> タグ

定義と使用法

media 属性は、CSSスタイルがどのメディア/デバイスに適用されるか（最適化されるか）を規定するために使用されます。

この属性は、特定のデバイス（例えばiPhone）、オーディオまたは印刷メディアに適用されるスタイルを規定するために使用されます。

ヒント：この属性は、複数の値を受け入れられます。

インスタンス

例1

印刷に使用されるスタイルを規定します：

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

自分で試してみてください。

例2

media属性のwidth特性を使用して、2つのスタイルグループを区別します：

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

自分で試してみてください。

注記：ブラウザのウィンドウ幅が500ピクセル未満の場合は、第1グループのスタイルを使用し、ウィンドウ幅が500ピクセル以上の場合は、第2グループのスタイルを使用します。

文法

<style media="value>

可能な演算子

演算子 説明
and 規定 AND演算子。
not 規定 NOT演算子。
, 規定 OR演算子。

スタイルの使用条件は非常に詳細に設計できます。まずは、対象のデバイス種別を明確にすることが重要です。以下のテーブルは、すべての規定値をまとめています：

デバイス

デバイス 説明
all デフォルト。すべてのデバイスに適用されます。
aural オーディオ合成器。
braille ブラailleフィードバックデバイス。
handheld ハンドヘルドデバイス（小さなスクリーン、限られたバンド幅）。
projection プロジェクター。
print 印刷プレビューモード/印刷ページ。
screen コンピュータのスクリーン。
tty 固定間隔の文字グリッドを使用するテレタイププリンターや同様のメディア。
tv テレビクラスのデバイス（低解像度、スクロール能力が限られている）。

ブラウザはデバイスの分類を解釈する責任があります。一部のデバイス種別（例えばscreenやprint）は、さまざまなブラウザでの解釈が比較的一致していますが、他のデバイス（例えばhandheld）の解釈は自由度が高い可能性があります。したがって、特定のデバイスに対するブラウザの解釈が自分の期待通りであることを確認することは非常に重要です。

特性

特性 説明
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

ターゲットディスプレイ/紙のピクセル密度（dpiまたはdpcm）を定義します。

"min-"と"max-"接頭辞を使用できます。

例えば、media="print and (resolution:300dpi)"
scan

テレビのスキャンモードを定義します。

サポートされている値は progressive と interlace です。

この特性には限定語がありません。

例えば、media="tv and (scan:interlace)"
グリッド

出力デバイスがグリッド型かビットマップ型かを指定します。

グリッド型デバイスは固定のグリッドで内容を表示します。例えば、文字ベースの端末や一行で表示するポケットベルです。

サポートされる値は 0 と 1（1 はグリッド型デバイスを意味します）です。

この特性には限定語がありません。

例：media="handheld and (grid:1)"

width などの特性は、通常 min と max などの限定語と一緒に使用されます。これらの限定語を使用しない場合でも、スタイルの使用が非常に正確なウィンドウサイズに依存することもできますが、限定語を使用することで条件がより柔軟になります。

上表には、使用できるさまざまな機能が記載および説明されています。特別に記載されていない限り、これらの機能は min- と max- で修飾可能で、境界値としてではなく、正確な値として構成されます。

指定されたデバイスの状況と同様に、これらの機能はブラウザによって解釈されます。ブラウザがどの機能を認識し、これらの機能がいつ存在し、使用できるかについての詳細は、複雑で多様です。これらの機能に基づいてスタイルを適用する場合は、全面的なテストを行い、機能が使用できない場合に準備する代替スタイルを用意してください。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

HTML <style> タグ