ISO Lab

@media規則

@media規則を使うと、パソコンの画面や印刷などの出力対象ごとにスタイルを指定することができます。例えば、

は、プリンタに出力する場合のスタイルを指定します。ここで、「print」がプリンタという出力対象をあらわしています。このような出力対象をあらわすキーワードをメディアタイプ（media type）といいます。メディアタイプには、つぎのものがあります。

CSS 2.1 の仕様では、それぞれのプロパティがどのメディアを対象とするかを、個々のメディアタイプではなくて、メディアタイプをグループ化したメディアグループ（media group）に対して規定しています。

複数のメディアタイプに同じスタイルを指定したい場合は、メディアタイプをカンマ（,）で区切って並べて記述します。たとえば、

とすれば、プリンタと携帯端末の両方に対してスタイルを適用します。

HTML5 で、link要素でCSSのスタイルシートを読み込む場合や、style要素でCSSを記述する場合は、media 属性によってスタイルの対象となるメディアタイプを指定することもできます。たとえば、

とすれば、print.cssに記述されているスタイルは、プリンタに出力する場合に適用されます。

@import規則で使用して、特定の条件を満たすデバイスに対して外部スタイルシートを読み込むこともできます。たとえば、

とすれば、style.cssに記述されているスタイルは、コンピュータでディスプレイに出力される場合に適用されます。

メディアクエリ

CSS3 では、メディアタイプの考え方を拡張したメディアクエリ（media queries）が導入されました。メディアクエリでは、メディアタイプに付け加えて、出力デバイスの詳細な情報を表すメディア特性を用いることができ、これによりデバイスの種類や大きさ、向きなどに応じて適切なスタイルを設定することができます。

メディアクエリの書式

まず、メディアクエリの使用例を示します。

ここで、screenの部分はメディアタイプで、「出力対象がコンピュータディスプレイである」ということをあらわしています。(max-width: 640px)は、「デバイスの表示領域の幅が640px以下である」という論理式です。max-widthの部分をメディア特性（media features）といいます。今の場合、メディアクエリは、この２つをand（論理積、かつ）で結んだもので、次のような意味の論理式となっています：

「出力対象がコンピュータディスプレイで、かつデバイスの表示領域の幅が640px 以下である」

この@media規則は、{ }の中のスタイルを、メディアクエリの論理値が真（true）の場合は適用し、偽（false）の場合は適用しません。

一般に、メディアクエリでは、メディアタイプにandで複数の論理式を結合することができます。つまり、メディアクエリの一般的な書式は次のようになります。

メディアタイプ and ( 論理式1) and (論理式2) …

メディアクエリの値は、メディアタイプがデバイスの種類にマッチし、かつ全ての論理式の値がtrueのときtrue となり、そうでないときfalse となります。ここで、論理式の前後の丸括弧は必須です。丸括弧をつけないとエラーとなります。また、メディアクエリの記述においては、大文字と小文字を区別しません。

更に、複数のメディアクエリをカンマ（,）で区切って並べて記述することができます。この場合、その中の１つ以上の論理値がtrue であれば、関連づけられたスタイルシートが適用されます。つまり、カンマはorの意味となります。たとえば、

は、出力対象がコンピュータディスプレイでかつ表示領域の幅が640px 以下であるか、もしくは出力対象がプロジェクターでかつ表示領域の幅が640px 以下である場合に、{ } の中のスタイルを適用します。

メディア特性

メディアクエリでは、メディアタイプに加えてメディア特性によって定義される論理式をつけ加えて、出力対象のデバイスに関するより細やかな条件を課すことができます。

メディアクエリの論理式で利用できるメディア特性として次のものがあります。

多くのメディア特性には、その前に"min-"もしくは"max-"というプレフィックスをつけることができます（上の表で"min-/max-"の欄が○印であるもの）。"min-"がついた場合は「以上」、"max-" がついた場合は「以下」という意味になります。"min-"もしくは"max-"がついた場合は、メディア特性の後にコロン（:）で区切って値を指定する必要があります。値を指定しないでメディア特性を指定した場合、論理値の値は、特性値の値が0でないデバイスではtrue、0であるデバイスではfalseとなります。たとえば、

