- トップ>
- 可変グリッドレイアウト>
- グリッドの列数を決定
ウェブサイトの設計図
最終更新日 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 タグを追加する準備が整いました。
スポンサーリンク