May 5th,2015
“media”属性
＃
サンプルコード
外部スタイルシートの対象デバイスを指定
<link rel="stylesheet" type="text/css" href="style.css" media="screen and ( min-width: 640px )">
スタイルシートの対象デバイスを指定
<style media="all and ( max-width: 640px )">
メタデータの対象デバイスを指定
<meta name="theme-color" content="#a2d7dd" media="(prefers-color-scheme: light)">
メディアリソースの対象デバイスを指定
<source media="(max-width: 320px)" srcset="sample-320-sp.png">
“media”属性はリソースなどが対象とするデバイスを指定します。
属性値はメディア・クエリを利用します。
＃
メディア・タイプとメディア・クエリ
＃
メディア・クエリとは？
“media”属性の値はCSSで定義されている“メディア・クエリ(Media Queries)”を使用して指定します。
メディア・クエリはHTML4で“link”要素の“media”属性の値として定義されていた“メディア・タイプ”を発展させたものです。メディア・タイプでは対象とするデバイスを大まかなカテゴリで指定することができましたが、これを発展させたメディア・クエリではより細かく対象とするデバイスを指定することができるようになりました。
メディア・クエリは大まかなデバイスの種類であるメディア・タイプと細かいデバイスの特性を表現したメディア・フィーチャーを組み合わせたものです。
＃
＃
メディア・フィーチャーの一覧
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| (min-/max-) width |
出力デバイスの描画域(ビューポート)の横幅 | <length> | 出力デバイスの描画域(ビューポート)の横幅 |
| (min-/max-) height |
出力デバイスの描画域(ビューポート)の高さ | <length> | 出力デバイスの描画域(ビューポート)の高さ |
| (min-/max-) aspect-ratio |
出力デバイスの描画域(ビューポート)のアスペクト比 | <ratio> | 出力デバイスの描画域(ビューポート)のアスペクト比 |
| orientation | 出力デバイスの描画域(ビューポート)の向き | portrait | 出力デバイスの描画域(ビューポート)の高さが横幅よりも大きいか等しい |
| landscape | 出力デバイスの描画域(ビューポート)の横幅が高さよりも大きい | ||
overflow-block |
出力デバイスがブロック軸方向に溢れたコンテンツをどのように扱うか | none | ブロック軸方向に溢れたコンテンツは表示されない |
| scroll | ブロック軸方向に溢れたコンテンツはスクロールすることで表示される | ||
| optional-paged | ブロック軸方向に溢れたコンテンツはスクロールすることで表示されるが、ページ区切りを入れることで次のページに表示させることができる | ||
| paged | ブロック軸方向に溢れたコンテンツは不連続のページに分割され、溢れた分は次のページに表示される | ||
| overflow-inline |
出力デバイスがインライン軸方向に溢れたコンテンツをどのように扱うか | none | インライン軸方向に溢れたコンテンツは表示されない |
| scroll | インライン軸方向に溢れたコンテンツはスクロールすることで表示される | ||
| (min-/max-) horizontal-viewport-segments  |
ビューポートの水平方向の論理的な区分の数 | <integer> | ビューポートの水平方向の論理的な区分の数 |
| (min-/max-) vertical-viewport-segments |
ビューポートの垂直方向の論理的な区分の数 | <integer> | ビューポートの垂直方向の論理的な区分の数 |
| display-mode |
ウェブ・アプリケーションの表示モード | fullscreen | ウェブ・アプリケーションは利用可能な表示領域のすべてを使用し、ブラウザのユーザ・インターフェースは表示されない |
| standalone | ウェブ・アプリケーションをスタンドアロン・アプリケーションのように表示し、ステータス・バーのようなシステムのインターフェースのみ表示する | ||
| minimal-ui | ウェブ・アプリケーションをスタンドアロン・アプリケーションのように表示するが、ナビゲーションのための最小限のナビゲーションのためのユーザ・インターフェースも表示する | ||
| browser | ウェブ・アプリケーションをデバイスが通常のハイパーリンクを開くために使用する方法で表示する | ||
| (min-/max-) resolution |
出力デバイスの解像度 | <resolution> | 出力デバイスの解像度 |
| scan | 出力デバイスの走査方式 | interlace | 出力デバイスはインターレース方式 |
| progressive | 出力デバイスはプログレッシブ方式 | ||
| grid | 出力デバイスがグリッド・デバイスかどうか | 1 | 出力デバイスはグリッド・ベース |
| 0 | 出力デバイスはグリッド・ベースでない | ||
| update |
出力デバイスがどれだけの頻度でコンテンツの表示を更新できるか | none | 一度表示されるとコンテンツは更新されない |
| slow | コンテンツは更新できるが変更をすばやく表示することができない | ||
| fast | コンテンツは更新でき、速度の制約なく変更を表示できる | ||
| environment-blending |
出力デバイスが現実の景色に重ねて描画するかどうか | opaque | 不透明な媒体に表示される |
| additive | 色は現実の景色に加色混合されて表示される | ||
| subtractive | 色は現実の景色に減色混合されて表示される | ||
| (min-/max-) color |
出力デバイスの色成分ごとのビット数 | <integer> | 出力デバイスの色成分ごとのビット数 |
| 0 | 出力デバイスはカラーデバイスではない | ||
| (min-/max-) color-index |
出力デバイスのカラーテーブルのエントリ数 | <integer> | 出力デバイスのカラーテーブルのエントリ数 |
| 0 | 出力デバイスはカラーテーブルを使用しない | ||
| (min-/max-) monochrome |
出力デバイスのモノクロ・フレームバッファのビット数 | <integer> | 出力デバイスのモノクロ・フレームバッファのビット数 |
| 0 | 出力デバイスはモノクロームデバイスではない | ||
| color-gamut |
出力デバイスが対応する色の範囲 | srgb | sRGBの色域、もしくはそれより広い範囲 |
| p3 | DCI-P3の色域、もしくはそれより広い範囲 | ||
| rec2020 | Rec.2020の色域、もしくはそれより広い範囲 | ||
| dynamic-range |
出力デバイスのダイナミック・レンジ | high | ピーク輝度が高く、コントラスト比が高く、色深度が24ビットもしくは8ビットより大きい |
| standard | “high”の条件のいずれかを満たさない | ||
| inverted-colors |
コンテンツが色を反転させて表示されるかどうか | none | 色を通常通り表示する |
| inverted | 色が反転されて表示される | ||
| pointer |
出力デバイスのメインの入力メカニズムがポインティング・デバイスかどうか | none | 出力デバイスのメインの入力メカニズムはポインティング・デバイスではない |
| coarse | 出力デバイスのメインの入力メカニズムは正確性に制約があるポインティング・デバイス | ||
| fine | 出力デバイスのメインの入力メカニズムは正確性が高いポインティング・デバイス | ||
| hover |
出力デバイスのメインの入力メカニズムが要素にホバーできるかどうか | none | 出力デバイスのメインの入力メカニズムはホバーができない |
| hover | 出力デバイスのメインの入力メカニズムはホバーができる | ||
| any-pointer |
出力デバイスにポインティング・デバイスがあるどうか | none | 出力デバイスにはポインティング・デバイスはない |
| coarse | 出力デバイスには正確性に制約があるポインティング・デバイスがある | ||
| fine | 出力デバイスには正確性が高いポインティング・デバイスがある | ||
| any-hover |
出力デバイスにホバーができる入力メカニズムがあるどうか | none | 出力デバイスはホバーができる入力メカニズムはない |
| hover | 出力デバイスはホバーができる入力メカニズムがある | ||
| nav-controls |
ユーザー・エージェントがインターフェースとして明確なナビゲーションのためのコントロールを提供しているかどうか | none | ユーザー・エージェントがインターフェースとして明確なナビゲーションのためのコントロールを提供しない |
| back | ユーザー・エージェントがインターフェースとして明確なナビゲーションのためのコントロールを提供する | ||
| video-color-gamut |
出力デバイスのビデオ・プレーンが対応する色の範囲 | srgb | sRGBの色域、もしくはそれより広い範囲 |
| p3 | DCI-P3の色域、もしくはそれより広い範囲 | ||
| rec2020 | Rec.2020の色域、もしくはそれより広い範囲 | ||
| video-dynamic-range |
出力デバイスのビデオ・プレーンのダイナミック・レンジ | high | ピーク輝度が高く、コントラスト比が高く、色深度が24ビットもしくは8ビットより大きい |
| standard | “high”の条件のいずれかを満たさない | ||
| scripting |
スクリプトが利用できるかどうか | none | スクリプトは利用できない |
| initial-only | スクリプトは文書を読み込んでいる間のみ利用できる | ||
| enabled | スクリプトが利用できる | ||
| prefers-reduced-motion |
ユーザーが最小限のアニメーションを望むかどうか | no-preference | ユーザーは設定を行っていない |
| reduce | ユーザーは最小限のアニメーションを望む | ||
| prefers-reduced-transparency |
ユーザーは最小限の透明効果を望むかどうか | no-preference | ユーザーは設定を行っていない |
| reduce | ユーザーは最小限の透明効果を望む | ||
| prefers-contrast |
ユーザーが高いコントラストを望むか低いコントラストを望むか | no-preference | ユーザーは設定を行っていない |
| less | ユーザーは低いコントラストを望む | ||
| more | ユーザーは高いコントラストを望む | ||
| custom | ユーザーは特定の色の組み合わせを望み、“less”と“more”のいずれでもない | ||
| prefers-color-scheme |
ユーザーが明るい色遣いを望むか暗い色遣いを望むか | light | ユーザーはユーザーは明るい色遣いを望む、もしくはどちらが良いか明確に示していない |
| dark | ユーザーは暗い色遣いを望む | ||
| forced-colors |
強制カラーモードが有効かどうか | none | 強制カラーモードは無効 |
| active | 強制カラーモードが有効 | ||
| prefers-reduced-data |
ユーザーが少ないデータ量での描画を望むかどうか | no-preference | ユーザーは設定を行っていない |
| reduce | ユーザーは少ないデータ量での描画を望む | ||
＃
使用例
すべてのデバイスを対象とする
<link rel="stylesheet" type="text/css" href="style.css" media="all">
“media”属性を省略した場合もすべてのデバイスが対象となります。
スクリーンデバイスとプリンターを対象とする
<link rel="stylesheet" type="text/css" href="style.css" media="screen, print">
ビューポートの幅ごとにスタイルを切り替える
<link rel="stylesheet" type="text/css" href="style-sp.css" media="( max-width: 640px )">
<link rel="stylesheet" type="text/css" href="style-tb.css" media="( min-width: 640px ) and ( max-width: 1280px )">
<link rel="stylesheet" type="text/css" href="style-pc.css" media="( min-width: 1280px )">
レスポンシブウェブデザインのウェブサイトではビューポートの横幅に応じてスタイルシートを切り替えることでウェブページのレイアウトを切り替えます。
ブラウザのライトモードとダークモードでテーマカラーを変える
<link name="theme-color" content="#a2d7dd" media="(prefers-color-scheme: light)">
<link name="theme-color" content="#1f3134" media="(prefers-color-scheme: dark)">
