<div> - 意味を持たないブロック要素の汎用タグ

divは、特別な意味を持たないブロック要素の汎用的なタグです。特定の領域を他とは区別したり、グルーピングして、コンテンツ属性(class属性値など)を付けるのに便利です。利用する場合は、他に適切なタグ(section、navなど)がないか確認しましょう。sectionタグを使えるところで、divタグを使う必要はありません。同じ性質を持ったタグにspanがあります。こちらは、インライン要素に使える汎用タグだと覚えておきましょう。

説明

下記は「2つの文章だけを目立たせたい」という目的で、divを使ってスタイリングした例です。このように、自由に領域を作れます。

HTML

<p>今日は晴れだ。天気が良い。</p>
<div class="appeal">
	<p>こんなところで道草を食っている場合じゃない。</p>
	<p>今夜はパーティだ。</p>
</div>
<p>早いところ、帰宅しよう。</p>

CSS

.appeal {
	background: #D36015 ;
	color: #fff ;
	font-weight: 700 ;
}

今日は晴れだ。天気が良い。

こんなところで道草を食っている場合じゃない。

今夜はパーティだ。

早いところ、帰宅しよう。

適切なタグを使おう

divタグは、あくまで「他に使えるタグがない時」に使える汎用タグです。適切なタグが本当にないのか、確認してから使う癖を付けましょう。例えば、下記は引用箇所にdivタグを用いていますが、本来はblockquoteタグを使うべきです。

HTML

<p>今日、感動的な文章に出会った。下記にそれを引用することにした。</p>
<div class="blockquote">
	<p>飛べない豚はただの豚だ。</p>
</div>
<p>まさに素晴らしい文章と言わざるを得ない…。</p>

CSS

.blockquote {
	margin: 1.5em 0 ;
	background: #f2f2f2 ;
	padding: 1em ;
}

今日、感動的な文章に出会った。下記にそれを引用することにした。

飛べない豚はただの豚だ。

まさに素晴らしい文章と言わざるを得ない…。

[span]と[div]の違い

divは、ブロック要素のタグです。ブロック要素は、横方向を占領し、前後が改行されます。対して、インライン要素は、改行を伴わずテキストに溶け込むように入ります。例えば、下記のように、テキスト中のある範囲にコンテンツ属性(ここではclass属性)を付けたい場合は、divタグではなく、spanタグを用いましょう。spanタグは、divタグのインライン版です。

HTML

<p>今日の天気はとても良いですね。<span class="red">太陽</span>が輝いている。</p>
今日の天気はとても良いですね。太陽が輝いている。

概要

カテゴリー
Flow content (フロー・コンテンツ)
コンテンツモデル
フローコンテンツ
利用できる場所
フローコンテンツが期待される場所で使用できます。
利用できる属性
グローバル属性
許可されている、全てのグローバル属性を指定できます。
タグの省略
divタグは、開始タグ、終了タグ、共に省略することはできません。
標準のスタイル
div {
	display: block ;
}

参考情報

div要素に関する情報は、下記サイトで確認できます。

  • W3C … W3CによるHTML5勧告。divの項目。
  • HTML language reference … W3Cによるdivのリファレンス。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。div要素の仕様。