HTML の コンテンツ分割要素 (<div>) は、フローコンテンツの汎用コンテナーです。 CSS を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。 <div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 classid を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を(lang 属性を使用して)示したりするために使用します。

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

属性

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

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

使用上の注意

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

単純な例

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

結果

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
<div> の定義
現行の標準 最新のスナップショットから変更なし。
HTML5
<div> の定義
勧告 align を廃止
HTML 4.01 Specification
<div> の定義
勧告  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり1 あり あり あり
align あり あり1 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
align あり あり あり4 あり あり あり

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09, yyss, ethertank
 最終更新者: mfuji09,