【Follow up】メディアクエリーを使いこなす
メディアクエリー（Media Queries）は、デバイスの画像解像度やブラウザーのウィンドウサイズ・向きなどの指定条件にあわせて別々のCSSを適用するCSS3の機能です。
CSS 2.1ではMedia Type（メディアタイプ）によって、CSSを適用するメディア（スクリーン、プリンターなど）を指定できました。たとえば、以下のように記述すると指定したCSSをパソコンの画面にだけ適用できます。
■HTMLのlink要素を利用してメディアタイプを指定する方法
<link rel="stylesheet" href="styles.css" media="screen">
■@mediaを利用してスタイルシート内でメディアタイプを指定する方法
@media screen { /* ここにCSSを記述 */ }
メディアタイプにはscreen以外にも以下の表のような値が指定できます。
| メディアタイプ | 意味 |
|---|---|
| all | すべてのデバイス |
| aural | スピーチ |
| braille | 点字 |
| embossed | 点字文書 |
| handheld | モノクロームの携帯電話 |
| プリンター | |
| projection | プロジェクター |
| screen | パソコンの画面 |
| tty | テレタイプライター（ドット印字） |
| tv | テレビ |
CSS3のメディアクエリーは、このメディアタイプをベースに、デバイスのウィンドウサイズやデバイスの向きなどの細かな条件を設定できるように拡張したものです。
メディアクエリーの指定方法
メディアクエリーは、メディアタイプと同様に「link要素」と「@media」を利用した2つの方法で記述できます。
■link要素を利用する場合
<link rel="stylesheet" href=”desktop.css" media="[not|only]メディアタイプ[and](デバイスの条件)" />
■@mediaを利用する場合
@media [not|only]メディアタイプ[and](デバイスの条件){}
メディアクエリーでは、「メディアタイプ」で指定しているデバイスの機能や状態を記述し、条件分岐文のように「真」か「偽」を判定してCSSを振り分けます。条件は「not」「only」「and」などのキーワードを使って記述します。キーワードの意味は下の表を参考にしてください。
| キーワード | 意味 |
|---|---|
| not | ではない |
| only | のみ |
| and | かつ |
「デバイスの条件」は、表のようなプロパティと値を対にして指定します。
| プロパティ | 意味 | 指定できる値 |
|---|---|---|
| width | ウィンドウの幅 | CSSで定義されている長さ（em/ex/ch/cm/mm/in/px/pt/pc） |
| height | ウィンドウの高さ | CSSで定義されている長さ（em/ex/ch/cm/mm/in/px/pt/pc） |
| device-width | デバイスの実際のスクリーンの幅 | CSSで定義されている長さ（em/ex/ch/cm/mm/in/px/pt/pc） |
| device-height | デバイスの実際のスクリーンの高さ | CSSで定義されている長さ（em/ex/ch/cm/mm/in/px/pt/pc） |
| orientation | オリエンテーション | portrait または landscape |
| aspect-ratio | ウィンドウの縦横比 | widthとheightの比率（スラッシュ区切り） |
| device-aspect-ratio | デバイスの縦横比 | widthとheightの比率（スラッシュ区切り） |
| color | カラーのビット数 | |
| color-index | カラーのチャンネル数 | |
| monochrome | モノクロの諧調数 | |
| resolution | 解像度 | dpi/dpcm |
| scan | 走査線 | progressive または interlace |
| grid | グリッドベースのデバイス | dpi/dpcm |
widthやheightなどのプロパティには、「min-」（以上）または「max-」（以下）の接頭辞を付けられます。たとえば、パソコンのスクリーンで、デバイスのウィンドウサイズの横幅が500px以上の場合にdesktop.cssを適用するには以下のように書きます。
<link rel="stylesheet" href=”desktop.css" media="screen and (min-width:500px)" />
パソコンのスクリーンかつデバイスのウィンドウサイズの横幅が500px以上、またはカラーかつプロジェクターの場合に、desktop.cssを適用するには以下のように書きます。
<link rel="stylesheet" href=”desktop.css" media="screen and (min-width:500px),projection and (color)" />
パソコンのスクリーンかつデバイスのウィンドウサイズの横幅が500px以上でない場合、desktop.cssを適用するには以下のように書きます。
<link rel="stylesheet" href=”desktop.css" media="not screen and (min-width:500px)" />
@mediaを利用してCSSドキュメント内にメディアクエリーを書く場合も条件の書き方は同じです。パソコンのスクリーンかつデバイスのウィンドウサイズの横幅が480px以上の場合に{ }内のCSSを適用するには以下のように書きます。
@media screen and (min-width : 480px;){
/*CSSを記述する*/}
@mediaルールを利用する場合は、1枚のスタイルシートの中に複数のウィンドウサイズ向けのスタイルシートを記述します。link要素を利用して複数ファイルを読み込む方法に比べて、@mediaの方がHTTPリクエストの回数が少なく、ページの読み込みが早くなります。スマートフォンなどのモバイルデバイスを対象にする場合は、@mediaを使って書きましょう。
効率のいいメディアクエリーの書き方
メディアクエリーは、「モバイルファースト」の考え方に沿って、スマートフォンなどの小さなスクリーンサイズ向けから記述します。
メディアクエリーの記述の順番
メディアクエリーを指定していない部分のCSSには、最小幅0px以上のスタイルシートを指定します。スマートフォンに最適化したレイアウトの指定に加えて、デスクトップを含めたデバイスで共通で利用される、フォントの色や背景色などのベースとなるスタイルも指定します。
効率のよい記述の考え方
メディアクエリーを使ったスタイルシートでは、メディアクエリーを指定していないデフォルトのスタイルシートとの差分を記述していきます。たとえば、1024px以上ではウィンドウサイズが大きくなるので、floatなどレイアウトに関連する指定を追加します。
@charset "utf-8";
/*最小幅0px以上*/
@media screen and (min-width:480px){
/*最小幅480px以上の指定*/
}
@media screen and (min-width:768px){
/*最小幅768px以上の指定*/
}
@media screen and (min-width:1024px){
/*最小幅1024px以上の指定*/
}
ブラウザーはメディアクエリーの@media内のスタイルシートをすべて読み込んでいると考えられていますが、実際にはブラウザーは最初の@media screen and (min-width:px)の部分のみを読み込み、その後の読み込みを判定しています。たとえば、ウィンドウ幅が480px未満の場合、ブラウザーは以下の指定を読み込みません。
@media screen and (min-width:480px){}
@media screen and (min-width:768px){}
@media screen and (min-width:1024px){}
メディアクエリーを効率よく記述することで、無駄なスタイルシートを読み込ませる必要がなくなります。
著者：菊池 崇（きくち・たかし）
Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。
