レスポンシブWebデザイン

最近多くなってきた、「レスポンシブWebデザイン」は、必須になりつつあるようです。

僕も正直、今まで、経験ありませんでした。
しかし、今後、スマートホン、タブレット、PCとより多くのディバイス表示対応を
しなくてはならないのは、言うまでもありません。

PC対応のみでは、時代遅れという感じになってきました。

今回、あるお仕事の関係で、レイアウトデザインを設計するにあたって
レスプンシブWebデザインが、候補になっています。

そして、今回購入した、DWCS6に可変グリッドレイアウト機能いうものがあって、
なんだろうと思っていましたが、
正にこれが、レスポンシブWebデザイン作成の機能でした。

仕事と新購入ソフトが、きっかけとなってやっと手掛ける機会ができました。


レスポンシブWebデザインは、サイトのwidthなどをPC,タブレット、スマートホンの
各サイズに合わせて、表示できるようにするという事です。

そして、今までは、それぞれのPGファイルを作成してそれぞれに表示させていた
らしいのですが、CSS3の登場で、１ソースファイルで、widthなどを条件分岐させて
呼び出すということが、出来る様になったようです。

これは、CSS3のMedia Queries という機能を使って実装します。

また、レスポンシブWebデザインについては、2012年6月、Google が検索エンジンの
クロールにおけるメリットから公式に推奨しており、また同月に、CSS3の Media Queries が
 W3C 勧告となるなど、既にWebサイトのマルチデバイス対応手法として大きな選択肢の
ひとつとなっているということです。

やり方を大きく分けると
1. レスポンシブデザイン用のフレームワークを使う
2. DreamweaverCS6の「可変グリッドレイアウト」機能を使う
3. イチから自分で作る
ということです。
僕の環境で、一番近いのが、やはり2ですので、それを始めている所です。

また、少々心配なのは、CS6の機能に頼りすぎてしまって、Media Queries の
ソースの理解が浅くなってしまい、応用が利かなくなってしまうのも怖いので

１つの動きで、一回一回、ソースを確認し勉強しながら作成していく
という感じです。

あまり情報が多くなると、進まなくなってしまうのも事実なので、２つくらいの
参考物件を見ながら的を絞ってやっていこうと思ってます。

今後、この作業内容の記事は続けていきたいと思っています。