1. まとめトップ

この記事は私がまとめました

tsukiyumeさん

レスポンシブサイトとは

アクセスした人のデバイス(実際は画面サイズ)によって、自動的にレイアウトが切り替わるデザイン。
レスポンシブWebデザインは、既にマイクロソフト、NTT DATA、パナソニック、ソニーなどの有名企業でも採用されています。
例えば、デザインと使い心地にこだわったブランドrusset – ラシットでは、レスポンシブWebデザインをうまく活用しています。

スポンシブWebデザインとは スマホ・タブレット・PCなどどんな端末で閲覧しても、ページのレイアウトを違和感なく表示させる技術のこと 。ECサイトでの採用も増加傾向にあり、これからのネットショップ運営に欠かせない存在になるでしょう。

レスポンシブサイトの作り方  2つのパターン

現在はPCやスマートフォンなど、デバイス毎に各HTMLファイルを複数用意し最適化することが、一般的な制作方法となっています。
「レスポンシブWebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。

PC用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現できる。

端末の機種を個別に判別するのではなく、画面サイズで端末を分類するというアイデアは、新機種が次々と出るスマホやタブレットに対応する方法としては優れたアイデアです。

レスポンシブサイト例

参考サイト

ギャラリーサイト

1