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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

<div class="warning"> <img src="/shared-assets/images/examples/leopard.jpg" alt="An intimidating leopard." /> <p>Beware of the leopard</p> </div>

.warning { border: 10px ridge #f00; background-color: #ff0; padding: 0.5rem; display: flex; flex-direction: column; } .warning img { width: 100%; } .warning p { font: small-caps bold 1.2rem sans-serif; text-align: center; }

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

属性

この要素にはグローバル属性があります。

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

使用上の注意

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

アクセシビリティの考慮

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

例

単純な例

html

<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

html

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

CSS

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); }

結果

技術的概要

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

仕様書

Specification
HTML # the-div-element