WEB担当の徳山2号です。

今日は、レスポンシブサイトについてちょっとお話したいと思います。

聞き慣れない方もいらっしゃるかもしれませんが、レスポンシブWEBとは、各種デバイスでの見え方をCSS3（Media Queries）で制御するため、PC用、スマホ用、タブレット用とそれぞれの専用ページを用意する必要がないWEBの手法の1つです。

”リキッドデザイン”と似ているようで似ていません。

リキッドデザインの場合は、ブラウザの幅によって横幅が可変しますが、各デバイスに応じて要素の表示・非表示などは出来ません。
一方レスポンシブwebの場合は、各種デバイスごとに幅も見た目も可変させることができ、各要素の表示・非表示なども出来ます。

メリットもあれば、デメリットもあるのは確かです（スマホなどでは表示が遅くなる可能性があるなどなど）。

ただ、断然メリットの方が大きいと私は思います。

一昔前までは、WEBといえばPC専用のみの作り方でOKでした。それぞれのブラウザバージョンで崩れていないか？のチェックだけだったと思います。

ただ、今はスマートフォン・タブレットが普及し、その機器を利用してWEBを見る機会も増えましたよね。それらがあれば充分ネットは見れるから、わざわざ高額なPCを買わなくてもいいという方も少なくないはず。PCだと使用してる間ずっとその前に座っていないといけませんが、スマホやタブレットだと、どこにでも持ち運べますものね。

経験ある方も多いと思いますが、スマートフォンやタブレット用の対策をしていないサイトは、例えばスマホで見た時に、ページがギュッと縮小されて文字がちぃ～～～～～～～さく、というか全てが小さ～～～くなりますよね。どうしてもそのサイトの内容を見たい時は、いちいちズームしなければいけません。

そんな煩わしいことがないように、WEBの作りも、その時代に合わせなくてはいけません。

PCならPC用に、スマートフォンならスマートフォン用、タブレットならタブレット用として最適な見え方に。

ちょっと小さいですが、この画像が当サイトblogコンテンツページのスクショです。一番上がPCでの見え方、左下がiPad、右下がiPhoneでの見え方です。

各種デバイスによって、配置、並びが変わっているのがお分かりでしょうか？

要素の表示・非表示がデバイスごとに出来ると上で述べましたが、iPhoneではアイキャッチと呼ばれる画像を非表示にしています。こういうことが出来るんです。

またiPadの縦からは、1カラムのレイアウトに切り替わり、「MENUボタン」クリックでグローバルメニューが出現する仕組みです。

iPadの横向きはPCの見え方とほぼ同じなので、画面の向きをロックしていなければ、iPadを回転する度に、横用レイアウト・縦用レイアウトと切り替わります。結構おもしろいですよ（笑）

という訳で・・・・またお会いしましょう（笑）

コメントは受け付けていません。