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もあります。spanも、スタイルを指定する目的で使われますが、インラインボックスです。改行されないため、段落の途中で色を変える時などに使えます。

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

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

ブラウザのサポート状況

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

【パソコン】
項目 IE Ed Fx Ch Sa Op
div
【スマートフォン】
項目 Sa An Op Ch Fx Sm
div
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

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

HTML要素(タグ)一覧」に戻る