[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
Post on:2010年8月20日
sponsors
昨日紹介した「角丸やシャドウだけではないCSS3の大切な三つのテクニック」の一つ、Media Queriesの使い方と実装例を紹介します。
下記は各ポイントを意訳したものです。
はじめに
CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。
Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。
Media Queriesの使い方
まずは、デモページをみてください。
ブラウザのサイズを変更すると、スタイルが変更されます。
デモページ（サイズ：600px以下で表示）
デモページ（サイズ：900px以上で表示）
デモページ（サイズ：600-900pxで表示）
Media Queriesの記述は下記のようになります。
Max Width
ビューエリアが指定したサイズ（600px）より小さい場合に、スタイルが適用されます。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> @media screen and (max-width: 600px) { .one { background: #F9C; } } </textarea> |
ファイルを指定する場合は、下記のように記述します。
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> </textarea> |
Min Width
ビューエリアが指定したサイズ（900px）より大きい場合に、スタイルが適用されます。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> @media screen and (min-width: 900px) { .two { background: #F90; } } </textarea> |
マルチプルMedia Queries
Media Queriesは複数のものを結合することも可能です。ビューエリアが600pxから900pxの場合に、スタイルが適用されます。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> @media screen and (min-width: 600px) and (max-width: 900px) { .three { background: #9CF; } } </textarea> |
Device Width
iPhone用など、デバイスの最大サイズ（480px）を指定することも可能です。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> @media screen and (max-device-width: 480px) { .iphone { background: #ccc; } } </textarea> |
For iPhone 4
iPhone用には特に次のように記述します。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> </textarea> |
For iPad
同様に、iPad用には次のように記述します。
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> </textarea> |
IE用のMedia Queries対策
Media Queriesは現在のIE8ではサポートされていません。Media Queriesと同等の機能を実装するためにはJavaScriptを利用する必要があります。
- jQuery Media Queries Plugin
- CSS Tricks - using jQuery to detect browser size
- The Man in Blue - using Javascript
Media Queriesの実装例
次に紹介するサイトは、Media Queriesをサポートするブラウザ（Firefox, Chrome, Safari）でみてください。ブラウザのサイズを変えるとどのようにレイアウトが変わるか楽しんでください。
Hicksdesign
サイドバー：3カラム
サイドバー：2カラム
真ん中のカラムが左に落ちます。
サイドバー：1カラム
ロゴの下に全てが落ちます。
サイドバー：無し
ロゴと右のカラムが上部に移動します。サイドバーのカラムは下部へ移動します。
下記のサイトでもレイアウトがどのように変わるか、ブラウザのサイズを変えて見てみてください。
おわりに
モバイル用に最適化されたスタイルシートを用意することは、決してそのサイトがモバイルに最適化されたことを意味するものではありません。モバイル用に本当に最適化するには画像とマークアップのロードサイズを最適化する必要があります。
Media Queriesとは最適化のためではなく、プレゼンテーションのためのものです。
sponsors
