＜div要素＞ - 汎用的なブロック要素

公開日: 2017/02/09

div要素は意味を持たないブロック要素です。ある範囲に、意味付けはしたくないけどデザイン目的でclass属性を適用したい場合などに便利です。利用する時は、他により適切な要素がないかを確認するようにしましょう。

概要

名前

div

カテゴリー

Flow content

Palpable content

配置できる場所

Flow contentが期待される場所。

dl要素の子要素。

コンテンツモデル

dl要素の子要素である場合、1つ以上のdt要素とdd要素のペア。

dl要素の子要素ではない場合、Flow content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLDivElement

デフォルトのスタイル

div {
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-div-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

意味を持たないとは？

div要素はセマンティクス上の意味を持たない汎用なブロック要素です。例えば、「字下げをしたい」というデザイン上の理由でblockquote要素を使ったとします。すると、ユーザーエージェントは該当箇所を「どこかから引用した文章」と解釈してしまいます。blockquote要素は「引用」という意味を持つ要素だからです。

間違ったblockquote要素の使用例

<p>昨日は疲れた。</p>

<blockquote>
	<p>というのも10kmくらい歩いたのだ。</p>
	<p>鬼怒川の七体の鬼怒太像を探す、というテーマで！</p>
</blockquote>

<p>久々に運動した気分だ。</p>

デモを開く

こういう時に便利なのが、意味を持たないdiv要素です。余計な意味を与えずに、任意の範囲をマークアップすることができるというわけです。マークアップする時に適切な要素がない場合は、最後の手段としてdiv要素を使いましょう。

div要素の使用例

<p>昨日は疲れた。</p>

<div class="aaa">
	<p>というのも10kmくらい歩いたのだ。</p>
	<p>鬼怒川の七体の鬼怒太像を探す、というテーマで！</p>
</div>

<p>久々に運動した気分だ。</p>

デモを開く

CSS

.aaa {
	margin-left: 1em ;
}

div要素とspan要素の違い

同じ用途で使えるspan要素があります。div要素はブロック要素なのに対して、span要素はインライン要素です。簡単に言うと、ブロック要素は前後に改行が入りますが、インライン要素は前後に改行が入りません。テキストを囲みたい時はspan要素を使うといいでしょう。

div要素とspan要素の違い

<h1>div要素とspan要素の違い</h1>

<h2>悪い例</h2>
<div>テキストを囲みたい時は<div class="aaa">span要素</div>を使いましょう。</div>

<h2>良い例</h2>
<p>テキストを囲みたい時は<span class="aaa">span要素</span>を使いましょう。</p>

デモを開く

CSS

.aaa {
	border: 1px solid #000 ;
	color: red ;
}

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜div要素＞ - 汎用的なブロック要素</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/div/">
		<style>
			body {
				background-color: #fff ;
			}

			div {
				color: red ;
			}
		</style>
	</head>
	<body>

<p>div要素は、意味を持たないブロック要素です。デザイン目的で一定の範囲にclass属性を適用したい場合などに使いましょう。例えば、ある範囲だけテキスト装飾で赤字にしたい、などという時です。</p>

<p>昨日は疲れた。</p>

<div>
	<p>というのも10kmくらい歩いたのだ。</p>
	<p>鬼怒川の七体の鬼怒太像を探す、というテーマで！</p>
</div>

<p>久々に運動した気分だ。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/598/"> <meta charset="utf-8"> <title>【デモ】＜div要素＞ - 汎用的なブロック要素</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/div/"> </head> <body>

<p>div要素は、意味を持たないブロック要素です。デザイン目的で一定の範囲にclass属性を適用したい場合などに使いましょう。例えば、ある範囲だけテキスト装飾で赤字にしたい、などという時です。</p> <p>昨日は疲れた。</p> <div> <p>というのも10kmくらい歩いたのだ。</p> <p>鬼怒川の七体の鬼怒太像を探す、というテーマで！</p> </div> <p>久々に運動した気分だ。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } div { color: red ; }

</style>

</script>