ウェブサイトの設計図

最終更新日 2013/4/3

Adobe Dreamweaver CS6 の可変グリッドレイアウトを使用して、レスポンシブ Web デザインを作成する方法です。

「公式サイト：レスポンシブWebデザイン | Adobe TV」

可変グリッドレイアウトは、ようこそ画面／新規作成の可変グリッドレイアウトから作成します。（ファイル／新しい可変グリッドレイアウトからでも構いません）

まずは、モバイル／タブレット／デスクトップのグリッドの列数を決める必要があります。

グリッドの列数は、作成したいデザインによって異なるので、まずはウェブサイトの設計図が必要になります。

一例とはなりますが、上の画像のような設計図を用意しました。

分かりやすいように画像にしましたが、実際には紙にボールペンで書いた簡単な設計図です。

スマートフォン用は 1ブロックなので、グリッドの列数はいくつでも結構です。

タブレット用は 2ブロックなので、グリッドの列数は 2列の倍数とします。

デスクトップ用は 5ブロックなので、グリッドの列数は 5列の倍数とします。

グリッドの列数が決まったので、可変グリッドレイアウトを作成します。

ようこそ画面／新規作成の可変グリッドレイアウトをクリックします。

可変グリッドレイアウトを、新規作成する画面が表示されます。

モバイルは 1列の倍数なので、初期設定（4列）のままで構いません。

タブレットは 2列の倍数なので、初期設定（8列）のままで構いません。

デスクトップは 5列の倍数なので、12列から 10列に変更します。

列幅の %（ガター）（列の間の隙間）は、お好みで設定して下さい。

全体の幅（各デバイスの下の % の数値）は、お好みで設定して下さい。

ドキュメントタイプは、HTML5 で良いと思います。

入力が完了したら、作成をクリックします。

スタイルシートファイルを別名で保存ダイアログボックスが表示されます。

保存する場所（フォルダ）を選択します。

ファイル名を入力します。ここでは style と入力しました。

保存をクリックします。

可変グリッドレイアウトの編集画面が表示されました。

スタイルシート（CSS）は保存しましたが、html ファイルは未保存の状態です。

ファイル／保存をクリックします。

名前を付けて保存ダイアログボックスが表示されます。

ファイル名に index と入力します。

保存をクリックします。

「可変グリッドレイアウトには次の依存ファイルが必要です」と表示されます。

OK をクリックします。

上の画像のように、4つのファイルが作成されました。

ウェブサイトを公開するときにまとめてアップロードするので、4つのファイルは同じフォルダ（サイト／新規サイトで設定したフォルダ）に保存されることをお勧めします。

可変グリッドレイアウトに div タグを追加する準備が整いました。