div要素

特に何も意味しない要素もあります。

本ページでは、div要素について説明します。

div要素とは

divは、特に意味を持たない要素です。用途としては、背景色を変えたり、ボックスを横並びさせたりといったスタイル目的で使います。

divの定義は、以下のとおりです。

【divの定義】
コンテンツカテゴリ	フローコンテンツ、認知可能コンテンツ
可能な親要素	フローコンテンツを包含できる要素、dl
可能なコンテンツ	フローコンテンツ (dlが親要素の時は、dtやdd要素。スクリプトサポート要素も可能)
タグの省略	不可
DOMインターフェース	HTMLDivElement

divは、以前は多くの場面で使われていましたが、今はarticleやasideなどの意味を持つ要素が加わりました。このため、他に適切な要素がない場合にだけ使うことが推奨されています。

以下は、divを使ったHTMLの例です。

【divの利用例】

<div class="test">
<p>テストです。</p>
<p>背景色は灰色です。</p>
</div>

クラスを使っているため、CSSを以下のように記述したとします。

【cssの記述例】

.test {
  background-color: lightgray;
}

上記により、以下のように表示されます。

このように、複数の子要素をまとめて、背景などのスタイルを変更する時に使われます。

特に意味を持たない要素には、spanもあります。spanも、スタイルを指定する目的で使われますが、インラインボックスです。改行されないため、段落の途中で色を変える時などに使えます。

また、可能なコンテンツはフレージングコンテンツ(インラインボックス)のため、フレージングコンテンツをまとめるコンテナとして使います。

divは、ブロックボックスです。必ずブロックのような四角い形を作って表示され、改行されます。このため、フローコンテンツ(ブロックボックス含む)のコンテナとして、スタイル付けするために使われます。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
div	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
div	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。