<div>: コンテンツ分割要素
HTML の コンテンツ分割要素 (<div>
) は、フローコンテンツの汎用コンテナーです。 CSS を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
<div>
要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class
や id
を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang
属性を使用して) 示したりするために使用します。
コンテンツカテゴリ | フローコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | フローコンテンツ。 または (WHATWG HTML において) 親要素が <dl> である場合: 1つ以上の <dt> 要素と、それに続く1つ以上の <dd> 要素、さらに任意で <script> 要素や <template> 要素が混在。 |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツ を受け入れるすべての要素。 または (WHATWG HTML において) <dl> 要素。 |
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLDivElement |
属性
この要素はグローバル属性を持ちます。
メモ: align
属性は廃止されたので、使用しないでください。代わりに、 CSS のプロパティを使用したり、 CSS グリッドや CSS フレックスボックスを使用して <div>
要素をページの中央に配置したりしてください。
使用上の注意
例
単純な例
<div>
<p>Any kind of content here. Such as
<p>, <table>. 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);
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <div> の定義 |
現行の標準 | 最新のスナップショットから変更なし。 |
HTML5 <div> の定義 |
勧告 | align を廃止 |
HTML 4.01 Specification <div> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。