Jan. 16th,2019
メディア・クエリについて
“メディア・クエリ”とは？
“メディア・クエリ(Media Queries)”は文書を出力するメディアやデバイスの種類、その特性などの条件に応じてコンテンツを描画できるようにするため仕組みとその仕様を定義したCSS3のモジュールです。
メディア・クエリはCSS2とHTML4で定義されていたメディア・タイプを発展させたもので、2012年6月19日に“Media Queries”の仕様書が勧告されました。
CSS2とHTML4のメディア・タイプではデバイスの大まかなカテゴリを条件とすることができましたが、メディア・クエリではメディア・タイプに加えて新たに定義されたメディア・フィーチャーでさらに細かく条件を定めることができます。
メディア・クエリは“@media”ルールや“@import”ルールでスタイルシートを適用するデバイスの種類や特性を限定するために使用することができます。また、HTMLの“link”要素や“style”要素でもメディア・クエリを使用してスタイルシートの適用対象を限定できます。
メディア・クエリは現在主流となっているレスポンシブウェブデザインの要となる技術でもあり、多くのウェブサイトがメディア・クエリを使用してウェブページをユーザーのデバイスの種類に応じてテキストなどのコンテンツを表示する大きさを変更したり、レイアウト自体を変更したりするようにしています。
メディア・クエリのはたらき
メディア・クエリはユーザーが文書を閲覧するために使用しているメディアやデバイスの種類や特性などを検査するための方法です。基本的にメディア・クエリは文書のコンテンツやスタイリングなどとは独立していて、文書の外部からの情報にのみ依存して機能します。
メディア・クエリは論理式であり、メディアやデバイスを検査して“真(True)”か“偽(False)”かを決定します。メディアやデバイスの種類や特性などがメディア・クエリで指定している条件を満たしていれば“真”、満たしていなければ“偽”となり、“真”であればスタイルが適用されることになります。
空のメディアクエリの検証結果は常に“真”となります(メディア・タイプの“all”と同じ)。
空のメディアクエリ
@media {
/* すべてのデバイスに適用されるスタイル。 */
}
“all”メディア・タイプ
@media all {
/* すべてのデバイスに適用されるスタイル。 */
}
ユーザー・エージェントはユーザーの閲覧環境に変化があった場合にはメディア・クエリを再度検証して真偽を決定します。例えば、ユーザーがブラウザのウィンドウの幅を変更した場合や、スマートフォンを縦画面から横画面にした場合などにはメディア・クエリで指定した条件が満たされているかが再検証されるので既に表示されているウェブページでもスタイルシートを切り替えることができます。
サンプルコード
“@media”ルール
@media screen and (max-width: 640px) {
h1 {
/* 横幅が小さいスマートフォンやタブレットに適用されるスタイル。 */
width: 100%;
min-width: 200px;
}
}
@media screen and (min-width: 640px) {
h1 {
/* 横幅が大きいパソコンやタブレットに適用されるスタイル。 */
width: 700px;
}
}
@media print {
h1 {
/* 印刷する時に適用されるスタイル。 */
width: 100%;
}
}
“link”要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- このスタイルシートは横幅が小さいスマートフォンやタブレットに適用されます。 -->
<link rel="stylesheet" href="css/stylesheet-sp.css" media="screen and (max-width: 640px)">
<!-- このスタイルシートは横幅が大きいパソコンやタブレットに適用されます。 -->
<link rel="stylesheet" href="css/stylesheet-pc.css" media="screen and (min-width: 640px)">
<!-- このスタイルシートは印刷する時に適用されます。 -->
<link rel="stylesheet" href="css/stylesheet-print.css" media="print">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
“style”要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style media="screen and (max-width: 640px)">
/* このスタイルシートは横幅が小さいスマートフォンやタブレットに適用されます。 */
h1 {
width: 100%;
min-width: 200px;
}
</style>
<style media="screen and (min-width: 640px)">
/* このスタイルシートは横幅が大きいパソコンやタブレットに適用されます。 */
h1 {
width: 700px;
}
</style>
<style media="print">
/* このスタイルシートは印刷する時に適用されます。 */
h1 {
width: 100%;
}
</style>
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
仕様書
定義されている仕様書
メディア・クエリの書き方
メディア・クエリの書き方
メディア・クエリは以下の順に記述します。
ユーザーが使用しているメディアやデバイスがメディア・タイプとメディア・コンディションで示された条件をいずれも満たす場合にメディア・クエリは“真”となり、スタイルシートが適用されます。
@media 〚メディア・タイプ〛 and 〚メディア・コンディション〛 {
...
}
単独のメディア・タイプや単独のメディア・コンディションも有効なメディア・クエリです。
@media 〚メディア・タイプ〛 {
...
}
@media 〚メディア・コンディション〛 {
...
}
メディア・クエリの例
メディア・タイプとメディア・コンディション
@media screen and (max-width: 640px) {
/* 描画域の横幅が640px以下のスクリーン・デバイスである場合に適用されるスタイル。 */
}
単独のメディア・コンディション
@media (min-color: 8) {
/* 24ビットカラー以上のカラー・デバイスである場合に適用されるスタイル。 */
}
単独のメディア・タイプ
@media print {
/* プリンタ・デバイスである場合に適用されるスタイル。 */
}
修飾子
メディア・クエリの先頭には必要であれば“メディア・クエリ修飾子(Media Query Modifiers)”を付けることができます。
修飾子には“not”修飾子と“only”修飾子の2種類があり、メディア・クエリの先頭に1個だけ記述することができます。
@media not 〚メディア・タイプ〛 and 〚メディア・コンディション〛 {
...
}
@media only 〚メディア・タイプ〛 and 〚メディア・コンディション〛 {
...
}
修飾子を付けたメディア・クエリの例
“not”修飾子
@media not screen and (max-width: 640px) {
/* 描画域の横幅が640px以下のスクリーン・デバイスでない場合に適用されるスタイル。 */
}
“only”修飾子
@media only screen and (prefers-color-scheme: dark) {
/* ダークモードのスクリーン・デバイスである場合に適用されるスタイル。 */
}
メディア・タイプ
“メディア・タイプ(Media Types)”はあらかじめ定義されているいくつかのキーワードで、ユーザーが使用している大まかなデバイスのカテゴリで条件づけます。
メディア・タイプを指定したメディア・クエリの例
メディア・タイプとメディア・コンディション
@media screen and (scripting: enabled) {
/* スクリプトが使用できるスクリーン・デバイスである場合に適用されるスタイル。 */
}
単独のメディア・タイプ
@media screen {
/* スクリーン・デバイスである場合に適用されるスタイル。 */
}
修飾子とメディア・タイプ
@media not screen {
/* スクリーン・デバイスでない場合に適用されるスタイル。 */
}
メディア・コンディション
“メディア・コンディション(Media Condition)”は1個の“メディア・フィーチャー(Media Features)”、もしくは複数のメディア・フィーチャーを演算子によって組み合わせたもので、ユーザーが使用しているメディアやデバイスをより細かい特性やその状態で条件づけます。
メディア・コンディションを指定したメディア・クエリの例
メディア・タイプとメディア・コンディション
@media screen and (orientation: portrait) {
/* 縦画面のスクリーン・デバイスである場合に適用されるスタイル。 */
}
単独のメディア・フィーチャー
@media (prefers-color-scheme: dark) {
/* ダークモードである場合に適用されるスタイル。 */
}
複数のメディア・フィーチャーを組み合わせたメディア・コンディション
@media screen and (max-width: 640px) and (orientation: portrait) {
/* 描画域の横幅が640px以下で縦画面である場合に適用されるスタイル。 */
}
メディア・クエリ・リスト
コンマ(“,”)で区切られた1個以上のメディア・クエリは“メディア・クエリ・リスト(Media query list)”となります。
メディア・クエリ・リストはコンマで隔てられた複数のメディア・クエリのうち少なくとも一つが“真”であれば“真”、複数のメディア・クエリがすべてが“偽”であれば“偽”と判断されます。
メディア・クエリ・リストに文法的に無効であったり、定義されていないメディア・フィーチャーを含むメディア・クエリがある場合は該当するメディア・クエリは“not all”として扱われますが、他のメディア・クエリは真偽が検証されます。
メディア・クエリ・リストの例
@media screen and (min-width: 640px), print {
/*
・描画域の横幅が640px以上のスクリーン・デバイス
・プリンタ・デバイス
のいずれにも適用されるスタイル
*/
}
メディア・フィーチャーの一覧
| フィーチャー名 | フィーチャー値 | ||
|---|---|---|---|
| 名前 | 説明 | 値 | 説明 |
| (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 | ユーザーは少ないデータ量での描画を望む | ||
