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中川