- トップ>
- 可変グリッドレイアウト>
- 各デバイスのレイアウト
設計図を基にしたレイアウト
最終更新日 2013/4/3
各デバイスごとのレイアウトを調整する準備が整ったので、レイアウトを開始します。
「公式サイト:レスポンシブWebデザイン | Adobe TV」
各デバイスのレイアウトは、デザインビューで行います。
Adobe Dreamweaver CS6 の画面下部には、モバイルのサイズ/タブレットのサイズ/デスクトップのサイズというボタンが配置されています。
それぞれのボタンを切り替えて、ウェブサイトの設計図通りにレイアウトします。
モバイルのサイズを表示すると、設定の通りグリッドの列数は 4列になっています。
スマートフォン用レイアウトは縦に 1列なので、今回はそのままで OK です。
タブレットのサイズをクリックして、タブレット用レイアウトに切り替えます。
グリッドの列数は、設定の通り 8列になっています。
スポンサーリンク
ウェブサイトの設計図通りに、コンテンツを横並びに変更します。
content1 を選択します。
content1 の右端にマウスカーソルを合わせます。
ドラッグ&ドロップで content1 の横幅を 4列まで狭めます。
近くまで寄せると、グリッドの列に自動的に吸着します。
同じように content2~4 も、横幅を 4列まで狭めます。
content2 と content4 を、1つ上の行に移動します。
content1~4 が横並びとなり、タブレット用レイアウトが完成しました。
ドラッグ&ドロップで行ったレイアウトの変更は、style.css に自動的に入力されます。
上の画像のように style.css のタブレット用レイアウトを確認すると、width(幅)の値が自動的に計算されています。
同様の操作方法で、デスクトップ用レイアウトも作成します。
画面下部のデスクトップのサイズをクリックして、デスクトップ用レイアウトに切り替えます。
グリッドの列数は、設定の通り 10列になっています。
ヘッダーとフッターは、そのままで OK です。
ドラッグ&ドロップで menu の横幅を 2列まで狭めます。
content1~4 の横幅を 4列まで狭めます。
content2 と content4 は、1つ上の行に移動します。
content の横幅を 8列まで狭めます。
content を 1つ上の行に移動します。
上の画像のように、デスクトップ用レイアウトが完成します。
Media Queries(CSS3)を使った、スクリーンサイズに応じたデザインの切り替えが出来るようになりました。
ファイル/ブラウザでプレビューから、ブラウザによる確認を行います。
ブラウザの幅を狭めると、デスクトップ用レイアウト/タブレット用レイアウト/スマートフォン用レイアウトの切り替えを確認できます。
コンテンツの作成とデザインを行う準備が整いました。
スポンサーリンク