とすれば、(color)はRGBの各チャンネルのビット数が1以上であるという意味になり、論理値は全てのカラー表示可能な出力装置に対してtrue、モノクロ表示の出力装置に対してfalseとなります。つまり、全てのカラー表示可能なデバイスに対してスタイルを適用するという意味になります。これは、次の@media規則と同じ意味となります。

ここで、RGBの各チャンネルのビット数が3以上であるデバイスにスタイルを適用するには、次のようにします。

onlyキーワード

onlyキーワードは、メディアクエリの先頭に用いることができ、メディアクエリに対応していない古いWebブラウザに当該スタイルを適用させないために用います。たとえば、

とすれば、メディアクエリに対応していないWeb ブラウザに対しては{  }の中のスタイルを適用せず、対応しているWebブラウザに対しては、出力対象がカラー表示可能なコンピュータディスプレイにの場合に{  }の中のスタイルを適用します。

notキーワード

not キーワードは、メディアクエリの先頭に用いることができ、notの後のメディアクエリの論理否定（NOT）をあらわします。たとえば、

とすれば、出力対象がカラー表示可能なコンピュータディスプレイでない場合に{  }の中のスタイルを適用します。

メディアクエリを使用できる場所

メディアクエリは、CSS2.1でのメディア指定と同じように次の場所で使用することができます。

@media規則

CSSの@media規則で使用して、特定の条件を満たすデバイスに対して当該スタイルを適用させることができます。

@import規則

CSS の@import規則で使用して、特定の条件を満たすデバイスに対して外部スタイルシートを読み込むことができます。

link要素のmedia属性

HTML のlink 要素に対するmedia属性で使用して、特定の条件を満たすデバイスに対して外部スタイルシートを読み込むことができます。

複数のデバイスでスタイルを切り替えるには

スマートフォンやタブレット端末、パソコンなど、画面サイズの異なるデバイスで異なるスタイルシートを適用する場合、スタイルシートを切り替えるブレイクポイント（break point）を設定して、それぞれの条件に合ったスタイルを記述します。これにより、一つのHTMLファイルを各端末装置に最適化して表示することができます。このようなWebデザインの手法を、レスポンシブWebデザイン（responsive web design）といいます。

例えば、iphoneとipad、パソコンでスタイルを切り替えて表示できるWebページを作る場合を考えてみます。まず、iphone5、iphone6、iphone6 Plus、ipad、ipad Retinaのデバイス解像度、ピクセル数は次の表のようになります。

ここで、デバイスピクセル比（device pixel ratio）とは、デバイスのピクセルとCSSでのピクセルの比率のことです。たとえば、iphone5では、デバイス解像度は640px × 1136pxですが、デバイスピクセル比が2であるため、CSSでのピクセル数は320px ×568pxとなります。また、iphoneでは縦向きで表示していて横向きにすると、倍率が拡大されて縦向きと同じピクセル数で表示されます。そこで、iphoneでの縦向きと横向きの幅は同じとして、次のように表示領域の幅のブレークポイントを設定します。

@media規則を使って、これらのブレークポイントでスタイルを切り替えるには、次のようにします。

ここで、メディアクエリの値がfalseである場合は、Webブラウザは{ }の中の規則を読み込みません。このため、上のように記述した場合、iphoneでは最初の@media規則のみが、ipad縦向きでは２番目の@media規則のみが、PCとipad横向きでは３番目の@media規則のみが読み込まれます。

link要素で外部スタイルシートを切り替える場合は、次のようにします。

ここで、deafult.cssはデバイスに依らない共通設定を行う外部スタイルシート、iphone.css、ipad.css、pc.cssは各々iphone用、ipad用、パソコン用の設定を行うための外部スタイルシートです。