このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

メディア・クエリ

記事Jan. 16th,2019
Jul. 14th,2021
スタイルシートの対象とするメディアの条件を指定するためのメディア・クエリについて
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

メディア・クエリについて

“メディア・クエリ”とは?

メディア・クエリ(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>
...

メディア・クエリの書き方

メディア・クエリの書き方

メディア・クエリは以下の順に記述します。

  1. 任意で1個の修飾子(Media Query Modifiers)”
  2. メディア・タイプ(Media Types)”
  3. and”演算子
  4. メディア・コンディション(Media Condition)”

ユーザーが使用しているメディアやデバイスがメディア・タイプメディア・コンディションで示された条件をいずれも満たす場合にメディア・クエリは“真”となり、スタイルシートが適用されます。

メディア・クエリの例
@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 メディア・クエリを否定する
only 古いユーザー・エージェントからメディア・クエリを隠す
修飾子を付けたメディア・クエリの例
not”修飾子
@media not screen and (max-width: 640px) {
/* 描画域の横幅が640px以下のスクリーン・デバイスでない場合に適用されるスタイル。 */
}

only”修飾子
@media only screen and (prefers-color-scheme: dark) {
/* ダークモードのスクリーン・デバイスである場合に適用されるスタイル。 */
}

メディア・タイプ

メディア・タイプ(Media Types)”はあらかじめ定義されているいくつかのキーワードで、ユーザーが使用している大まかなデバイスのカテゴリで条件づけます。

メディア・タイプ 説明
all すべてのデバイス
print プリンタ・デバイス
screen プリンタ・デバイス以外
メディア・タイプを指定したメディア・クエリの例
メディア・タイプとメディア・コンディション
@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-blockMedia Queries Level 4 で追加 出力デバイスがブロック軸方向に溢れたコンテンツをどのように扱うか none ブロック軸方向に溢れたコンテンツは表示されない
scroll ブロック軸方向に溢れたコンテンツはスクロールすることで表示される
optional-paged ブロック軸方向に溢れたコンテンツはスクロールすることで表示されるが、ページ区切りを入れることで次のページに表示させることができる
paged ブロック軸方向に溢れたコンテンツは不連続のページに分割され、溢れた分は次のページに表示される
overflow-inlineMedia Queries Level 4 で追加 出力デバイスがインライン軸方向に溢れたコンテンツをどのように扱うか none インライン軸方向に溢れたコンテンツは表示されない
scroll インライン軸方向に溢れたコンテンツはスクロールすることで表示される
(min-/max-)
resolution
出力デバイスの解像度 <resolution> 出力デバイスの解像度
scan 出力デバイスの走査方式 interlace 出力デバイスはインターレース方式
progressive 出力デバイスはプログレッシブ方式
grid 出力デバイスがグリッド・デバイスかどうか 1 出力デバイスはグリッド・ベース
0 出力デバイスはグリッド・ベースでない
updateMedia Queries Level 4 で追加 出力デバイスがどれだけの頻度でコンテンツの表示を更新できるか none 一度表示されるとコンテンツは更新されない
slow コンテンツは更新できるが変更をすばやく表示することができない
fast コンテンツは更新でき、速度の制約なく変更を表示できる
environment-blendingMedia Queries Level 5 で追加 出力デバイスが現実の景色に重ねて描画するかどうか opaque 不透明な媒体に表示される
additive 色は現実の景色に加色混合されて表示される
subtractive 色は現実の景色に減色混合されて表示される
(min-/max-)
color
出力デバイスの色成分ごとのビット数 <integer> 出力デバイスの色成分ごとのビット数
0 出力デバイスはカラーデバイスではない
(min-/max-)
color-index
出力デバイスのカラーテーブルのエントリ数 <integer> 出力デバイスのカラーテーブルのエントリ数
0 出力デバイスはカラーテーブルを使用しない
(min-/max-)
monochrome
出力デバイスのモノクロ・フレームバッファのビット数 <integer> 出力デバイスのモノクロ・フレームバッファのビット数
0 出力デバイスはモノクロームデバイスではない
color-gamutMedia Queries Level 4 で追加 出力デバイスが対応する色の範囲 srgb sRGBの色域、もしくはそれより広い範囲
p3 DCI-P3の色域、もしくはそれより広い範囲
rec2020 Rec.2020の色域、もしくはそれより広い範囲
dynamic-rangeMedia Queries Level 5 で追加 出力デバイスのダイナミック・レンジ high ピーク輝度が高く、コントラスト比が高く、色深度が24ビットもしくは8ビットより大きい
standard high”の条件のいずれかを満たさない
inverted-colorsMedia Queries Level 5 で追加 コンテンツが色を反転させて表示されるかどうか none 色を通常通り表示する
inverted 色が反転されて表示される
pointerMedia Queries Level 4 で追加 出力デバイスのメインの入力メカニズムがポインティング・デバイスかどうか none 出力デバイスのメインの入力メカニズムはポインティング・デバイスではない
coarse 出力デバイスのメインの入力メカニズムは正確性に制約があるポインティング・デバイス
fine 出力デバイスのメインの入力メカニズムは正確性が高いポインティング・デバイス
hoverMedia Queries Level 4 で追加 出力デバイスのメインの入力メカニズムが要素にホバーできるかどうか none 出力デバイスのメインの入力メカニズムはホバーができない
hover 出力デバイスのメインの入力メカニズムはホバーができる
any-pointerMedia Queries Level 4 で追加 出力デバイスにポインティング・デバイスがあるどうか none 出力デバイスにはポインティング・デバイスはない
coarse 出力デバイスには正確性に制約があるポインティング・デバイスがある
fine 出力デバイスには正確性が高いポインティング・デバイスがある
any-hoverMedia Queries Level 4 で追加 出力デバイスにホバーができる入力メカニズムがあるどうか none 出力デバイスはホバーができる入力メカニズムはない
hover 出力デバイスはホバーができる入力メカニズムがある
video-color-gamutMedia Queries Level 5 で追加 出力デバイスのビデオ・プレーンが対応する色の範囲 srgb sRGBの色域、もしくはそれより広い範囲
p3 DCI-P3の色域、もしくはそれより広い範囲
rec2020 Rec.2020の色域、もしくはそれより広い範囲
video-dynamic-rangeMedia Queries Level 5 で追加 出力デバイスのビデオ・プレーンのダイナミック・レンジ high ピーク輝度が高く、コントラスト比が高く、色深度が24ビットもしくは8ビットより大きい
standard high”の条件のいずれかを満たさない
(min-/max-)
video-widthMedia Queries Level 5 で追加
出力デバイスのビデオ・プレーンの描画域(ビューポート)の横幅 <length> 出力デバイスのビデオ・プレーンの描画域(ビューポート)の横幅
(min-/max-)
video-heightMedia Queries Level 5 で追加
出力デバイスのビデオ・プレーンの描画域(ビューポート)の高さ <length> 出力デバイスのビデオ・プレーンの描画域(ビューポート)の高さ
(min-/max-)
video-resolutionMedia Queries Level 5 で追加
出力デバイスのビデオ・プレーンの解像度 <resolution> 出力デバイスのビデオ・プレーンの解像度
scriptingMedia Queries Level 5 で追加 スクリプトが利用できるかどうか none スクリプトは利用できない
initial-only スクリプトは文書を読み込んでいる間のみ利用できる
enabled スクリプトが利用できる
prefers-reduced-motionMedia Queries Level 5 で追加 ユーザーが最小限のアニメーションを望むかどうか no-preference ユーザーは設定を行っていない
reduce ユーザーは最小限のアニメーションを望む
prefers-reduced-transparencyMedia Queries Level 5 で追加 ユーザーは最小限の透明効果を望むかどうか no-preference ユーザーは設定を行っていない
reduce ユーザーは最小限の透明効果を望む
prefers-contrastMedia Queries Level 5 で追加 ユーザーが高いコントラストを望むか低いコントラストを望むか no-preference ユーザーは設定を行っていない
high ユーザーは高いコントラストを望む
low ユーザーは低いコントラストを望む
prefers-color-schemeMedia Queries Level 5 で追加 ユーザーが明るい色遣いを望むか暗い色遣いを望むか light ユーザーはユーザーは明るい色遣いを望む、もしくはどちらが良いか明確に示していない
dark ユーザーは暗い色遣いを望む
forced-colorsMedia Queries Level 5 で追加 強制カラーモードが有効かどうか none 強制カラーモードは無効
active 強制カラーモードが有効
prefers-reduced-dataMedia Queries Level 5 で追加 ユーザーが少ないデータ量での描画を望むかどうか no-preference ユーザーは設定を行っていない
reduce ユーザーは少ないデータ量での描画を望む
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク