<div>

対応:		HTML 4（1997）

『div』はHTMLの汎用ブロックコンテナ要素で、それ自体に意味を持たず、他の要素をグループ化してレイアウトやスタイルを適用するために使用します。

構文

<div>コンテンツ</div>

<!-- classやidを指定してCSSやJavaScriptと連携 -->
<div class="container">
  <div id="header">ヘッダー</div>
  <div id="main">メインコンテンツ</div>
</div>

主な属性

属性	概要
class	CSSのクラスを指定します。スペース区切りで複数のクラスを指定できます。
id	要素を一意に識別するIDを指定します。ページ内で重複してはいけません。
style	インラインCSSを直接記述します。
data-*	カスタムデータ属性です。JavaScriptからデータを取得する際に利用します。

サンプルコード

sample_div.html

<!-- divでカードコンポーネントを作成 -->
<div class="card">
  <div class="card-title">タイトル</div>
  <div class="card-body">ここにカードの本文が入ります。</div>
</div>

<div class="card">
  <div class="card-title">2枚目のカード</div>
  <div class="card-body">divを入れ子にすることで複雑なレイアウトを作れます。</div>
</div>

<!-- CSSグリッドやFlexboxのコンテナとしてよく使う -->
<div class="container">
  <div class="sidebar">サイドバー</div>
  <div class="main-content">メインコンテンツ</div>
</div>

<!-- JavaScriptから操作するターゲットとして使う -->
<div id="modal" style="display: none;">
  <div class="modal-content">
    <p>モーダルの内容</p>
    <button onclick="document.getElementById('modal').style.display='none'">閉じる</button>
  </div>
</div>

<!-- data属性でJavaScriptとデータをやり取り -->
<div class="product-card" data-product-id="42" data-price="1980">
  <div class="product-name">プログラミング入門書</div>
  <div class="product-price">1,980円</div>
</div>

実行結果

カードが2枚縦に並んで表示されます。それぞれのカードの中にタイトルと本文がグループ化されています。

サンプルページはこちら

Flexboxレイアウト

『div』はFlexboxのコンテナとして最もよく使われます。子要素を横並び・縦並び・中央揃えなど、柔軟に配置できます。

<style>
  /* 横並び・中央揃えの基本 */
  .flex-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* カードを横並びにして折り返す */
  .card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .card-grid .card {
    flex: 1 1 200px; /* 最小200px、空きスペースを等分 */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
  }

  /* ヘッダー: ロゴ左、ナビ右 */
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
  }
</style>

<div class="card-grid">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>

<header class="site-header">
  <div class="logo">サイト名</div>
  <nav>ナビゲーション</nav>
</header>

CSS Gridレイアウト

複雑な2次元レイアウト（行・列の両方を制御したい場合）にはCSS Gridが向いています。

<style>
  /* 3カラムのグリッドレイアウト */
  .grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 等幅3列 */
    gap: 16px;
  }

  /* サイドバー付きレイアウト */
  .page-layout {
    display: grid;
    grid-template-columns: 1fr 280px; /* メイン+サイドバー */
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
    gap: 16px;
    min-height: 100vh;
  }
  .page-layout .header  { grid-area: header; }
  .page-layout .main    { grid-area: main; }
  .page-layout .sidebar { grid-area: sidebar; }
  .page-layout .footer  { grid-area: footer; }

  /* レスポンシブ: 600px以下は1カラム */
  @media (max-width: 600px) {
    .grid-3col {
      grid-template-columns: 1fr;
    }
    .page-layout {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "main"
        "sidebar"
        "footer";
    }
  }
</style>

<div class="page-layout">
  <div class="header">ヘッダー</div>
  <main class="main">メインコンテンツ</main>
  <aside class="sidebar">サイドバー</aside>
  <div class="footer">フッター</div>
</div>

概要

『div』要素はHTMLの中で最もよく使われる要素の一つです。ブロックレベル要素として振る舞うため、前後に改行が入り、横幅はデフォルトで親要素いっぱいに広がります。要素をグループ化してCSSでスタイルを当てたり、JavaScriptで操作したりする際の「器」として活用されます。

ただし、意味のある文書構造には適切なセマンティック要素を優先して使用してください。ページのヘッダーには『header』、ナビゲーションには『nav』、メインコンテンツには『main』、フッターには『footer』など、用途に応じた要素が用意されています。『div』はこれらの要素では表現できない汎用的なグループ化に使います。

インライン要素をグループ化したい場合は『div』ではなく、インラインの汎用コンテナである『span』を使用してください。