レスポンシブWebデザインについて3つにまとめてみました

こんにちは、花崎です。

このところコーディングをする機会が多くなってきました。

最近では簡単なサイトをスマートフォン用とPC用、各々のスクリーンのサイズに合わせたデザインになるよう制作しました。

いろいろ勉強していると、最近「レスポンシブWebデザイン」という言葉をよく見かけます。

アシアルブログでも何回かそのことについて記事が上がっていますね。

初めてこの言葉を見たとき、カタカナに弱い私は一瞬「スポンジボブ？」と思ってしまいました。
※黄色いスポンジが体でとってもファンキーな顔しているアメリカ製のキャラクターです。

冗談はさておき、

レスポンシブWebデザインについて3つ簡単にまとめてみました。

1.レスポンシブWebデザインとは

近頃多くの種類のスクリーンサイズを持ったデバイスが販売されています。

ノートPC、スマートフォン、タブレット、デスクトップモニター…これらの画面にWebサイトを、それぞれに合わせたHTMLやCSSで作成しなくてはなりません。

それを一つのHTMLファイルで様々なスクリーンサイズに対応できるようにする方法です。

2.レスポンシブWebデザイン作成の考え方

ここではどの様な流れで作成されていくのかざっくり説明します。

レスポンシブWebデザインは一つのソースで様々な大きさの画面に対応しなければならないので小さいものから考えます。
低スペックのものから考える、それ以上のスペックにも対応することができます。

モバイルを基準に考えてWebサイトを制作
↓
PCに展開

3．レイアウトとブレークポイント

レイアウトするとき、それぞれのデバイスに合わせたカラムわけをします。

スマートフォンなどは1カラム、
タブレット以上のサイズは上が1カラム下半分が2カラム、もしくはスマートフォンと同じ1カラム、
ノートPCやデスクトップPCはアメブロみたいに3カラムやタブレットと同じにする等、

どのデバイスになったら何カラム並べるか、カラムを左端に移動させるなど決めます。

それと、ブレークポイントの設定をします。

これを設定しないことには画面がきれいに切り替わりません。

切り替えの代替のサイズについてなのですが、以前和田の日記にてレスポンシブデザインのウインドウサイズについて書かれているのでこちらを参考にしてみてください。

「レスポンシブデザインのウインドウサイズの切替えについてまとめてみました」
http://blog.asial.co.jp/1010

簡単にまとめてみましたがいかがだったでしょうか。

9月24日にAdobeからレスポンシブWebデザインを支援する新開発ツールが発表されたそうです。

その名も「Adobe Edge Tools & Services」

是非利用してみたいですね。