デザイン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中川