<div>タグについて

<div>とは？

<div>タグは、HTMLにおいて汎用的な「ブロック要素」を作るためのタグです。
意味を持たないコンテナとして使われ、複数の要素をグループ化したり、スタイルやスクリプトを適用するために使われます。

基本構文

<div>
  コンテンツや他のHTML要素
</div>
  

主な用途

• 複数の要素をまとめて管理（レイアウトやデザインの単位）
• CSSによる装飾やJavaScriptでの操作対象として使用
• Webページのセクション（ヘッダー・フッター・サイドバーなど）を作成

使用例

<div class="box">
  <h2>お知らせ</h2>
  <p>イベント開催のお知らせです。</p>
</div>
  

主な属性

• id：一意の識別子（JavaScriptやCSSで指定）
• class：スタイル適用用のグループ名
• style：インラインCSSの指定

CSSと組み合わせた例

<style>
  .container {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
  }
</style>

<div class="container">
  <p>これはスタイル付きのdivです。</p>
</div>
  

ネストの例

<div class="wrapper">
  <div class="left">左カラム</div>
  <div class="right">右カラム</div>
</div>
  

注意点

• <div>自体に意味はないため、構造や意味を持たせる必要がある場合は<section>や<article>などの意味的タグを使う
• 多用しすぎると「div地獄（div soup）」になり、可読性が低下する

まとめ

• <div>は汎用的なブロック要素で、要素のグループ化に使う
• CSSやJavaScriptと連携してデザインや動作を指定する
• 意味のない構造には適しているが、意味のある内容には適切なタグを使用
• 読みやすく管理しやすいコードを書くためにクラスやIDを活用