レスポンシブWebデザインに活用されるメディアクエリとは？

こんにちは、デザイナーの山砥です。今日は前回ご紹介させていただいたレスポンシブデザインの熱が冷めやらぬうちにメディアクエリ（Media Queries）について書いていきたいと思います。 鉄は熱いうちに打て、ですね！

CSSの切り替えを行うメディアクエリ

メディアクエリは一言で言ってしまうと、「レスポンシブデザインのスタイルの振り分けを可能にする技術」です。 前回でも触れていますが、レスポンシブデザインは複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウトやデザインを調整することを指します。 そして、このメディアクエリによって画面のサイズに応じてデザインやレイアウトを調整するのです。 CSS2でもmedia属性というものを使って指定していましたが、CSS3のメディアクエリではメディアの特性（ウィンドウ幅や高さ、端末の画面幅や高さ、端末の向きなど）を指定することができます。 例えば、

```css @medeia screen and(max-width:768px){ h1{ color:red; } } ``` と記述した場合、

• メディアタイプ（出力媒体の種類）がscreenで
• ウィンドウの幅が「768px以下」なら
• 見出し1の色を赤にする

という条件でスタイルを適用することが可能になります。 なお、条件を満たしていない場合には無視される仕組みになっています。

メディアクエリの指定方法

メディアクエリの指定方法は実は簡単なのです。

まず「@media」でメディアタイプを指定

スマートフォンやタブレット端末であれば `@media screen {...} ` ページをプリンタで印刷するときは `@media print {...}` 全てのメディアを対象とするときは `@media all {...}` と記述します。

次に端末の特性を加えて条件にする

例えば、 `@media screen and (min-width:481px) {...}` と記述した場合は、「ウィンドウの幅が481px以上」という条件になります。 さらに、追加して `@media screen and (min-width:481px) and (max-width:1024px) {...}` と記述して「ウィンドウの幅が481px以上、1024px以下」という条件とすることもできます。

上記をまとめてみると、 ```css @media screen and (min-width:481px) and (max-width:1024px){ h1 { color:red; } } ``` という指定をしたとき、画面表示は「ウィンドウの幅が481px以上、1024px以下の閲覧環境では見出し1が赤字になり、条件にあてはまらない環境では無視」ということになります。

表示の違いはおおまかにこのようになります。

まとめ

半分実践に入ってしまいましたがいかがでしょうか？ メディアクエリをまとめると

1. レスポンシブWebデザインの「スタイルの振り分け」を可能にする
2. メディアの特性（ウィンドウの幅や端末の向きなど）を指定できる
3. and,or,notなどを使って特性を追加したり排除することができる

ということになります。 また、メディアクエリを活用したレスポンシブデザインのサイトを集めたギャラリーサイトもありますので、こちらもよろしければご覧ください。 Media Queries