レスポンシブWebデザインでwebサイトを構築する際にポイントとなるのが、「どのデバイス幅で」「コンテンツをどの幅にするのか」ということだと思います。
webサイトをレスポンシブ化する際のツールでは、「TwitterBootStrap」や「Foundation」などのcssフレームワークが有名ですが、今回は『とにかく”簡単”・”時短”でレスポンシブ対応のHTML・CSSスケルトンが作りたい！』という時に使えるオンライン作成ツールResponsive Web Cssをご紹介します。
コンテンツをマウスドラッグで移動したり、デバイス毎のコンテンツ幅なども画面上で確認しながら簡単に設定出来るので、レスポンシブWebデザインをこれから取り入れてみたいという方にもオススメのオンラインツールとなっています。
Responsive Web Cssの使い方
使い方はとても簡単で、Responsive Web Cssのトップにある”Get Started”ボタンをクリックして、レイアウト作成ページに移動します。
ここで、デバイス毎のコンテンツ幅や表示の設定をしていきます。
左の赤枠の部分で今回レイアウトを適用させたいデバイスを選択し、右の青枠の部分でページやコンテンツの追加をしていきます。
ページの追加やページ内のコンテンツの追加もクリック一つで出来るのでとても簡単です。また、ページ名やコンテンツ毎の名前も自分で設定できます。
コンテンツ毎の幅指定も数値を入力するだけで、視覚的にレイアウト調整出来るので、ちょっとした修正も楽ですね。
デバイス毎にレイアウトを変更したい時は変更したいデバイスを選択すると、レイアウト変更画面に移動します。そこで、レイアウト幅の調整をしていきます。
各デバイスのレイアウト調整が終了したら、画面下の”Export”ボタンをクリックするだけです。こんなに簡単にレイアウトを完成させていいの？！と思うくらいの時間で完成してしまいます。
このスケルトンを元にサイトコーディングやデザインをしていくということになります。
まとめ
webサイトをスマートデバイスに対応させると一言で言っても、やはりメディアクエリの設定が煩雑になったり、コンテンツ幅もデバイス毎に細かく設定したい場合はそれなりに手間がかかります。
Responsive Web Cssのように、オンラインで視覚的にスケルトンが作成できれば、デバイス毎の設定も格段に簡単になるので、レスポンシブWebデザインがより身近に感じられるのではないでしょうか。
