設計図を基にした div タグの構造

最終更新日 2013/4/3

div タグを追加する準備が整ったので、div タグの構造を考えます。

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

可変グリッドレイアウトは、div タグ（汎用的なブロック要素）を追加してレイアウトします。

追加する div タグの構造は、ウェブサイトの設計図を基にして決定します。

一例とはなりますが、今回は上の画像のような構造に決定しました。

デザインしていく中で、div タグの構造に問題が見つかるケースもあるかと思います。修正が難しい場合は、div タグの追加からやり直して下さい。

div タグを追加します。

#div1 は、始めから追加されています。

DIV#div1 を複製をクリックします。

上の画像のように、#div2 が追加されます。

同じように、DIV#div2 を複製をクリックします。

上の画像のように、#div3 が追加されます。

コードビューを確認すると、上の画像のように #div1～3 が作成されています。

予め追加されていたテキストを編集しました。

テキストの編集は、コードビューでもデザインビューでも実行出来ます。

#div1 は、ヘッダーです。

#div3 は、フッターです。

続いて、#div2 に .menu と .content を追加します。

.content には、.content1～4 も追加します。

デザインビューで作業を行なっても良いですが、コードビューの方が div タグを追加する位置が分かりやすいと思います。

上の画像のように、<div id="div2" class="fluid"></div> の中にマウスカーソルを合わせます。

挿入パネルのレイアウトを表示して、Div をクリックします。

上の画像のように、Div を挿入ダイアログボックスが表示されます。

クラスに menu と入力して、OK をクリックします。

コードビューを確認すると、マウスカーソルの位置に .menu が追加されています。

続いて、.content を追加します。

.content は、#div2 の中の .menu の外に追加します。

上の画像のように、<div class="fluid menu">これは、レイアウト Div タグ「menu」のコンテンツです</div> の後ろにマウスカーソルを合わせます。

先程と同じように、挿入パネルのレイアウトから Div を追加します。

クラス名は、content と入力します。

コードビューを確認すると、マウスカーソルの位置に .content が追加されています。

.content 内の文章は必要ないので削除します。

続いて、.content の中に .content1～4 を追加します。

作業方法は、全く同じです。

<div class="fluid content"></div> の中に、マウスカーソルを合わせます。

挿入パネルのレイアウトから Div を追加します。

クラス名は、content1 と入力します。

<div class="fluid content1">これは、レイアウト Div タグ「content1」のコンテンツです</div> が追加されます。

<div class="fluid content1">これは、レイアウト Div タグ「content1」のコンテンツです</div> の外側にマウスカーソルを合わせて、content2 を追加します。

同じ手順で、content3 と content4 を追加します。

上の画像のように、全ての Div タグを追加することができました。

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