TechTweetこんにちは、花崎です。このところコーディングをする機会が多くなってきました。最近では簡単なサイトをスマートフォン用とPC用、各々のスクリーンのサイズに合わせたデザインになるよう制作しました。勉強していると、最近「レスポンシブWebデザイン」という言葉をよく見かけます。アシアルブログでも何回かそのことについて記事が上がっていますね。この言葉を見たとき、カタカナに弱い私は一瞬「スポンジボブ?」と思ってしまいました。※黄色いスポンジが体でとってもファンキーな顔しているアメリカ製のキャラクターです。冗談はさておき、レスポンシブWebデザインについて3つ簡単にまとめてみました。1.レスポンシブWebデザインとは近頃多くの種類のスクリーンサイズを持ったデバイスが販売されています。ノートPC、スマートフォン、タブレット、デスクトップモニター...これらの画面にWebサイトを、それぞれに合わせたHTMLやCSSで作成しなくてはなりません。それを一つのHTMLファイルで様々なスクリーンサイズに対応できるようにする方法です。2.レスポンシブWebデザイン作成の考え方ここではどの様な流れで作成されていくのかざっくり説明します。レスポンシブWebデザインは一つのソースで様々な大きさの画面に対応しなければならないので小さいものから考えます。低スペックのものから考える、それ以上のスペックにも対応することができます。↓PCに展開3.レイアウトとブレークポイントレイアウトするとき、それぞれのデバイスに合わせたカラムわけをします。スマートフォンなどは1カラム、タブレット以上のサイズは上が1カラム下半分が2カラム、もしくはスマートフォンと同じ1カラム、ノートPCやデスクトップPCはアメブロみたいに3カラムやタブレットと同じにする等、どのデバイスになったら何カラム並べるか、カラムを左端に移動させるなど決めます。それと、ブレークポイントの設定をします。これを設定しないことには画面がきれいに切り替わりません。切り替えの代替のサイズについてなのですが、以前和田の日記にてレスポンシブデザインのウインドウサイズについて書かれているのでこちらを参考にしてみてください。「レスポンシブデザインのウインドウサイズの切替えについてまとめてみました」http://blog.asial.co.jp/1010簡単にまとめてみましたがいかがだったでしょうか。9月24日にAdobeからレスポンシブWebデザインを支援する新開発ツールが発表されたそうです。利用してみたいですね。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。