<div> ブロックレベル要素としての範囲を指定

<div>タグの説明

<div>は、文章の特定の範囲を指定して一つのまとまりとして扱いたい場合に使用します。

例えば、文章の構造に何ら影響を与えない形で、見た目だけをスタイルシートで変更したい場合に向いています。また、ウェブのデザイン面で工夫を凝らしたい場合に汎用的に扱える便利な要素でもあります。

この要素自体は、何の意味も持ちません。だからこそ、HTMLタグの中で最も柔軟に使える要素であるとも言えます。特に、CSS（スタイルシート）が一般的となった今、モダンなレイアウトが求められる環境では、必ず使わなければいけないタグの一つとなっています。

逆に、何かの意味や役割りが発生する場所に<div>を採用すると、それだけで意味論的な構造が失われてしまいます。例えば、本来<article>や<section>を使うべき場所で、安易にこのタグを配置すべきではありません。

<div>タグの特徴

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• この要素自体は何の意味も持たず、文章のアウトラインにも影響を与えません。
• 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
• 同一のページ内に複数使うことができます。この要素自体を入れ子にすることも可能です。

<div>に指定できる主な属性

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<div>の使い方とサンプル

このタグは、あらゆる場面で汎用的なまとまりを指定できます。ウェブのデザイン面でCSSと最も親和性の高い要素と言えるでしょう。

<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>

div {
	margin-top: 10px;
	padding: 5px;
	border: 1px solid #ccc;
}
#box1 {
	text-align: left;
}
#box2 {
	text-align: center;
}
#box3 {
	text-align: right;
}

CSSと<div>の入れ子構造を利用したレイアウトの参考例です。このようなマークアップは、モダンデザインのサイトで一般的な技術となっています。

<div id="container">
	<div id="header">Header</div>
	<div id="contents">
		<div id="main">Main</div>
		<div id="sidebar">Side</div>
	</div>
	<div id="footer">Footer</div>
</div>

div {
	margin-top: 1rem;
	padding: 0 1rem 1rem 1rem;
	border: 1px solid #ccc;
}
#contents {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 1rem;
	min-height: 200px;
}
#contents > #main {
	flex: 2;
}
#contents > #sidebar {
	flex: 1;
}