3-1divとは

div

いままではhtmlタグにしかルールを定義できませんでしたが、それでは十分ではありません
そこでdivを使用します。
divとは簡単に言うとボックス(囲んだ範囲をひとかたまり)の意味です
下図のようにボックス分けをして位置を指定してあげないと、ただ上から順番に並べただけのサイトになってしまいます
divを挿入してcssルールを適用させていきます

img-3-1

divの挿入時の名称

任意の名前をつけてかまいませんがこのコースでは下記のように統一します
DreamWeaverでdivの挿入をするときは # を記入する必要はありません

img-3-2

divの挿入

DreamWeaverで3-1.htmlを開く。このファイルは段落分け等は終わっています
#allitemの挿入
Ctrl+Aですべてを選択し
挿入 → レイアウトオブジェクト → Divタグ → IDにallitemと記入 → okをクリック

新規cssルールを定義してallitemをデザイン

allitemタグを選択し(#allitemとなっています)新規cssルール → セレクタタイプ → 詳細設定を選択→ セレクタが #allitem になっているのを確認してok
(スタイルシート名はstyle.cssとする)
1.ボックス、幅…700px
2.ボーダー、右、下、…各実線、1px、#666666
3.背景色、#006600

divの挿入の練習

headerにしたい部分を選択 → Divタグを挿入 → IDにheader記入 → okをクリック
naviにしたい部分を選択 → Divタグを挿入 → IDにnavi記入 → okをクリック
contentsにしたい部分を選択 → Divタグを挿入 → IDにcontents記入 → okをクリック
leftにしたい部分を選択 → Divタグを挿入 → IDにleft記入 → okをクリック
footerにしたい部分を選択 → Divタグを挿入 → IDにfooter記入 → okをクリック

divにcssルールを定義する

まずはdodyにHTMLファイル全体のルールを定義します。
ここで定義したルールはそのページ全体に反映されます。
bodyタグを選択し新規cssルールをクリック → セレクタを確認しokをクリック

img-3-3

見ていただいてありがとうございます。↓ポチしてくださいませ。
  • 見た (0)
  • もう少し詳しく書いて! (0)
  • 見たけど役立たず (0)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次