divタグとは

divタグはブロックレベル要素をまとめるためのタグです。HTMLで指定するだけでは特に何かをするわけではありません。しかしCSSでスタイルを指定するレイアウトの設定等に威力を発揮します。

divタグの意味

divタグとは似たような意味を持つブロックレベル要素をまとめるためのタグです。他のタグでは見出しタグでもpタグにしてもまとめるという用途では不十分です。

divタグの動作

HTMLファイルにdivタグを入れても色・形・文字・動作などブラウザ上の見かけではまったく作用はありません。CSSと関連づけることにより見かけ上の効果が出てきます。

idとクラスで意味づけ

divタグのid属性は固有の名前付けです。class属性は分類して種類を決めたものです。idとclassにより、divタグでまとめた意味がわかるようにソース上で表示することができます。

divタグの用途

ブロックレベル要素なのでレイアウトに重宝します。floatプロパティと組み合わせればブロックを右に寄せたり、左に寄せたりできます。入れ子にすることでdivのエリアを何列にも表示するレイアウトを作れます。

インライン要素はspanを使う

ブロックでなくテキストのインライン要素の場合はspanタグを使います。これもHTMLだけでは特に効能はありません。divと同様にidやclassを指定します。CSSでプロパティを設定してやっと見た目に効果が出てきます。

Dreamweaverでdivタグを設定するには

まずはdivタグの範囲を選択します。挿入パネルの「Divタグを挿入」ボタンを押します。クラスまたはid名を入れてOKを押します。Divタグの挿入に成功するとデザインビューでその範囲が点線で囲まれると思います。これを繰り返していってCSSでレイアウトに関連したプロパティ(例えばfloat,clear,widthなど)を設定していけば、段組などができるようになります。

広告