[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例

昨日紹介した「角丸やシャドウだけではないCSS3の大切な三つのテクニック」の一つ、Media Queriesの使い方と実装例を紹介します。

サイトのキャプチャ

CSS3 Media Queries

下記は各ポイントを意訳したものです。

はじめに

CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。

Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。

Media Queriesの使い方

まずは、デモページをみてください。
ブラウザのサイズを変更すると、スタイルが変更されます。

デモのキャプチャ

デモページ(サイズ:600px以下で表示)

デモのキャプチャ

デモページ(サイズ:900px以上で表示)

デモのキャプチャ

デモページ(サイズ:600-900pxで表示)

Media Queriesの記述は下記のようになります。

Max Width

ビューエリアが指定したサイズ(600px)より小さい場合に、スタイルが適用されます。

ファイルを指定する場合は、下記のように記述します。

Min Width

ビューエリアが指定したサイズ(900px)より大きい場合に、スタイルが適用されます。

マルチプルMedia Queries

Media Queriesは複数のものを結合することも可能です。ビューエリアが600pxから900pxの場合に、スタイルが適用されます。

Device Width

iPhone用など、デバイスの最大サイズ(480px)を指定することも可能です。

For iPhone 4

iPhone用には特に次のように記述します。

For iPad

同様に、iPad用には次のように記述します。

IE用のMedia Queries対策

Media Queriesは現在のIE8ではサポートされていません。Media Queriesと同等の機能を実装するためにはJavaScriptを利用する必要があります。

Media Queriesの実装例

次に紹介するサイトは、Media Queriesをサポートするブラウザ(Firefox, Chrome, Safari)でみてください。ブラウザのサイズを変えるとどのようにレイアウトが変わるか楽しんでください。

サイトのキャプチャ

Hicksdesign
サイドバー:3カラム

サイトのキャプチャ

サイドバー:2カラム
真ん中のカラムが左に落ちます。

サイトのキャプチャ

サイドバー:1カラム
ロゴの下に全てが落ちます。

サイトのキャプチャ

サイドバー:無し
ロゴと右のカラムが上部に移動します。サイドバーのカラムは下部へ移動します。

下記のサイトでもレイアウトがどのように変わるか、ブラウザのサイズを変えて見てみてください。

サイトのキャプチャ

Colly

サイトのキャプチャ

A List Apart

サイトのキャプチャ

TeeGallery

おわりに

モバイル用に最適化されたスタイルシートを用意することは、決してそのサイトがモバイルに最適化されたことを意味するものではありません。モバイル用に本当に最適化するには画像とマークアップのロードサイズを最適化する必要があります。
Media Queriesとは最適化のためではなく、プレゼンテーションのためのものです。

top of page

©2016 coliss
o