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

メディアクエリ

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

メディアクエリ

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

メディアクエリ(Media Queries)”は文書を出力するデバイスやその特性などの条件に応じてコンテンツを描画できるようにするためのCSS3のモジュールです。@media”ルールでスタイルシートを適用する対象を条件づけたり、HTMLのlink”要素style”要素で適用対象を指定するのに使用することができます。

メディアクエリは現在主流となっているレスポンシブウェブデザインの要となる技術で多くのウェブサイトで使用されています。

メディアクエリは“World Wide Web”で使用される各種技術の標準化を推進する“W3G(World Wide Web Consortium)”によって技術仕様が策定されており、CSS2で定義されていたメディアタイプを発展させて2012年6月19日に勧告されました。現在は最新の仕様として“Media Queries Level 4”と“Media Queries Level 5”が策定されています。

現在正式に技術仕様として勧告されているのは“Media Queries Level 3”と呼ばれるバージョンですが、多くのブラウザが徐々に“Media Queries Level 4”に対応しつつあります。

メディアクエリの書き方

メディアクエリはメディアタイプand”演算子で組み合わされた一つもしくは複数のメディア特性、もしくはand”演算子で組み合わされた一つもしくは複数のメディア特性からなります。

screen and ( min-width: 640px )

上の例では描画領域の横幅が640px以下のスクリーンデバイスであることを条件としています。

not”演算子を使用してメディアクエリを否定したり、コンマ(“,”)を使用して複数のメディアクエリを含むメディアクエリリストとすることもできます。

screen and ( min-width: 640px ), print

上の例では描画領域の横幅が640px以下のスクリーンデバイス、もしくはプリンターデバイスであることを条件としています。

サンプルコード

@media screen and ( min-width: 640px ) {
.sample {
/* このスタイルは横幅が大きいパソコンやタブレットに適用されます。 */
}
}

@media screen and ( max-width: 640px ) {
.sample {
/* このスタイルは横幅が小さいスマートフォンやタブレットに適用されます。 */
}
}

@media print {
.sample {
/* このスタイルは印刷する時に適用されます。 */
}
}

メディアタイプ

“メディアタイプ”とは?

メディアタイプ(media type)”は大まかなデバイスのカテゴリで条件づけるために使用します。

メディアタイプはもともとHTML4で外部リソースを文書と関連付けるためのlink”要素でその適用対象を指定するためのmedia”属性の属性値として定義されていたものです。

“Media Queries Level 3”では多くのメディアタイプが定義されていましたが、“Media Queries Level 4”ではprint”タイプscreen”タイプspeech”タイプに集約され、仕様から削除されたメディアタイプはメディア特性で条件づけることとされています。

not”演算子only”演算子を使用する場合以外はメディアタイプは任意です。省略した場合はall”タイプとみなされ、条件はすべてのデバイスになります。

メディアタイプの一覧

メディアタイプ 説明
all すべてのデバイス
print プリンターデバイス、印刷プレビューや印刷結果
screen スクリーンデバイス(パソコン、スマートフォンなど)
speech 音声出力デバイス
aural注意 音声出力デバイス
braille注意 点字出力デバイス
embossed注意 点字出力プリンタデバイス
handheld注意 モバイルデバイス(フィーチャーフォンなど)
projection注意 プロジェクターデバイス
tty注意 テレタイプなど文字幅が固定されたデバイス
tv注意 テレビ

メディア特性

“メディア特性”とは?

メディア特性(media feature)”はメディアタイプで指定したデバイスを表示領域の大きさなどのそのデバイスが持つ特性でより細かく条件づけるために使用します。

条件を指定する“メディア特性式”はメディア特性とコロン(“:”)を挟んだ値からなります。それぞれのメディア特性式は括弧(“(”と“)”)で囲みます。

( orientation: landscape )

上の例ではデバイスの描画領域の向きが横向きであることを条件とします。

メディア特性は必要な場合に任意で記述することができ、不要の場合は省略できます。省略した場合は条件は特性は関係なくメディアタイプで指定したデバイスすべてになります。

