From 3b8debb3490ab0ca4f1c69800260d184ef96afc1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 12 Jun 2021 03:32:24 +0900 Subject: Web/HTML/Element/div を更新 (#1075) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/31 時点の英語版に同期 --- files/ja/web/html/element/div/index.html | 63 +++++++++++++++++--------------- 1 file changed, 34 insertions(+), 29 deletions(-) (limited to 'files/ja/web/html/element/div') diff --git a/files/ja/web/html/element/div/index.html b/files/ja/web/html/element/div/index.html index fcb7d5257e..101f053c7e 100644 --- a/files/ja/web/html/element/div/index.html +++ b/files/ja/web/html/element/div/index.html @@ -1,36 +1,35 @@ --- -title: '
: コンテンツ分割要素' +title: '
: コンテンツ区分要素' slug: Web/HTML/Element/div tags: + - Content Division + - Element - HTML - - HTML コンテンツのグループ化 - - 'HTML:フローコンテンツ' - - 'HTML:知覚可能コンテンツ' + - HTML grouping content + - HTML:Flow content + - Layout - Reference - - ウェブ - - リファレンス - - 要素 + - Web + - div translation_of: Web/HTML/Element/div ---
{{HTMLRef}}
-

HTML の コンテンツ分割要素 (<div>) は、フローコンテンツの汎用コンテナーです。 {{glossary("CSS")}} を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。

+

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

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

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

- - + + - @@ -39,9 +38,13 @@ translation_of: Web/HTML/Element/div - + + + + @@ -53,25 +56,29 @@ translation_of: Web/HTML/Element/div
コンテンツカテゴリフローコンテンツ, 知覚可能コンテンツコンテンツカテゴリフローコンテンツ, 知覚可能コンテンツ
許可されている内容フローコンテンツ。
+ 		フローコンテンツ。
または ({{glossary("WHATWG")}} HTML において) 親要素が {{HTMLElement("dl")}} である場合: 1つ以上の {{HTMLElement("dt")}} 要素と、それに続く1つ以上の {{HTMLElement("dd")}} 要素、さらに任意で {{HTMLElement("script")}} 要素や {{HTMLElement("template")}} 要素が混在。
許可されている親要素フローコンテンツ を受け入れるすべての要素。
+ 		フローコンテンツ を受け入れるすべての要素。
または ({{glossary("WHATWG")}} HTML において) {{HTMLElement("dl")}} 要素。
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロール すべて
-

属性

+

属性

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

-
+

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

-

使用上の注意

+

使用上の注意

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

例

+

アクセシビリティの考慮

-

単純な例

+

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

-
<div>
+
例

+
+
単純な例

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

@@ -80,7 +87,7 @@ translation_of: Web/HTML/Element/div
 
 
{{EmbedLiveSample("A_simple_example", 650, 60)}}

 
-
スタイル付けを行う例

+
スタイル付けを行う例

 
 
この例では CSS を用いて <div> にスタイルを適用することで、影付きのボックスを作成します。なお、 <div> 要素に {{htmlattrxref("class")}} 属性を使用して、 "shadowbox" という名前のスタイルを要素に適用します。

 
@@ -101,11 +108,11 @@ translation_of: Web/HTML/Element/div
   background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
 }
-

結果

+

結果

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

-

仕様書

+

仕様書

@@ -134,15 +141,13 @@ translation_of: Web/HTML/Element/div
-

ブラウザーの互換性

- - +

ブラウザーの互換性

{{Compat("html.elements.div")}}

-

関連情報

+

関連情報

    -
  • 意味的区分要素: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}
    • -
  • 記述コンテンツのスタイリング用の {{HTMLElement("span")}} 要素
    • +
  • 意味論的な区分要素: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}
    • +
  • 記述コンテンツのスタイル付け用の {{HTMLElement("span")}} 要素
-- cgit v1.2.3-54-g00ecf