各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」
こんにちは。All About ホームページ作成ガイドの西村文宏です。
最近は、パソコン以外にもスマートフォンやタブレットなど、
様々な画面サイズの機器が普及してきました。
また、パソコン用のディスプレイでも、大きなものから小さなものまで様々な製品が販売されています。
そのため、ウェブサイトの閲覧に使われる画面サイズも、極端に広いものから極端に狭いものまで、様々な場合があります。
そのような状況では、どれくらいの画面サイズを想定してウェブページをデザインすれば良いのかが決めにくくなります。
従来は、「パソコン向けサイト」とは別に「モバイル向けサイト」を作ることで解決できていました。しかし、今では、モバイル端末だからといって画面が狭いとは限りませんし、パソコンだからといって、画面サイズの範囲が一定以内に収まっているとは限りません。
そこで登場した考え方が「レスポンシブデザイン」です。
レスポンシブデザインとは、閲覧者の画面サイズに応じて、適用するスタイルシートを変化させる仕組みのことです。閲覧者の端末の種類は問わず、画面サイズだけを基準にしてデザイン(適用するスタイルシート)を選択します。
環境に応じて変化するのはスタイルシートだけなので、端末の種類ごとにウェブサイトを分けたりはしません。
単一のウェブサイトで、様々な画面サイズに対応させます。
例えば、SONYのウェブサイトでレスポンシブデザインが採用されています。
以下のページを見てみてください。
上記のウェブサイトでは、ブラウザのウインドウを画面いっぱいに広げてみた場合と、ものすごく狭くしてみた場合とで、自動的に各所のデザインが変化することが分かります。
例えば、ウインドウの横幅を650px未満にした場合と、それ以上にした場合とで比較してみてください。
広い画面で閲覧すると、大きなバナー画像と共に、製品一覧が縦横に配置されたり、「タブ」が横方向に広がって表示されます。
狭い画面で閲覧すると、バナー画像が小さくなると共に、製品一覧が縦方向のみに配置されたり、「タブ」が「プルダウンメニュー」に変化したりします。
このように、「端末の種類」ではなく「閲覧者の画面サイズ」によってレイアウトを変更させ、単一のウェブサイトであらゆる機器に対応させるデザインが、レスポンシブデザインです。スクリプトは一切使わずに、スタイルシートだけで実現できるため、とても手軽です。
これからウェブサイトを作るなら、ぜひ、レスポンシブデザインを採用してみてください。レスポンシブデザインを作るために必要なスタイルシートの書き方については、次回にご紹介いたします。
【ご注意ください】
このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。
万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。