範囲特性

長さなどの数値で値を指定する“範囲特性”では“min-”接頭辞と“max-”接頭辞を使用して最小値と最大値を指定することができます。

接頭辞 説明
max- 最大値
min- 最小値

例えば以下の例ではwidthの最大値を“640px”に指定しているのでビューポートの横幅が640px以下であることを条件とします。

( max-width: 640px )

“Media Queries Level 4”では“min-”接頭辞と“max-”接頭辞の代わりに使用できる“=”演算子、“<”演算子、“>”演算子、“<=”演算子、“>=”演算子が追加され、よりシンプルに範囲を指定できるようになりました。

演算子 説明
= 左は右の値と等しい
< 左は右の値より小さい
<= 左は右の値より小さいか等しい
> 左は右の値より大きい
>= 左は右の値より大きいか等しい

例えば以下の2つの特性式は同じ意味になります。

max-”接頭辞を使用
( max-width: 640px )

<”演算子を使用
( width <= 640px )

また、以下のような範囲の特性式もよりシンプルに記述するごとができます。

min-”接頭辞と“max-”接頭辞を使用
( min-width: 640px ) and ( max-width: 1280px )

<”演算子を使用
( 640px <= width <= 1280px )

=”演算子、“<”演算子、“>”演算子、“<=”演算子、“>=”演算子は新しく追加された定義のためブラウザによっては対応していない可能性があります。

複数のメディア特性を組み合わせる

“Media Queries Level 4”では“not”演算子、“or”演算子、“and”演算子を使用して複数のメディア特性からなる“メディア状態(media condition)”を作ることができるようになりました。

メディア状態は括弧(“(”と“)”)で囲んでメディア特性と同じようにメディアクエリの中に記述することができます。

screen and ( ( max-width: 640px ) or ( min-height: 320px ) )

上の例では描画領域の横幅が640px以上、もしくは描画領域の高さが320px以上のうち少なくともどちらか一つに当てはまり、かつスクリーンデバイスであることを条件としています。

演算子 説明
not メディア特性に当てはまらない
or いずれかのメディア特性に当てはまる
and いずれのメディア特性にも当てはまる

not”演算子はメディア特性の前につけてメディア特性を否定するために使用できます。

not ( monochrome )

上の例ではモノクロデバイスではないことを条件としています。

or”演算子は二つ以上のメディア特性のうち少なくともいずれか一つに当てはまることを条件とします。

( min-width: 640px ) or ( min-height: 320px )

上の例では描画領域の横幅が640px以上、もしくは描画領域の高さが320px以上のうち少なくともどちらか一つに当てはまることを条件としています。

and”演算子は二つ以上のメディア特性のうちすべてに当てはまることを条件とします。

( scripting: enabled ) and ( update: fast )

上の例ではスクリプトが使用可能でかつコンテンツの表示の更新を高頻度で行うことができることを条件としています。

メディア状態は括弧(“(”と“)”)で囲み、“not”演算子、“or”演算子、“and”演算子を使用することで複数組み合わせて一つのメディア状態にすることもできます。

( not ( monochrome ) ) and ( ( max-width: 640px ) or ( min-height: 320px ) )

上の例では描画領域の横幅が640px以上、もしくは描画領域の高さが320px以上のうち少なくともどちらか一つに当てはまり、かつモノクロデバイスではないことを条件としています。

メディア状態は“Media Queries Level 4”で新しく追加された定義のためブラウザによっては対応していない可能性があります。

メディア特性の一覧

