Dreamweaver CS6には「可変グリッドレイアウト」という新機能が追加されました。この機能を使えば、以下に示すような要件を満たすサイトを簡単に作成できます。

  • 1ソースで、スマートフォン/タブレット/デスクトップなど、様々なスクリーンサイズに対応する。
  • 要素をグリッド上に配置することで、コンテンツが美しく整列して見える。

どちらも近年流行しているWebデザインテクニックであり、前者は「レスポンシブWebデザイン」、後者は「グリッドレイアウト」と呼ばれています。Dreamweaverの可変グリッドレイアウト機能を使うにあたっては、これらのテクニックについて詳しく知る必要はありません。

とはいえ、これらのテクニックについても詳しく学んでおけば、可変グリッドレイアウトをより便利に使いこなせるようになり、またソースコードを手作業でメンテナンスすることも恐れず行えるようになるでしょう。

可変グリッドレイアウト機能の使い方

Dreamweaver CS6のメニューの[ファイル]には、[新しい可変グリッドレイアウト]という項目があります。このメニューが、可変グリッドレイアウト機能を使用するにあたってのはじめの一歩です。

メニューをクリックすると、以下のようなダイアログが表示されます。

[モバイル][タブレット][デスクトップ]という単語が並んでいることから、この機能を使用すると、様々なスクリーンサイズに対応するWebページを作成できることがわかります。

また、このダイアログ上では[列数]や[列幅の%][領域全体の幅]といった項目を調整することができます。これらのパラメータの意味を理解するには、可変グリッドレイアウトに関する知識が必要です。

ここでは初期設定のまま[作成]ボタンを押してみましょう。すると、新しいCSSファイルを保存するダイアログが表示されます。

CSSファイルを保存すると、Dreamweaverのデザインビューが次のように切り替わります

一見して気づくのは、5本の薄い帯が縦に並んでいることです。グリッドレイアウトとは、表示領域を「行」と「列」に区切り、その中に要素を配置していくというレイアウト手法です。この5本の薄い帯がグリッドの列を表しています。可変グリッドレイアウトでは、ここに行を配置していくことでレイアウト作業を進めていきます。

行を配置するには、[挿入]パネル内にある[可変グリッドレイアウトのDivタグを挿入する]を使用します。このメニューを選択すると、新規に挿入するdiv要素のid属性を指定するよう求められます。

id属性を指定して[OK]ボタンを押すと、行が追加されます。

追加された行は単なるdiv要素なので、見出しやリストなど、どんなコンテンツでも配置することができます。適当にコンテンツを記述し、いくつか行を追加した結果、以下のようになりました。

既にお気づきの方もいるかもしれませんが、デザインビューの下部を見てみると、以下のように表示されています。

つまり、今まで行なってきた作業は、横480×縦800pxのスマートフォン向けのレイアウトだったということです。では、スクリーンサイズを切り替えて、異なるサイズ向けのデザインも行なってみましょう。

異なるスクリーンサイズ向けのデザインを行う

CS6からは、ステージ下に3つのデバイスアイコンが追加され、これらをクリックすることでスクリーンサイズを切り替えることができるようになりました。

ここで真ん中のタブレットのアイコンを選択すると、以下のように表示されます。表示領域が広がっただけではなく、列の数が8つに増えました。

スマートフォンの場合は、div要素を全て縦積みにしていました。広い表示領域を使用できるのであれば、一部を横に並べて表示したりすることも可能になります。ここでは、「コンテンツ2」と「コンテンツ3」を横並びにしてみましょう。そのためには、コンテンツ2とコンテンツ3をどちらも表示領域の半分、つまり「4列」分にリサイズします。

そして、コンテンツ3にフォーカスを当てると右上に表示される[一つ上の行に移動]ボタンをクリックします。

すると、コンテンツ3が上の行に移動します。このように列や行の単位でわかりやすくレイアウトを行えるのが、グリッドレイアウトの利点です。生成されたデザインはすっきりと整列され、ユーザにとっても見やすく、美しい印象を与えます。

タブレット向けデザインを修正したあと、スクリーンサイズをスマートフォンに切り替えてみてみましょう。すると、レイアウト変更作業の“影響が及んでいない”ことがわかります。つまり、1つのHTMLから、複数のスクリーンサイズ向けのデザインを個別に作成できるということです。同様にして、デスクトップ向けのデザインは全てのコンテンツが横に並ぶようなレイアウトにしてみました。

プレビューによる確認

先に作成したサンプルをブラウザーでプレビューし、ウィンドウサイズを様々に変えて試してみましょう。ウィンドウサイズに応じてコンテンツの幅が伸縮するだけではなく、レイアウトも勝手に変わります。

可変グリッドレイアウト機能が生成するソースコード

デザインの全てをDreamweaverのデザインビューで完結するのが理想ですが、現実的にはソースコードを修正する必要が生じることもあるでしょう。その時のために、可変グリッドレイアウト機能で生成されたコードを大まかに理解しておきましょう。

