WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

レスポンシブデザイン

RWD / Responsive Web Design

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。

表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。検索エンジンアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。

メディアクエリ(Media Queries)

レスポンシブWebデザインを実装する際にメディアクエリ(Media Queries)というものを使用すると、デバイスのウインドウサイズなどによって読み込むCSSを分岐させることが可能になります。

このCSS3のメディアクエリを使用して、PCのウインドウサイズの場合にはPC用のサイズのCSSスマートフォンのウインドウサイズの場合にはスマートフォン用のCSSを読み込むように振り分けることで、HTMLはそのままでCSSの分岐させるレスポンシブWebデザインが実装できます。

もちろんIE8ではこのメディアクエリが効かないので、「css3-mediaqueries.js」というファイルを使って効くようにします。