<div>タグの解説
<div>は、汎用的なブロックレベルのコンテナを作成したい場所に使用します。例えば、文章の意味に何ら影響を与えない形で、見た目だけをスタイルシートで変更したい箇所に適しています。また、ウェブページのデザイン面で工夫を凝らしたい場合に、レイアウトを行うための透明な箱として便利に扱える要素でもあります。
この要素自体は、何の意味も持ちません。だからこそ、HTMLタグの中で最も柔軟に使える要素であるとも言えます。特に、CSS（スタイルシート）でレイアウトや装飾を行うことを前提とした環境では、最も使う機会の多いタグであると言えます。
逆に、文章の中で意味や文脈が与えられそうな箇所には、<div>を乱用せずに適切なタグを配置して下さい。<div>は、文章のアウトラインも意味論的な相互作用も生み出しません。本来、<article>や<section>で囲うべき箇所を、安易にこのタグで代用すべきではないのです。
<div>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素自体は何の意味も持たず、文章のアウトラインにも影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にすることも可能です。
<div>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<div>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。これ自体は何の意味も持たないフラットな要素であるとみなされます。特定の範囲をグループ化したり、レイアウトや装飾を行うためのコンテナとして活用できます。
<div>content</div>
<div>要素はドキュメントの中で特別な意味を持たない範囲を表します。文章的に意味のある部分や、機能として明確な役割りのある部分に対しては、適切なタグで囲うようにしましょう。逆に、意味を持たせたくない部分にこそ最適です。汎用的なまとまりを任意の箇所に指定できるので、スタイルシートとの親和性が最も高い要素と言えます。
例えば、文章の意味を変えずに寄せる方向だけを変化させたい場合、次のように指定します。class属性で装飾の命令をまとめておけば、別の箇所で同じ装飾が必要になった時に使い回すことができます。
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
<div class="box-3">box-3</div>
div {
padding: 0.5rem;
margin-block-start: 1rem;
border: 1px solid #ccc;
}
.box-1 {
text-align: left;
}
.box-2 {
text-align: center;
}
.box-3 {
text-align: right;
}
<div>要素を入れ子構造にすると、より複雑なレイアウトや装飾を行うことができます。特に、サイト全体で使い回すパーツや、ページの中で何度も登場するモジュールなどを管理する場合などに活躍する方法です。
例えば、先程のサンプルを横並びのレイアウトにしたい場合は、親要素に<div>を追加して、フレックス・レイアウトが可能となるようにプロパティを調整します。
<div class="sample-block">
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
<div class="box-3">box-3</div>
</div>
.sample-block {
display: flex;
gap: 0.5rem;
}
.sample-block div {
flex-grow: 1;
padding: 0.5rem;
border: 1px solid #ccc;
}
.box-1 {
text-align: left;
}
.box-2 {
text-align: center;
}
.box-3 {
text-align: right;
}
属性を使って追加情報を付与する
<div>は、それ自体では意味を持ちませんが、属性を追加することで様々な情報をコンテンツに付与できます。以下の例は、特定の範囲の文字列が固有名詞である場合に、それに使われている言語と翻訳不可の情報を与えています。
<div lang="ja" translate="no">
翻訳が不要な日本語の固有名
</div>
ページ全体のレイアウトを<div>で行う
<div>の入れ子構造を利用してページ全体のレイアウトを行うことができます。重要な意味を持つ要素は、別のタグでマークアップして子要素に配置します。<div>は、あくまでそれらを入れる箱の役目に専念させます。
<div class="sample-block">
<div class="header">Header</div>
<div class="main">Main</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
.sample-block {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 1fr 25%;
gap: 0.5rem;
}
.sample-block div {
padding: 1rem;
border: 1px solid #ccc;
text-align: center;
}
.sample-block .header {
grid-area: header;
}
.sample-block .main {
grid-area: main;
min-block-size: 300px;
}
.sample-block .sidebar {
grid-area: sidebar;
}
.sample-block .footer {
grid-area: footer;
}
<div>よりも適切なタグがある場合は置き換える
柔軟に扱える便利な箱だからといって、何でもかんでも<div>で囲って済ませてはいけません。文章には格付けや文脈があります。それをマークアップして正しく伝えることがHTMLの役割りだからです。
// 誤りではないが、divを乱用し過ぎている例
<div class="sample-block">
<h1>文章のタイトル</h1>
<p>序章、概要、キャッチフレーズ。</p>
<div class="section">
<h2>章の見出し</h2>
<p>章の本文。文章の内容。</p>
<p>章の本文。文章の内容。</p>
</div>
<div class="section">
<h2>章の見出し</h2>
<p>章の本文。文章の内容。</p>
<p>章の本文。文章の内容。</p>
</div>
</div>
// 適切な要素を配置した例
<article class="sample-block">
<h1>文章のタイトル</h1>
<p>序章、概要、キャッチフレーズ。</p>
<section class="section">
<h2>章の見出し</h2>
<p>章の本文。文章の内容。</p>
<p>章の本文。文章の内容。</p>
</section>
<section class="section">
<h2>章の見出し</h2>
<p>章の本文。文章の内容。</p>
<p>章の本文。文章の内容。</p>
</section>
</article>