まずは、可変グリッドレイアウト機能が生成するいくつかのファイルについて説明します。前節で編集していたレイアウトを保存しようとすると、保存先を指定するダイアログが表示されたあと、以下のようなダイアログが表示されます。

ダイアログに示されている通り、これらのファイルは可変グリッドレイアウトにとって必須のファイルなので、「コピー」を選択します。すると、HTMLの保存先と同じフォルダー内に「boilerplate.css」と「respond.min.js」が保存されます。なお、これらのファイルは以降編集の対象となることはありません。可変グリッドレイアウト機能で編集対象となるのは、一対になったHTMLファイルとCSSファイルです(以下の画像で言うと「vgrid.html」と「vgrid.css」です)。

HTMLファイルの内容

ではまず、HTMLを見てみましょう。以下のコードは、前節で作成したWebページからの抜粋です。

<div class="gridContainer clearfix"> <div id="LayoutDiv1"> <h1>ヘッダー</h1> </div> <div id="LayoutDiv2"> <h2>コンテンツ1</h2> <p>あああ</p> <p>いいい</p> </div> <div id="LayoutDiv3"> <h2>コンテンツ2 </h2> <ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> </div> <div id="LayoutDiv4"> <h2>コンテンツ3</h2> <p>あああ</p> </div> <div id="LayoutDiv5"> <h2>フッター</h2> </div> </div>

可変グリッドレイアウトは、class属性「gridContainer」が付与されたdiv要素に囲まれている必要があるものの、それ以外は取り立てて変わったところのないdiv要素の羅列です。このコードからは、グリッドレイアウトを使用していることや、スクリーンサイズに応じてレイアウトが変更することは読み取れません。

CSSファイルの内容

では、CSSファイルを見てみましょう。生成されたCSSの構成は、おおまかに示すと以下のようになっています。

@charset "UTF-8"; /* モバイルレイアウト : 480 px およびそれ以下. */ .gridContainer { ... } #LayoutDiv1 { ... } #LayoutDiv2 { ... } #LayoutDiv3 { ... } #LayoutDiv4 { ... } #LayoutDiv5 { ... } /* タブレットレイアウト : 481 px ~ 768 px。モバイルレイアウトからスタイルを継承。 */ @media only screen and (min-width: 481px) { .gridContainer { ... } #LayoutDiv1 { ... } #LayoutDiv2 { ... } #LayoutDiv3 { ... } #LayoutDiv4 { ... } #LayoutDiv5 { ... } } /* デスクトップレイアウト : 769 px ~最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */ @media only screen and (min-width: 769px) { .gridContainer { ... } #LayoutDiv1 { ... } #LayoutDiv2 { ... } #LayoutDiv3 { ... } #LayoutDiv4 { ... } #LayoutDiv5 { ... } }

よく似た記述が3回繰り返されている構造になっています。そして、2番目と3番目の記述は、「@media」で始まるブロックで囲まれています。この「@media」という記述は「メディアクエリ」という新しいテクノロジーで、これによってスクリーンサイズごとに違うCSSを適用させて異なるレイアウトを実現しています。

また、個々のCSSプロパティを見ると、幅が全て%指定されています。例えば、タブレットサイズのスクリーンの場合、グリッド全体を囲むdiv要素(class属性「gridContainer」)のスタイルは以下のように指定されています。

.gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; }

このwidthとpaddingを全て足すと93%になります。つまり、タブレットの場合は全幅のうち93%をグリッドレイアウトの領域とすることになります。93%は、図2の[タブレット]のところで設定されていた値です。

前節では、タブレットサイズの場合はコンテンツ2と3を同じ幅で横に並べていました。その部分のCSSは、それぞれのwidthが48.7179%、コンテンツ3のmargin-leftが2.5641%となっており、全て合計すると100%になります(正確には99.9999%)。margin-leftで指定されている値は、列と列の間の隙間を表しています。

/* コンテンツ2 */ #LayoutDiv3 { clear: both; float: left; margin-left: 0; width: 48.7179%; display: block; } /* コンテンツ3 */ #LayoutDiv4 { clear: none; float: left; margin-left: 2.5641%; width: 48.7179%; display: block; }

このように、グリッドを構成する要素の幅を全て%で指定することで、いかなるスクリーンサイズであっても柔軟に伸縮するグリッドレイアウトを実現しています。

おわりに

可変グリッドレイアウトをより深く理解し使いこなすには、以下の概念やテクニックについて基本的な理解をしておくことが望ましいでしょう。

  • レスポンシブWebデザイン
  • モバイルファースト
  • グリッドレイアウト

これらを使いやすいツールとしてまとめたのが、Dreamweaver CS6の「可変グリッドレイアウト」機能というわけです。ぜひ使ってみてください。