CSS3 〜 media queriesを試してみた
下記画像をクリックすると、検証サイトが開きます。
これでスマフォ対応もばっちり！？
そこまで言い切るだけの知識と経験はないが、マークアップはHTMLで行い、デザインはCSSで行うという役割分担がしっかりされている場合は、media queriesでスマフォ用のレイアウトを適用すれば良いようだ。
「レスポンシブWebデザイン」（Responsive Web Design）は、media queriesを使っているだけなのかな。
さて、media queriesの書き方を説明する。
画面サイズによって文字色を変更する上記画像リンクの実装は下記だ。
<style type="text/css"> @media screen and (max-width: 600px) { .one { color: red; } } /* min-width & max-width */ @media screen and (min-width: 600px) and (max-width: 900px) { .two { color: blue; } } /* min-width */ @media screen and (min-width: 900px) { .three { color: green; } } </style> <html> <h1>Media Queriesを学ぶ</h1> <div class="wrapper one">ウィンドウ幅が600pxより小さい場合は文字列が赤になる</div> <div class="wrapper two">ウィンドウ幅が600pxと900pxの間の場合は文字列が青になる</div> <div class="wrapper three">ウィンドウ幅が900pxより大きい場合は文字列が緑になる</div> </html>
@media screenの部分が、CSS2系に元々あるMedia Type*1という仕様だ。この後に、続く、and (max-width: 600px)の部分がmedia queriesだ。media queriesはmedia typesの拡張。
