最終更新:2014-06-21 (土) 21:26:00 (2070d)  

レスポンシブWebデザイン
Top / レスポンシブWebデザイン

PCタブレットスマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法

メモ

  • あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整

要素技術

Fluid Grid

  • Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン(Fluid Design)」を合わせたもの

Fluid Image

  • レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法

Media Query

  • 像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術

関連

CSSフレームワーク

参考