2020.08.19
もう今や、ほとんどのサイトで主流となっているレスポンシブデザイン。
今更聞きづらい内容になっていますので、こっそりここで復習です。
■レスポンシwebブデザインとは？
PC、タブレット、スマートフォンなど、
あらゆるデバイスに最適化したWebサイトを、
“単一のHTML”で実現する制作手法です。
ブラウザのスクリーンサイズを基準に、
CSSでレイアウトを調整することで、
デバイスごとに専用サイトを用意することなく、
マルチスクリーンに対応したwebサイトを制作できます。
ちなみに、レスポンシブ（Responsive）とは、
「応答性の」と言う意味ですから、
（デバイスごとに）応答するウェブデザインとも換言できます。
これが注目された背景には、スマートフォンの存在があります。
スマートフォンの急速な普及により、webサイト制作の現場では、
PC向けの従来型のwebサイトに加えて、
スマートフォンの小さな画面でも見やすいようにデザインされた、
専用のwebサイトである「スマートフォンサイト」が登場しました。
タブレットも然りですが、
レスポンシブデザインの概念が出るまでは、
各デバイスごとにhtmlを用意し、ユーザーエージェントによって
振り分け、各デバイス用に用意したサイトを表示させていました。
■レスポンシブwebデザインが解決する課題
前述のとおり、デバイス毎に異なったcss/htmlを用意しなければ
ならないという事は、開発コストもデバイス分必要になり、
ファイル更新も煩雑になったりしていました。
これらの課題を解決する手法として注目されているのが、
レスポンシブデザインです。
これの核となる技術の一つが”ブルードイメージ”と呼ばれるものですが、
この技術によって、あらゆるデバイスに対して単一のWebページ（HTML）を使い、
スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整
を行います。
理論上、単一のHTMLを用意すればいいのでメンテナンスの負担が少なく、
スクリーンサイズだけを基準にしてレイアウトを変更するため、
新しいOSやデバイスが登場してもHTMLを修正する必要はありません。
■レスポンシブwebデザインを構成する技術
レスポンシブwebデザインは、
「フルードグリッド（Fluid Grid）」
「フルードイメージ（Fluid Image）」
「メディアクエリー（Media Query）」
の3つの技術的な要素で構成されます。
フルードグリッドは、webページの要素を罫線や升目に沿って配置する
「グリッドデザイン（Grid Design）」と、
ブラウザーの横幅が変わってもレイアウトを維持したまま
要素のサイズを調整する「フルードデザイン（Fluid Design）」を
合わせたものです。
レスポンシブwebデザインでは、最初にグリッドデザインによって
部品や表示領域をpx単位で配置していき、レイアウトが整った後に、
値を％に変換してフルードデザインに変更します。
フルードイメージは、レイアウトの大きさに追随して画像のサイズを
拡大・縮小する手法で、CSSのみで実装できます。
メディアクエリーは、画像解像度、ウィンドウの幅、
デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。
レスポンシブwebデザインではメディアクエリーを使って
スクリーンサイズに応じたCSSに切り替えます。
このほかにも、文字をレイアウトの大きさに追随して伸縮する
「レスポンシブタイプセッティング（Responsive Typesetting）」や、
テーブル（表組）のサイズを調整する
「レスポンシブテーブル（Responsive Table）」などの技術があり、
必要に応じて利用していきます。
IPPO中川