Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<div>

『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からデータを取得する際に利用します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .card {
      border: 1px solid #ccc;
      padding: 16px;
      margin: 8px;
      border-radius: 4px;
    }
    .card-title {
      font-weight: bold;
      font-size: 1.2em;
    }
    .card-body {
      color: #555;
    }
  </style>
</head>
<body>

  <!-- 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>

</body>
</html>

実行結果

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

<!-- ブラウザ上では以下のように表示されます -->
┌─────────────────────────┐
│ タイトル                 │
│ ここにカードの本文が...  │
└─────────────────────────┘
┌─────────────────────────┐
│ 2枚目のカード            │
│ divを入れ子にすること... │
└─────────────────────────┘

概要

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

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

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