Skip to content

Latest commit

 

History

History
147 lines (115 loc) · 5.47 KB

index.md

File metadata and controls

147 lines (115 loc) · 5.47 KB
Raw
title slug l10n
<div>: コンテンツ区分要素
Web/HTML/Element/div
sourceCommit
942a529383ee7ee3996fb234187641c08935f3ff

{{HTMLSidebar}}

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

{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}

「純粋」なコンテナーとして、<div> 要素は本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を（lang 属性を使用して）示したりするために使用します。

属性

この要素にはグローバル属性があります。

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

使用上の注意

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

アクセシビリティの考慮

<div> 要素は generic の暗黙のロールを持っており、まったくない訳ではありません。これは、特定の役割を持つ直接の子孫要素が適切に機能することを期待する、特定の ARIA の組み合わせ宣言に影響を与える可能性があります。

例

単純な例

<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

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

{{EmbedLiveSample("A_simple_example", 650, 60)}}

スタイル付けを行う例

この例では 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);
}

結果

{{EmbedLiveSample("A_styled_example", 650, 120)}}

技術的概要

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

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

  • 意味論的な区分要素: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}
  • 記述コンテンツのスタイル付け用の {{HTMLElement("span")}} 要素