2012年7月24日(火) 15時53分10秒 [仕事]

Media Queriesで閲覧環境の細かな条件を指定する方法を解説

CSS3のMedia Queriesを使うと、「描画領域の横幅が800px以下の場合のみ」・「描画領域の横幅が1024px以上の場合のみ」のように、具体的な数値を使った細かな条件で、特定のスタイルを適用させることができます。
その具体的な解説を、All Aboutで公開しました。

■Media Queriesで、画面サイズ別にCSSを切り替える方法（＠All About ホームページ作成）

CSS3のMedia Queriesを使うと、アクセス者の閲覧環境に応じたスタイルの適用（振り分け）が、スクリプトを使わずに、CSS（またはHTMLのlink要素）の記述だけで簡単に実現できます。

アクセス者の閲覧環境（画面サイズ）によってレイアウトを自動的に変更するデザインを「レスポンシブ・デザイン」（Responsive Design）と呼びます。最近は、そのデザイン方法を使って、（PC用サイトやスマートフォン用サイトなど）異なるデバイス向けのサイトを、（それぞれ別個の専用サイトを用意せずに）単一のサイトで実現する方法が使われて来つつあります。
その「レスポンシブ・デザイン」に関しては、次回あたりの記事でもうちょっと具体的に紹介する予定です。