Media Queriesの基本についてまとめてみた

Advertisement

Media Queriesを活用したサイト制作を始めようと思っているので、ざざっと調べたことからまとめてみました。まずは基本から…

Media Queriesってなに?

簡単に言うと、デバイスのスクリーンサイズなどの条件によって、読み込むスタイルが切り替えられるCSS3の機能です。

<link rel="stylesheet" href="nanchara.css" type="text/css" media="print" />

CSS2では上記のように、「print」や「screen」などを指定して印刷向け、スクリーン表示向けといった「media types (媒体型)」を指定して、それぞれのメディア向けにCSSを書くことができました。Media Queriesはこれが拡張されたもので、「media types (媒体型)」にくわえ「width」、「height」、「color」などの「media features (媒体特性)」を指定することで、指定に当てはまる機器に対応したCSSを書けるようにするものです。

指定できる条件

代表的な「media type (媒体型)」

  1. screen
  2. print
  3. projection
  4. handheld
  5. tv

代表的な「media feature (媒体特性)」
width / height

  • max/minの接頭辞が付けられる。例: max-width
  • 出力デバイスの対象表示域の幅・高さを指定
  • スクロールバーがある場合その幅も含まれる ※Webkitのバグで、SafariやChromeでは幅が含まれない模様…

device-width / device-height

  • max/minの接頭辞が付けられる。例: max-width
  • 出力デバイスの描画面の幅・高さを指定
  • スクロールバーの幅は含まれない (?)

orientation

  • portrait/landscapeを指定できる
  • 接頭辞はつけられない
  • 出力デバイスのheightがwidth以上の場合 portrait、逆の場合 landscape になる

指定の例

以下の3つの方法で指定できますが、サイト最適化も考えて、ファイルの読み込み数をできるだけ少なくするために、はじめの@mediaをオススメします。

@media screen and (max-width: 800px) { ... }
@media all and (orientation: portrait) { ... }
@import url(example.css) screen and (max-width: 800px);
<link rel="stylesheet" media="screen and (max-width: 800px)" href="example.css" />

Media Queriesのブラウザサポート

Media Queriesは古いブラウザだとサポートされいないので、それらのブラウザをサポートしたい場合は注意が必要です。

Media Queriesがサポートされていないブラウザ:

  • IE 5+
  • Firefox 1+
  • Safari 2

Media Queriesがサポートされているブラウザ:

  • IE9
  • Firefox 3.5+
  • Opera 7+
  • Safari 3+
  • Chrome

上記のMedia Queriesがサポートされていないブラウザでは、css3-mediaqueries.jsというJavaScriptのライブラリを読み込むことで、その他のブラウザと同じようにMedia Queriesを指定して使うことができるようになります。ちなみに、このJavaScriptだと@importを使えないそうなので、やはり@mediaを使ったCSSの指定が一番良さそうです。

まとめと参考

たとえばMedia QueriesでPC向けサイトをスマートフォンに対応させるのは邪道だ!みたいな意見もあるようですが、それについては次回まとめてみたいと思います。個人的には、ケースバイケースでベストな選択をしていくのが良いとは思っていますが。。。

参考サイト:

  1. Media Queries (W3C Candidate Recommendation 27 July 2010)の日本語版
  2. css3-mediaqueries.js
  3. A tale of two viewports — part one
  4. A tale of two viewports — part two
  5. Browser compatibility — viewports
  6. Media Queries – a collection of responsive web designs
  7. レスポンシブ・ウェブデザインの Media Queries の設定と15px — allWeb blog

“Media Queriesの基本についてまとめてみた” への1件のコメント

  1. […] そこで注目されているのが前回の記事で基本についてまとめた「Media Queries」というCSS3の機能です。この「Media Queries」を使えば各デバイスのスクリーンサイズに合わせてレイアウトを変更することができます。スクリーンサイズに応じた細かい最適化で、ユーザにより良い体験を提供できる機能です。 […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です