<div>: コンテンツ区分要素

HTML の コンテンツ区分要素 (<div>) は、フローコンテンツの汎用コンテナーです。 CSS を用いて何らかのスタイル付けがされる (例えば、スタイルが直接適用されたり、親要素にフレックスボックスなどの何らかのレイアウトモデルが適用されるなど) までは、コンテンツやレイアウトには影響を与えません。

試してみましょう

<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。

コンテンツカテゴリ フローコンテンツ, 知覚可能コンテンツ
許可されている内容 フローコンテンツ。
または (WHATWG HTML において) 親要素が <dl> である場合: 1つ以上の <dt> 要素と、それに続く1つ以上の <dd> 要素、さらに任意で <script> 要素や <template> 要素が混在。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツ を受け入れるすべての要素。
または (WHATWG HTML において) <dl> 要素。
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール すべて
DOM インターフェイス HTMLDivElement

属性

この要素はグローバル属性を持ちます。

メモ: align 属性は廃止されたので、使用しないでください。代わりに、 CSS のプロパティを使用したり、 CSS グリッドや CSS フレックスボックスを使用して <div> 要素をページの中央に配置したりしてください。

使用上の注意

  • <div> 要素は、他に適切な意味的要素（<article> や <nav> など）がない場合に限り使用してください。

アクセシビリティの考慮

<div> 要素は generic の暗黙のロールを持っており、まったくない訳ではありません。これは、特定の役割を持つ直接の子孫要素が適切に機能することを期待する、特定の ARIA の組み合わせ宣言に影響を与える可能性があります。

例

単純な例

<div>
  <p>Any kind of content here. Such as
  &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div>

結果はこのようになります。

スタイル付けを行う例

この例では CSS を用いて <div> にスタイルを適用することで、影付きのボックスを作成します。なお、 <div> 要素に class 属性を使用して、 "shadowbox" という名前のスタイルを要素に適用します。

HTML

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a
  lovely shadowed box.</p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

結果

仕様書

Specification
HTML Standard
# the-div-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報