Dreamweaver CS6 では、 デスクトップやスマートフォン、タブレットなど様々な画面サイズに適したコンテンツレイアウトを実現するための「可変グリッドレイアウト」機能が追加されました。

「レスポンシブWebデザイン(Responsive Web Design)」といわれる、CSS3の Media Queries を使用してワンソースでマルチデバイス対応させる振り分け方法を容易に実装するための機能です。

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

今回は図1のサンプルデザインを元に、Dreamweaver CS6 の「可変グリッドレイアウト」機能を使って実際にレスポンシブWebデザインを実装してみましょう。

※このサンプルサイトは本記事用に作成した架空のサイトであり、公式のページではありません。

新規ドキュメントの作成とグリッドシステム

可変グリッドレイアウトの新規作成

新規で可変グリッドレイアウトのサイトを作るには、まずメニューから[ファイル]→[新しい可変グリッドレイアウト…]を選びます。可変グリッドレ イアウト用のダイアログ画面が表示され、ここでは、モバイル/タブレット/デスクトップの3種類のデバイス毎のグリッド列数や全体の幅を指定することがで きます。

今回は、初期設定のまま進めますので、[作成]ボタンを押して進みます。

まずは、可変グリッドレイアウト用のCSSファイルを保存します。ファイル名は任意ですので、今回は responsive.css という名前で保存します。

画面サイズに応じてグリッドの列数が変わるグリッドシステム

すると、図3のような可変グリッドレイアウト用のデザインビューが表示されます。ピンク色の縦ラインがグリッドのガイドとなり、このグリッドに 沿ってレイアウト Div タグの幅を変更できるようになります。なお、このグリッドガイドは [command] + [shift] + [i] で表示/非表示を切り替えられます。

可変グリッドレイアウトでは、「golden grid system」と呼ばれる、画面サイズに応じてグリッドの列数と幅が変わるCSSグリッドシステムを採用しており、図3のピンク色の縦のラインがそのグリッドにあたり ます。このグリッドに沿ってブロック要素の幅を設定していくことになります。

ですので、この可変グリッドレイアウト機能を使うにあたっては、事前よりこのグリッドを意識しながら、ワイヤフレームの設計、デザインの作成を行うようにしましょう。

また、図3の下側に、モバイル/タブレット/デスクトップのアイコンが並んでおり、これをクリックすることで、それぞれの画面サイズを持ったデザインビューに切り替えることができます。(最初はモバイル用のデザインビューが表示されます。)

一旦、このHTMLを index.html として保存しておきましょう。

[依存ファイルのコピー]というダイアログが表示されますので、OKボタンを押します。(boilerplate.css と respond.min.js については後編で解説します。)これで、レスポンシブWebデザインのページを作る準備が完了しました。

デザインビューの操作

続いてサイトを構成するブロックをすべて挿入していきます。
すでに挿入されている可変 Div タグは、サンプルと注意書きの役割ですので、ハンドルをクリックして一旦削除しておきましょう。

新しい可変 Div タグは、必ず div.gridContainer の中に挿入する必要があります。この div.gridContainer は複数追加しても構いません。今回の作例では、div.gridContainer を複数使用しますので、コードビューにて3つコピー&ペーストしておきます。

<body> <div class="gridContainer clearfix"></div> <div class="gridContainer clearfix"></div> <div class="gridContainer clearfix"></div> </body>

div.gridContainer の中にカーソルを置き、[挿入パネル]から「可変グリッドレイアウトの Div タグを挿入する」をクリックします。ID名を入力するダイアログが表示されるので、任意のID名を入力します。

今回の作例で必要な可変 Div タグをすべて挿入すると、図4のようになります。

各デバイスごとにレイアウトを指定する

必要なブロックが用意できましたので、各ブロックをデザインカンプにあるように幅を設定してレイアウトしていきます。

可変 Div を選択すると表示される右側のハンドルでDivのサイズを変更できます。また左側のハンドルを動かせば Div を左右に移動させることができます。

作例のモバイル用レイアウトではすべてのブロックの幅が横幅いっぱいなのでそのまま。
タブレット用のレイアウトを行います。デザインビューの下にあるタブレットのアイコンをクリックしてビューを切り替えます。グリッドガイドが8列のデザインビューが表示されます。

それぞれの可変 Div の幅を変更して、さらに位置を調整していきます。
可変 Div の右側にある矢印アイコンをクリックすることで、上段に移動することができます。

タブレット用のデザインビューで幅と位置の調整が終わったら、デスクトップ用のデザインビューに切り替えて、こちらも幅と位置を調整します。
3つのデバイスごとのレイアウト調整が完了すると、図8のようになります。

なお、div.gridContainer はブラウザの幅いっぱいに広がるものではないので、画面いっぱいに背景画像などを敷きたい場合は、これを何らかの要素で包括する必要があります。

作例ではヘッダーはブラウザいっぱいに黒い background-color を敷きたいので、最初の div.gridContainer を header 要素でラップしておきます。

あとは、それぞれの可変 Div の中にコンテンツを入れ込み、従来通りにスタイルを設定していきます。必要なコンテンツをHTMLに挿入していくと、デザインビューにおいても以下のようにデバイスごとにレイアウトが可変になっていることがわかります。

なお、これらの可変 Div タグは、すべてID名でCSSを適用されています。
そのため、挿入した後、article要素やsection要素などへ要素名を変更してHTML5とするのも問題ありません。後編では、可変グリッドレイアウト機能を使ったHTMLをコーディングする際のTipsや注意点、Media Queries を使った CSS の解説などをご紹介いたします。