CS6がリリースされてから数日、やたらとレスポンシブ・ウェブデザイン関連の記事を目にするようになりました。
Dreamweaver CS6の新機能に可変グリッドレイアウト機能が追加されたのも影響してるのかな？と思ったりします。
そこで今回はレスポンシブ・ウェブデザインを学ぶ際に参考になるサイトをまとめてみました。
そもそもレスポンシブ・ウェブデザインって何だって言うことですが、ウィンドウサイズに合わせてページのデザインを変化させる技術というところでしょうか。
最近はパソコンだけでなく、スマートフォン、タブレットなどデバイスの種類も多種多様になり、それぞれに合わせたホームページ制作が求められるようになってきました。
レスポンシブ・ウェブデザインでホームページを制作するメリットは1つのソースで様々なデバイスに対応したホームページを制作できるところでしょうか。
どういうことかと言うといろんなサイトで参考例として取り上げられていて、今回の記事のアイキャッチにも使わせてもらったWeb Designer Wallのサイトでブラウザの横幅を縮めたり広げたりしてみてください。
あるポイントでページのレイアウトが変わるのがお分かりになると思います。
これはCSS3のMedia Queries（メディアクエリ）を使ってウィンドウサイズによってCSSを切り替えているからです。
Media Queriesについて私自身まだまだ勉強中で、これから紹介するサイトを参考にしたりしています。
大体のサイトがPC、タブレット、スマートフォンの3つのデバイスへの対応を想定したサンプルを使って説明されています。
簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～
こちらの記事ではサンプルデータもダウンロードできるのでじっくり中身を見てみてください。
スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
こちらはスマートフォンのみへの対応になっています。
どの記事もとても丁寧に説明されていて頭が下がる思いです。
これからいろんなデバイスへの対応が求められ、ホームページ制作はどんどん複雑になっていくと思います。私もこういったサイトを見て日々勉強中です。
ですがこういう技術面のことばかりに頭が行かないように、そのホームページに求められていることを見失わないように制作していきたいと思います。
