レスポンシブWebデザイン

本日は巷で流行中のレスポンシブWebデザインについて。

今Web業界ではスマートフォン用のWeb制作が熱いようですが、中でも注目されている一つにこのレスポンシブWebデザインがありますので、ご紹介します。

ちなみに当スクールではレスポンシブWebデザインについての授業もあります。

では、レスポンシブWebデザインとはどのようなものなのかと言いますと、通常Webサイト制作時にはPC用をベースに作っていくと思います。

しかし、最近ではスマートフォンからのアクセスも多いので、スマートフォン用のWebサイトを作る方が非常に増えてきました。

スマートフォンは画面が小さいので、PC用のサイトを閲覧すると操作しにくいなどの不具合が生じます。

そこで、考えられるのはスマートフォン用の別のサイトを作ることですが、このレスポンシブWebデザインを使うとPC用のサイトのままスマートフォンでの閲覧環境をよくしていくことが出来ます。

もちろん別サイトを作るのもありですが、コストや手間を考えるとレスポンシブWebデザインに軍配が上がります。

ということで、実際にどのようになるのか見てみましょう。ちなみにレスポンシブWebデザインで検索をすると様々なサイトが出てきますので、興味のある方はそちらもみてみるといいと思います。

まずはPC環境でのデザイン

続いてタブレット

最後にスマホ

このように一つのページが環境によって変化していく、これがレスポンシブWebデザインです。



これはブラウザの幅をみて自動的に振り分けてくれるようになっています。

例えば900px以上でPC閲覧と判断
タブレットに600～899px
スマホは599px以下と設定しています。

別サイトを作る方法でユーザーエージェントなどを利用する方法もありますが、レスポンシブWebデザインはあくまでもブラウザの幅を基準に作っているので、非常に簡単に作ることが出来ます。

ですので、PCでもブラウザの幅を狭めていくと上の画像のように変化していきます。

ちなみにiPhoneなどは解像度が高く幅900px以上で判断してしまいますので、viewport設定が必要です。

ということでこちらで上画像のページを見ることもできますので、ブラウザサイズを変更してみたり、スマホで閲覧してみたりすると試せます。