メディア特性
メディア特性 説明 説明
(min-/max-)
width
出力デバイスの描画域(ビューポート)の横幅 <length> 出力デバイスの描画域(ビューポート)の横幅
(min-/max-)
height
出力デバイスの描画域(ビューポート)の高さ <length> 出力デバイスの描画域(ビューポート)の高さ
(min-/max-)
aspect-ratio
出力デバイスの描画域(ビューポート)のアスペクト比 <ratio> 出力デバイスの描画域(ビューポート)のアスペクト比
orientation 出力デバイスの描画域(ビューポート)の向き portrait 出力デバイスの描画域(ビューポート)の高さが横幅よりも大きいか等しい
landscape 出力デバイスの描画域(ビューポート)の横幅が高さよりも大きい
(min-/max-)
resolution
出力デバイスの解像度 <resolution> 出力デバイスの解像度
scan 出力デバイスの走査方式 interlace 出力デバイスはインターレース方式
progressive 出力デバイスはプログレッシブ方式
grid 出力デバイスがグリッドデバイスかどうか 1 出力デバイスはグリッドベース
0 出力デバイスはグリッドベースでない
updateMedia Queries Level 4 で追加 出力デバイスがどれだけの頻度でコンテンツの表示を更新できるか none 一度表示されるとコンテンツは更新されない
slow コンテンツは更新できるが変更をすばやく表示することができない
fast コンテンツは更新でき、速度の制約なく変更を表示できる
overflow-blockMedia Queries Level 4 で追加 出力デバイスがブロック軸方向に溢れたコンテンツをどのように扱うか none ブロック軸方向に溢れたコンテンツは表示されない
scroll ブロック軸方向に溢れたコンテンツはスクロールすることで表示される
optional-paged ブロック軸方向に溢れたコンテンツはスクロールすることで表示されるが、ページ区切りを入れることで次のページに表示させることができる
paged ブロック軸方向に溢れたコンテンツは不連続のページに分割され、溢れた分は次のページに表示される
overflow-inlineMedia Queries Level 4 で追加 出力デバイスがインライン軸方向に溢れたコンテンツをどのように扱うか none インライン軸方向に溢れたコンテンツは表示されない
scroll インライン軸方向に溢れたコンテンツはスクロールすることで表示される
(min-/max-)
color
出力デバイスのカラーコンポーネントあたりのビット数 <integer> 出力デバイスのカラーコンポーネントあたりのビット数
0 出力デバイスはカラーデバイスではない
(省略) 出力デバイスはカラーデバイスである
color-gamutMedia Queries Level 4 で追加 出力デバイスが対応する色の範囲 srgb sRGBの色域、もしくはそれより広い範囲
p3 DCI-P3の色域、もしくはそれより広い範囲
rec2020 Rec.2020の色域、もしくはそれより広い範囲
(min-/max-)
color-index
出力デバイスのカラーテーブルのエントリ数 <integer> 出力デバイスのカラーテーブルのエントリ数
0 出力デバイスはカラーテーブルを使用しない
(省略) 出力デバイスはカラーテーブルを使用している
display-mode アプリケーションの表示モード fullscreen 表示領域がすべて使用され、ユーザインターフェースは表示されない
standalone スタンドアロンアプリケーションのように表示領域がすべて使用されるがステータスバーのようなユーザインターフェースは表示される
minimal-ui スタンドアロンアプリケーションのように表示するがナビゲーションのための最小限のナビゲーションのためのユーザインターフェースが表示される
browser ブラウザのようにナビゲーションのためのユーザインターフェースが表示される
(min-/max-)
monochrome
出力デバイスのモノクロフレームバッファのビット数 <integer> 出力デバイスのモノクロフレームバッファのビット数
0 出力デバイスはモノクロームデバイスではない
(省略) 出力デバイスはモノクロームデバイス
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 出力デバイスはホバーができる入力メカニズムがある
light-levelMedia Queries Level 5 で追加 出力デバイスが置かれた環境の明るさ dim 出力デバイスは薄暗く、明るい画面が見づらい環境にある
normal 出力デバイスは画面の明るさと同等の明るさで見やすい環境にある
washed 出力デバイスは過度に明るく、ディスプレイに反射して見づらい環境にある
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 で追加 ユーザーが明るい色遣いを望むか暗い色遣いを望むか no-preference ユーザーは設定を行っていない
light ユーザーは明るい色遣いを望む
dark ユーザーは暗い色遣いを望む
scriptingMedia Queries Level 5 で追加 スクリプトが利用できるかどうか none スクリプトは利用できない
initial-only スクリプトは文書を読み込んでいる間のみ利用できる
enabled スクリプトが利用できる
(min-/max-)
device-width注意
出力デバイスの描画域の横幅 <length> 出力デバイスの描画域の横幅
(min-/max-)
device-height注意
出力デバイスの描画域の高さ <length> 出力デバイスの描画域の高さ
(min-/max-)
device-aspect-ratio注意
出力デバイスの描画域のアスペクト比 <ratio> 出力デバイスの描画域のアスペクト比

