メディア掲載_Web Designing
2012年9月号 スマートフォンに最適化したレスポンシブデザイン

メディアクエリの使い方

CSS3のメディアクエリでは、link要素中のmedia要素やCSSの@media規則を用いて、ウインドウ幅によってスタイルの適応範囲を切り替えていく。利用できる値には、「width／height」「min-width／min-height」「max-width／max-height」などがある。

01サンプルの完成図

このように、PC向けのレイアウトをスマートフォン向けに最適化していく

@media規則での切り替え方

HTML内のlink要素中のmedia属性の記述方法は02を参照してもらいたい。今回は、「min-width」でウインドウ幅が481px以上の時(PC/タブレットなど)はlayout_pc.cssを読み込み、「max-width」でウインドウ幅が480px以下の時(スマートフォン)はlayout_sp.cssを読み込むようにしている。
今回のサンプルではデバイスごとに対応したCSSファイルを用意しているが、単独のCSSにすべてのスタイルを記述したいケースもあるだろう。そのような場合には、@media規則での記述方法が役立つ。media属性での切り替え方と同様に、「width／height」「min-width／min-height」などの値によって適用するスタイルを制限することが可能だ（03）。

02media属性での記述例

複数デバイスに対応する場合、幅の切り替えポイントによって、このような記述を増やしていくことで対応可能だ

03@media規則での記述例

CSSファイルに直接記述して切り替えることも可能だ

2カラムレイアウトから1カラムレイアウトへ

ウインドウサイズが小さくなるスマートフォン向けサイトでは、カラム数を減らして対応するのが一般的だ。「article」要素と「aside」要素で構成される2カラムレイアウトは、それらを囲う親要素である「div id="contents"」の幅と2つの要素を同じ幅にすることで、縦に並ぶ1カラムレイアウトに切り替えている(04、05)。