目次
divタグとは？
<div>タグは、HTMLで要素をグループ化（区切る）ためのタグです。
「division（分割）」の略で、Webページのレイアウトを整えるために使われます。
例えば…
- セクションをまとめたい
- 箱で囲んで背景色をつけたい
- Flexbox や Grid で配置したい
- 画像 + テキストをまとめたい
- CSS を当てるための“まとまり”を作りたい
こんなとき、ほぼ必ず div が使われます。
なぜ div がよく使われるの？
理由はシンプルで、
自由に使える「意味を持たない箱」だから
div は「意味を持たないタグ（非セマンティックタグ）」なので、
どんな用途にも柔軟に使えます。
他のタグと比較すると分かりやすいです：
| タグ | 用途 | 意味（セマンティック） |
|---|---|---|
| header | ヘッダー | あり |
| nav | ナビゲーション | あり |
| section | 章・まとまり | あり |
| article | 記事 | あり |
| footer | フッター | あり |
| div | レイアウト・区切り | なし（自由） |
「意味のあるタグを使うべき」とよく言われますが、
意味がないからこそ レイアウトの土台として最強 なのが div です。
divタグの基本的な使い方
1. 単純に “箱” として使う
<div class="box">
ここに文字が入ります
</div>2. 画像とテキストをまとめる
<div class="card">
<img src="sample.jpg" alt="">
<p>テキストが入ります。</p>
</div>3. 2カラムレイアウトを作る
<div class="columns">
<div class="left">左側</div>
<div class="right">右側</div>
</div>4. 背景色をつけたい部分を囲む
<div class="bg-blue">
背景色ありのエリア
</div>CSS と組み合わせると div は最強になる
たとえば 2 カラムを作るなら Flexbox を適用できます：
.columns {
display: flex;
gap: 20px;
}
.left, .right {
flex: 1;
}→ これだけでレスポンシブにも強い綺麗なレイアウトが実現できます。
div を使うときの注意点
① 乱用しすぎない（div地獄）
良くない例：
<div>
<div>
<div>なにこれ？</div>
</div>
</div>→ 構造が読みにくくなり、SEO も弱くなる。
意味がある部分は section / article / nav / header を使う
→ レイアウト部分は div
という使い分けが最強。
いつ div を使うべきか（まとめ）
| シーン | div を使うべき？ | 理由 |
|---|---|---|
| 背景色をつけたい | ◎ | 囲んでスタイルを当てやすい |
| レイアウトを作りたい | ◎ | Flex・Grid と相性最強 |
| 意味を持たない区切り | ◎ | 非セマンティックだから適役 |
| ナビ・フッター・章など意味ある部分 | △ | section や nav を使う方がSEOに◎ |
| 単なる飾り目的 | 〇 | 問題なし |
結論：div は「レイアウトのための箱」
div は HTML のなかで最も使われるタグで、
Webページを構築する“基礎ブロック”です。
意味は持たないけれど、自由度が高いからこそ重要。
意味のあるタグと組み合わせながら、
レイアウトのベースとして活用すると完璧です。
もっと学びたい方へ
- section と div の違いは？
- div を減らしてもいい書き方は？
- クラス名設計（BEMなど）はどうする？
必要なら次の記事も作成できますので、お気軽にどうぞ！