<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> 要素は generic の暗黙のロールを持っており、まったくない訳ではありません。これは、特定の役割を持つ直接の子孫要素が適切に機能することを期待する、特定の ARIA の組み合わせ宣言に影響を与える可能性があります。
例
基本的な例
<div>
<p>
あらゆるコンテンツがここに来ます。 <p> や <table> などです。名前を付けてください！
</p>
</div>
結果はこのようになります。
スタイル設定を行う例
この例では CSS を用いて <div> にスタイルを適用することで、影付きのボックスを作成します。なお、 <div> 要素に class 属性を使用して、 "shadowbox" という名前のスタイルを要素に適用します。
HTML
<div class="shadowbox">
<p>素敵な影付きボックスに表示された、とても興味深いメモです。</p>
</div>
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);
}
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 |
フローコンテンツ。 または (WHATWG HTML において) 親要素が <dl> である場合は、 1 つ以上の
<dt> 要素と、それに続く 1 つ以上の
<dd> 要素、さらに任意で
<script> 要素や
<template> 要素が混在。
|
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 |
フローコンテンツ
を受け入れるすべての要素。 または (WHATWG HTML において) <dl> 要素。
|
| 暗黙の ARIA ロール |
generic
|
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLDivElement |
仕様書
| Specification |
|---|
| HTML # the-div-element |
ブラウザーの互換性
Loading…