div要素

Home>HTML>要素リファレンス>div

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

div要素の役割

div要素はブロックレベルの範囲を指定する要素です。
その範囲に関してまとめてスタイルシートを適用したり、レイアウト枠として利用するのが一般的です。

div要素に設定できる属性

属性名 意味
class クラス名。CSSを適用するときなどに使用する。
dir 文字表記の方向。左から右（ltr）と、右から左（rtl）を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
id ID名。CSSを適用するときに使用する。
lang 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。
style スタイルシートを直接記述する。
title 補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。

div要素の使い方

<div style="background-color:#cccccc;width:100px;height:100px">ブロックレベル</div>

以上のコードを実行すると、以下のように、横幅と高さが100pxで、背景色がグレーの領域が確保されます。

ブロックレベル

div要素の入れ子の是非

div要素を入れ子にすることは、そもそもdiv要素がブロックレベル要素であることから、おかしいとされています。
CSSを正しく使おうと考える製作者にとって、div要素をレイアウトのために入れ子にするという行為は、table要素を使ってレイアウトをすることと同じく、スマートではないと思われています。

このサイトもdiv要素を入れ子にしたレイアウトをしており、わたし自身はそこまで厳密にHTMLやCSSのルールを守ってはいません。

div要素を使わずに他の要素にCSSを反映させて同様のレイアウトを作ることは可能です。が、div要素によって「ここからメインコンテンツ」「ここからメニュー」と明示した方がわかりやすいという理由で使っています。

→詳しくは「CSS：レイアウトサンプル：ヘッダー、フッター、3カラム（固定幅）」をご覧下さい。

関連リンク

よく読まれている記事

UpDate:2010-3-18