files/ja/web/html/element/div/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

---
title: '<div>: コンテンツ区分要素'
slug: Web/HTML/Element/div
tags:
  - Content Division
  - Element
  - HTML
  - HTML grouping content
  - HTML:Flow content
  - Layout
  - Reference
  - Web
  - div
translation_of: Web/HTML/Element/div
---
<div>{{HTMLRef}}</div>

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

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

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

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>, 知覚可能コンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>。<br>
    または ({{glossary("WHATWG")}} HTML において) 親要素が {{HTMLElement("dl")}} である場合: 1つ以上の {{HTMLElement("dt")}} 要素と、それに続く1つ以上の {{HTMLElement("dd")}} 要素、さらに任意で {{HTMLElement("script")}} 要素や {{HTMLElement("template")}} 要素が混在。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a> を受け入れるすべての要素。<br>
    または ({{glossary("WHATWG")}} HTML において) {{HTMLElement("dl")}} 要素。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>すべて</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLDivElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">属性</h2>

<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p>

<div class="notecard note">
<p><strong>メモ:</strong> <code>align</code> 属性は廃止されたので、使用しないでください。代わりに、 CSS のプロパティを使用したり、 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>や <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">CSS フレックスボックス</a>を使用して <code>&lt;div&gt;</code> 要素をページの中央に配置したりしてください。</p>
</div>

<h2 id="Usage_notes">使用上の注意</h2>

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

<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>

<p><code>&lt;div&gt;</code> 要素は <a href="https://www.w3.org/TR/wai-aria-1.2/#generic"><code>generic</code> の暗黙のロール</a>を持っており、まったくない訳ではありません。これは、特定の役割を持つ直接の子孫要素が適切に機能することを期待する、特定の ARIA の組み合わせ宣言に影響を与える可能性があります。</p>

<h2 id="Examples">例</h2>

<h3 id="A_simple_example">単純な例</h3>

<pre class="brush: html">&lt;div&gt;
  &lt;p&gt;Any kind of content here. Such as
  &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. You name it!&lt;/p&gt;
&lt;/div&gt; </pre>

<p>結果はこのようになります。</p>

<p>{{EmbedLiveSample("A_simple_example", 650, 60)}}</p>

<h3 id="A_styled_example">スタイル付けを行う例</h3>

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="shadowbox"&gt;
  &lt;p&gt;Here's a very interesting note displayed in a
  lovely shadowed box.&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: 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);
}</pre>

<h4 id="Result">結果</h4>

<p>{{EmbedLiveSample("A_styled_example", 650, 120)}}</p>

<h2 id="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>最新のスナップショットから変更なし。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td><code>align</code> を廃止</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.div")}}</p>

<h2 id="See_also">関連情報</h2>

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