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

Baseline Widely available

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

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

試してみましょう

<div class="warning">
  <img
    src="/shared-assets/images/examples/leopard.jpg"
    alt="威圧的なヒョウ。" />
  <p>ヒョウに注意</p>
</div>

.warning {
  border: 10px ridge red;
  background-color: yellow;
  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>
    あらゆるコンテンツがここに来ます。 &lt;p&gt; や &lt;table&gt; などです。名前を付けてください！
  </p>
</div>

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

スタイル設定を行う例

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

HTML

html
<div class="shadowbox">
  <p>素敵な影付きボックスに表示された、とても興味深いメモです。</p>
</div>

CSS

css
.shadowbox {
  width: 15em;
  border: 1px solid #333333;
  box-shadow: 8px 8px 5px #444444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
}