レスポンシブデザインの作り方(第1回)

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

最近は、パソコン以外にもスマートフォンやタブレットなど、

様々な画面サイズの機器が普及してきました。

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

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

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

従来は、「パソコン向けサイト」とは別に「モバイル向けサイト」を作ることで解決できていました。しかし、今では、モバイル端末だからといって画面が狭いとは限りませんし、パソコンだからといって、画面サイズの範囲が一定以内に収まっているとは限りません。

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

レスポンシブデザインとは、閲覧者の画面サイズに応じて、適用するスタイルシートを変化させる仕組みのことです。閲覧者の端末の種類は問わず、画面サイズだけを基準にしてデザイン（適用するスタイルシート）を選択します。

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

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

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

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

※SONY製品サイト
※SONY USAサイト

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

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

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

狭い画面で閲覧すると、バナー画像が小さくなると共に、製品一覧が縦方向のみに配置されたり、「タブ」が「プルダウンメニュー」に変化したりします。

このように、「端末の種類」ではなく「閲覧者の画面サイズ」によってレイアウトを変更させ、単一のウェブサイトであらゆる機器に対応させるデザインが、レスポンシブデザインです。スクリプトは一切使わずに、スタイルシートだけで実現できるため、とても手軽です。

これからウェブサイトを作るなら、ぜひ、レスポンシブデザインを採用してみてください。レスポンシブデザインを作るために必要なスタイルシートの書き方については、次回にご紹介いたします。

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス（ツール）は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

講師「All About ホームページ作成ガイド　西村 文宏」のコラム一覧