メディアクエリについて
メディアクエリとは、メディアタイプとメディア特性を使用して、対象とするデバイスを指定する機能のことです。
基本的な書式は次のようになります。
media="screen and (min-width: 640px)"
screen の部分がメディアタイプ、and が演算子、min-width: 640px がメディア特性です。
メディアクエリはCSSの@media規則などで利用できるほか、このページで紹介するmedia属性を使用して指定することができます。
メディアタイプの一覧
以下のメディアタイプが定義されています。
| メディアタイプ | 説明 |
|---|---|
all |
すべてのデバイス |
screen |
ディスプレイ （PC、タブレット、スマートフォン） |
print |
プリンタ |
speech |
音声出力機器 |
tv |
テレビ |
projection |
プロジェクター |
handheld |
携帯電話 |
tty |
テレタイプなどの文字幅が固定の機器 |
braille |
点字ディスプレイ |
embossed |
点字プリンタ |
- メディアタイプを省略した場合は
allが適用されます。 - 上記のうち
screenはよく利用されています。印刷向けのスタイルを設定するならばprintも覚えておくと良いでしょう。それ以外のメディアタイプは、対応しているデバイスがあるのかどうかも分かりません…。
メディアタイプだけで指定する場合は次のようになります。
media="screen"
上記の指定では、メディアタイプが screen となるデバイスを対象にしています。
メディア特性の一覧
以下のメディア特性が定義されています。
| メディア特性 | min- / max- |
説明 |
|---|---|---|
width |
○ | ビューポートの幅 |
height |
○ | ビューポートの高さ |
device-width |
○ | デバイスの画面の幅 |
device-height |
○ | デバイスの画面の高さ |
orientation |
× | ビューポートの向き （縦長の値は portrait 、横長の値は landscape） |
aspect-ratio |
○ | ビューポートのアスペクト比 （値はスラッシュ区切り、 1/1 など） |
device-aspect-ratio |
○ | デバイスの画面のアスペクト比 （値はスラッシュ区切り、 16/9 など） |
color |
○ | デバイスのカラーコンポーネントあたりのビット数 （カラーでない場合の値は 0） |
color-index |
○ | デバイスのカラールックアップテーブルの項目数 （使用しない場合の値は 0） |
monochrome |
○ | モノクロデバイスのピクセルあたりのビット数 （モノクロでない場合の値は 0） |
resolution |
○ | デバイスの解像度 （値は dpi または dpcm で指定） |
scan |
× | テレビの走査方式 （値は progressive または interlace） |
grid |
× | デバイスがグリッドかビットマップかを参照 （グリッドの場合の値は 1 、ビットマップの場合は 0） |
- とりあえず
widthを覚えておけば、ある程度のことはできると思います。他に、orientationやresolutionも役に立つ場面があるかもしれません。 - ビューポートとは、スクロールバーを含めたブラウザの表示領域のことです。
- ページメディア向けの説明は省略させていただきました。
min- / max-の列に ○ が付いているメディア特性は、min- や max- 接頭辞を付けることができます。
min-- 最小値を表します。～以上という条件を指定したい場合に使用します。
max-- 最大値を表します。～以下という条件を指定したい場合に使用します。
次の例では、width 特性に min- を付けて横幅の最小値を指定しています。
- この例のように、メディア特性は
( )の中に記述する必要があります。
media="screen and (min-width: 640px)"
上記の指定では、メディアタイプが screen で、かつビューポートの幅が640px以上のデバイスを対象にしています
演算子
and 演算子
and 演算子を使うことで、複数の条件を連結することができます。
次の例では、and を使って3つの条件を設定しています。
media="screen and (min-width: 600px) and (max-width: 1000px)"
上記の指定は、メディアタイプが screen で、かつビューポート横幅が600px以上、かつ1000px以下のデバイスを対象としています。
and で連結した場合は、すべての条件に一致するデバイスを対象にすることができます。
カンマ区切り
メディアクエリは、カンマ（ , ）で区切ってリスト化することもできます。
次の例では、2つのメディアクエリをリスト化しています。
media="(max-width: 420px), (orientation: portrait)"
上記の指定は、ビューポートの横幅が420px以内、またはビューポートの向きが縦長のデバイスを対象としています。
, でリスト化した場合は、条件のうち1つ以上に一致したデバイスを対象にすることができます。
上記は次のように記述することもできます。（all and を加えています）
media="all and (max-width: 420px), all and (orientation: portrait)"
not 演算子
メディアクエリの先頭に not 演算子を入れると、その条件に一致しないデバイスを対象にすることができます。
media="not all and (max-width: 420px)"
上記の指定は、ビューポートの横幅が420px以内ではないデバイスを対象にしています。（つまり、横幅が421px以上のデバイスを対象にしている、ということになります）
only 演算子
メディアクエリの先頭に only 演算子を入れると、メディアクエリに対応していない古いブラウザを除外することができます。
media="only screen and (min-width: 600px)"
上記の場合、メディアクエリに対応しているブラウザであれば、only はスキップされてそれ以降のメディアクエリが処理されます。メディアタイプにしか対応していないブラウザでは、only というキーワードが認識できずこの処理は中断されることになります。
メディアクエリのサンプル
使いそうな？メディアクエリのサンプルです。（値の数値は必要に応じて書き換えてください）
- ビューポートの幅 （500px以上）
-
表示領域が広いブラウザ用。
media="screen and (min-width: 500px)" - ビューポートの幅 （500px以下）
-
表示領域が狭いブラウザ用。
media="screen and (max-width: 500px)" - ビューポートの幅と向き （700px以下で横長）
-
スマホの横向き用。
media="screen and (max-width: 700px) and (orientation: landscape)" - ビューポートの幅と向き （500px以下で縦長）
-
スマホの縦向き用。
media="screen and (max-width: 500px) and (orientation: portrait)" - デバイスの解像度 （300dpi以上）
-
高画素密度のディスプレイ用。
media="screen and (min-resolution: 300dpi)" - 印刷 （プリンタでカラーデバイス）
-
カラー印刷用。
media="print and (color)"
省略
特性値の省略
指定内容によっては、メディア特性の値を省略できる場合があります。
例えば、次の2つのメディアクエリは、どちらも同じ条件を指定していることになります。（カラーデバイスを対象にしています）
media="all and (color)"
media="all and (min-color: 1)"
値が 0 でないことだけを表す場合は、上記のように特性名だけで指定することができます。
- ただし、
min-/max-を付けている場合は、値を必ず指定しなければなりません。
メディアタイプの省略
メディアタイプにすべてのデバイスを指定する場合は、その値となる all を省略することができます。
例えば、次の2つのメディアクエリは、どちらも同じ条件を指定していることになります。
media="(min-width: 500px)"
media="all and (min-width: 500px)"
- メディアタイプを省略する場合は、その後に続く
andも省略しておきます。