【自分で更新できる企業サイト】の大きな”ウリ”のひとつである

「ひとつのホームページでスマホ専用のホームページも自動生成される事！」

「ＰＣサイトを更新すれば自動的にスマホサイトに反映」

 

これは【自分で更新できる企業サイト】のホームページ作成技法として”レスポンシブデザイン”を採用しているから可能となった最新トレンドのスタイルなのですが、それでは”レスポンシブデザイン”とは何か・・・？

解説しようと思っていた矢先・・・、日ごろお世話になっておりますAll Aboutさんからまさにその分りやすい解説がコラムが発行されましたので、語弊ないよう全文まるごとご紹介致します（感謝）

 

 

＜テーマ＞
『レスポンシブデザインの作り方(1) ～レスポンシブデザインとは？～』

＜講　師＞
All About ホームページ作成ガイド
西村 文宏（ニシムラ フミヒロ）

……………………………………………………………………………………………

こんにちは。All About ホームページ作成ガイドの西村文宏です。

最近は、パソコン以外にもスマートフォンやタブレットなど、
様々な画面サイズの機器が普及してきました。

また、パソコン用のディスプレイでも、
大きなものから小さなものまで様々な製品が販売されています。

そのため、ウェブサイトの閲覧に使われる画面サイズも、
極端に広いものから極端に狭いものまで、様々な場合があります。

そのような状況では、どれくらいの画面サイズを想定して
ウェブページをデザインすれば良いのかが決めにくくなります。

従来は、「パソコン向けサイト」とは別に
「モバイル向けサイト」を作ることで解決できていました。

しかし、今では、モバイル端末だからといって
画面が狭いとは限りませんし、パソコンだからといって、
画面サイズの範囲が一定以内に収まっているとは限りません。

そこで登場した考え方が「レスポンシブデザイン」です。

レスポンシブデザインとは、閲覧者の画面サイズに応じて、
適用するスタイルシートを変化させる仕組みのことです。

閲覧者の端末の種類は問わず、画面サイズだけを基準にして
デザイン（適用するスタイルシート）を選択します。

環境に応じて変化するのはスタイルシートだけなので、
端末の種類ごとにウェブサイトを分けたりはしません。

単一のウェブサイトで、様々な画面サイズに対応させます。

例えば、SONYのウェブサイトで
レスポンシブデザインが採用されています。

以下のページを見てみてください。

……………………………………………………………………………………
http://www.sony.jp/ (※SONY製品サイト)
http://www.sony.com/index.shtml (※SONY USAサイト)
……………………………………………………………………………………

上記のウェブサイトでは、ブラウザのウインドウを
画面いっぱいに広げてみた場合と、
ものすごく狭くしてみた場合とで、
自動的に各所のデザインが変化することが分かります。

例えば、ウインドウの横幅を650px未満にした場合と、
それ以上にした場合とで比較してみてください。

広い画面で閲覧すると、大きなバナー画像と共に、
製品一覧が縦横に配置されたり、
「タブ」が横方向に広がって表示されます。

狭い画面で閲覧すると、バナー画像が小さくなると共に、
製品一覧が縦方向のみに配置されたり、

「タブ」が「プルダウンメニュー」に変化したりします。

このように、「端末の種類」ではなく
「閲覧者の画面サイズ」によってレイアウトを変更させ、
単一のウェブサイトであらゆる機器に対応させるデザインが、
レスポンシブデザインです。

スクリプトは一切使わずに、
スタイルシートだけで実現できるため、
とても手軽です。

これからウェブサイトを作るなら、
ぜひ、レスポンシブデザインを採用してみてください。

レスポンシブデザインを作るために
必要なスタイルシートの書き方については、
次回にご紹介いたします。

…………………………………………………………………………………………… Pendtiphovidis