論理演算子

“論理演算子”とは?

論理演算子”はメディアタイプと複数のメディア特性を組み合わせて一つのメディアクエリにしたり、メディアクエリを否定したりして複雑な条件をつくるために使用することができます。

論理演算子の一覧

演算子 説明
and 複数の条件を一つのメディアクエリに組み合わせる
not メディアクエリを否定する
only メディアクエリ全体を満たす
, 複数のメディアクエリのうちいずれかを満たす

and”演算子

概要

and”演算子はメディアタイプと複数のメディア特性を組み合わて一つのメディアクエリにする論理演算子です。“and”演算子で組み合わされたメディアタイプメディア特性のすべてを満たすことが条件となります。

一つのメディアタイプと一つ以上のメディア特性、もしくはメディアタイプのみを複数組み合わせることができます。

サンプルコード

@media screen and ( min-width: 640px ) {
.sample {
/* このスタイルはビューポートの横幅640px以下のスクリーンデバイスに適用されます。 */
}
}

not”演算子

概要

not”演算子はメディアクエリを否定する論理演算子です。“not”演算子がつけられたメディアタイプメディア特性ではないことが条件となります。

not”演算子はメディアクエリ全体を否定します。例えば、and”演算子を使用して組み合わせた“not screen and ( min-width: 640px )”では“screen”だけでなく“screen and ( min-width: 640px )”がすべて否定されます。

not”演算子を使用する場合はメディアタイプは省略できません。

サンプルコード

@media not all and ( monochrome ) {
.sample {
/* このスタイルはモノクロではないすべてのデバイスに適用されます。 */
}
}

only”演算子

only”演算子はメディアクエリ全体を満たすことを条件とする論理演算子で、メディア特性に対応していない古いブラウザのために定義されています。

メディアタイプのみが定義されたHTML4やCSS2の仕様に対応する古いブラウザではメディアクエリを最初の英数字でない文字までを認識してそこまでをメディアタイプとして認識するようになっていて、それ以降の文字や認識できない文字列はすべて無視するようになっていました。例えば、“screen and ( min-width: 640px )”は“screen”とだけ認識され、メディア特性によって条件付けしていてもそれが無視され、予期せずスタイルなどが適用されてしまいます。

only”演算子をつけることで“only”を不明なメディアタイプとして認識する古いブラウザではそのメディアクエリには当てはまらないと判定され、予期せずスタイルが適用されるのを防ぐことができます。メディア特性に対応した一般的なブラウザでは“only”演算子はメディアクエリの意味には影響を与えません。

only”演算子を使用する場合はメディアタイプは省略できません。

コンマ

コンマ(“,”)は複数のメディアクエリを含む“メディアクエリリスト”を記述するために使用します。メディアクエリリストで記述されたメディアクエリのうちいずれか一つのメディアクエリに当てはまることが条件となります。

メディアクエリリストの中で、コンマで区切られたメディアクエリはそれぞれ別なものとして扱われます。例えば、メディアクエリリストのうち一つのメディアクエリにnot”演算子がつけられたとしてもnot”演算子が否定するのはそのメディアクエリのみでコンマで区切られたメディアクエリは否定しません。

サンプルコード

@media screen and ( min-width: 640px ), print {
.sample {
/* このスタイルはビューポートの横幅が640px以下のスクリーンデバイスもしくはプリンターデバイスに適用されます。 */
}
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク