「レスポンシブwebデザイン」は、 ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調整できる手法です。
何故、このよな手法があるのかというと、スマートフォンが原因です。
ホームページは、今やパソコンだけで閲覧されるものではなく、スマートフォンやタブレット端末からもで閲覧されています。
そのため、ホームページも閲覧環境に応じてページレイアウトを柔軟に切り替えられるようにマルチデバイス化が必須になってきますが、デバイス毎にレイアウトの違うHTMLファイルを複数用意しているとコストが非常に多くかかりますし、コンテンツ管理も大変です。
そこで、ページのレイアウトデザインを柔軟に調整できるようにしたレスボンシブWEBデザインが重要になっているのです。
「レスポンシブwebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、ブラウザの横幅サイズに応じてページのレイアウトデザインを調整します。
もっと簡単に言えば、一つのHTMLに複数のCSSを用意し、閲覧環境に応じたCSSを適用するように設定するということですね。
レスポンシブwebデザインがどのようなものかをより理解できるよう、レスポンシブwebデザインを採用しているホームページをご紹介しています
もっとも、パソコンとスマートフォンの両方でチェックしない限り、どういうものかわかりにくいのが難点ですが・・・
とりあえず媒体を変えて閲覧しても同じように見えるものだと理解していただければ十分です。
是非とも参考にして、自身のホームページ作成に役立ててください。
アドレス:http://3200tigres.wwf.fr/
横幅を1200px,900px,700px,480pxの4種に設定しています。
このうち700pxはダブレットタイプ用、480pxはスマートフォン用となります。