レスポンシブWebデザインを構成する技術
レスポンシブWebデザインは、「フルードグリッド（Fluid Grid）」「フルードイメージ（Fluid Image）」「メディアクエリー（Media Query）」の3つの技術的な要素で構成されます。
- ●フルードグリッド
- フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン（Fluid Design）」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します。
- ●フルードイメージ
- フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。イギリスのコンサルティングファームClearleftのリチャード・ルター（Richard Rutter）氏によって提唱されました。
- ●メディアクエリー
- メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。
このほかにも、文字をレイアウトの大きさに追随して伸縮する「レスポンシブタイプセッティング（Responsive Typesetting）」や、テーブル（表組）のサイズを調整する「レスポンシブテーブル（Responsive Table）」などの技術があり、必要に応じて利用していきます。
※ ※ ※
次回は簡単なサンプルを作りながら、基本となる3つの技術を使ったレスポンシブWebデザインの基礎を学びます。
