divタグ（Division）
特定の意味を持たず、要素をグループ化してデザインを整えるための強力な「箱」。
Webデザインの「万能コンテナ」
`
`
タグは、HTMLの中で最もシンプルでありながら、最も強力で頻繁に使われるタグです。「Division（分割）」の名の通り、ページを区画分けし、デザインやレイアウトを構築するための土台となります。
1. 基本的な使い方：ただの箱として
`
` 自体には、「文字を太くする」とか「見出しにする」といった特別な機能や意味は一切ありません。本当にただの「透明な箱」です。しかし、この「無色透明」であることが最大の武器です。
コード例
<div class="card">
<img src="icon.png" alt="">
<h3>サービス名</h3>
<p>説明文がここに入ります。</p>
</div>
<img src="icon.png" alt="">
<h3>サービス名</h3>
<p>説明文がここに入ります。</p>
</div>
このように、画像・見出し・文章をひとまとめにすることで、「カード型デザイン」のような塊を作ることができます。
2. CSSレイアウトの主役
`
` は、CSSの `Flexbox` や `Grid` と組み合わせた時に真価を発揮します。
Flexboxでの活用例
親の `
` に `display: flex;`
を指定すると、中に入っている子要素たちを横並びにしたり、均等配置したりできます。現代のレスポンシブWebデザインでは必須のテクニックです。
3. div地獄（Div Soup）を避けるには？
便利だからといって、何でもかんでも `
` で囲んでしまうと、コードが非常に読みづらくなり、検索エンジンも文書の構造を理解しにくくなります。これを「div地獄（Div Soup）」と呼びます。
HTML5では、意味を持った代替タグ（セマンティックタグ）が用意されています。これらを優先して使いましょう。
- <header>: ページやセクションのヘッダー
- <nav>: ナビゲーションメニュー
- <main>: メインコンテンツ
- <article>: 独立した記事（ブログ記事など）
- <section>: 章や区切り
- <footer>: フッター
「じゃあ `
` はいつ使うの？」 → 「CSSでデザインするためだけに要素をグループ化したい時」が正解です。
4. 入れ子構造（ネスト）のルール
`
` の中に `
` を入れることは自由にできます。複雑なレイアウトを作るには、箱の中に箱を入れていく作業が不可欠です。
<div class="container">
<div class="row">
<div class="col">左のカラム</div>
<div class="col">右のカラム</div>
</div>
</div>
<div class="row">
<div class="col">左のカラム</div>
<div class="col">右のカラム</div>
</div>
</div>
まとめ
`
`
は、積み木の一番基本的なブロックのようなものです。これらをどう組み合わせ、CSSでどう装飾するかによって、Webサイトの見た目は無限に広がります。「必要な時だけ使う」というバランス感覚を大切にしながら、美しい構造を作り上げてください。