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> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
align
非推奨非標準
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報

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

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