こんにちは。TAKEUCHIです。

最近業務で使用した、CSS3 Media Queriesについて簡単に紹介します。

Media Queriesを使うと、デバイスの細かい仕様に応じて、スタイルシートの割り振りを指定できるようになります。
よくレスポンシブウェブデザインという言葉を耳にしますが、それを容易に実現できるということです。

やり方は二つあります。

●link要素のmedia属性で変更する
HTMLの内に下記のタグを記述します。

・表示領域が480px以下の場合に”style_480.css”を適用

　<link rel=”stylesheet” href=”style_480.css” type=”text/css” media=”screen and (max-width: 480px)” >

---

・表示領域が640px以上の場合に”style_640.css”を適用

　<link rel=”stylesheet” href=”style_640.css” type=”text/css” media=”screen and (min-width: 640px)”>

---

・表示領域が481px以上かつ、800px以下の場合に”style_481_800.css”を適用

　<link href=”style_481_800.css” rel=”stylesheet” type=”text/css”
media=”screen and (min-width: 481px) and (max-width: 800px)” >

---

・表示領域が300px以上または、px以下の場合に”style_481_800.css”を適用

　<link href=”style_481_800.css” rel=”stylesheet” type=”text/css”
media=”screen and (min-width: 300px), screen and (max-width: 900px)” >

---

●一つのCSSで変更する
CSSの中に下記のプロパティを記述します。

・表示領域が480px以下の場合に適用

　@media screen and (max-width: 480px) {
　　#container {
　　　　width : 95%;
　　}
　}

・表示領域が640px以下の場合に適用

　@media screen and (min-width: 640px) {
　　#container {
　　　　width : 100%;
　　}
　}

・表示領域が481px以上、800px以下の場合に適用

　@media screen and (min-width: 481px) and (max-width: 800px) {
　　#container {
　　　　width : 80%;
　　}
}

（調べた限りではCSSに直接記入する場合、列挙の記述は見当たらなかったです。）

上記の記述をすれば、簡単に画面サイズ別にCSSを指定することが出来ます。
私が業務で制作したときは、link要素のmedia属性で変更する方法で実装しました。

また、InternetExplorer8以下にMediaQueriesが対応していないようです。

参考HP:　http://fmbip.com/litmus/

なのでこちらのプラグインを入れるとMediaQueriesが使えるようになります。
https://code.google.com/p/css3-mediaqueries-js/

（上記のサイトからだとうまくDL出来なかったので私は下記のURLを直接~~の中に記述しました。）

---

<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”>

---

MediaQueriesは意外と簡単に実装することが出来るので、是非やってみてはいかがでしょうか

以上です。