Cafi Netつながる情報技術
  1. トップ>
  2. 可変グリッドレイアウト>
  3. 各デバイスのレイアウト

設計図を基にしたレイアウト

最終更新日 2013/4/3

各デバイスごとのレイアウトを調整する準備が整ったので、レイアウトを開始します。

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

デバイスの切り替え

各デバイスのレイアウトは、デザインビューで行います。

Adobe Dreamweaver CS6 の画面下部には、モバイルのサイズ/タブレットのサイズ/デスクトップのサイズというボタンが配置されています。

それぞれのボタンを切り替えて、ウェブサイトの設計図通りにレイアウトします。

スマートフォン用レイアウト

モバイルのサイズを表示すると、設定の通りグリッドの列数は 4列になっています。

スマートフォン用レイアウトは縦に 1列なので、今回はそのままで OK です。

タブレット用レイアウト

タブレットのサイズをクリックして、タブレット用レイアウトに切り替えます。

グリッドの列数は、設定の通り 8列になっています。

ウェブサイトの設計図通りに、コンテンツを横並びに変更します。

content1 を選択

content1 を選択します。

content1 の右端にマウスカーソルを合わせます。

content1 の横幅を変更

ドラッグ&ドロップで content1 の横幅を 4列まで狭めます。

近くまで寄せると、グリッドの列に自動的に吸着します。

content2~4 の横幅を変更

同じように content2~4 も、横幅を 4列まで狭めます。

1つ上の行に移動

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)を使った、スクリーンサイズに応じたデザインの切り替えが出来るようになりました。

ファイル/ブラウザでプレビューから、ブラウザによる確認を行います。

ブラウザの幅を狭めると、デスクトップ用レイアウト/タブレット用レイアウト/スマートフォン用レイアウトの切り替えを確認できます。

コンテンツの作成とデザインを行う準備が整いました。