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
|
---
title: '<div>: コンテンツ分割要素'
slug: Web/HTML/Element/div
tags:
- HTML
- HTML コンテンツのグループ化
- 'HTML:フローコンテンツ'
- 'HTML:知覚可能コンテンツ'
- Reference
- ウェブ
- リファレンス
- 要素
translation_of: Web/HTML/Element/div
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の コンテンツ分割要素</strong> (<strong><code><div></code></strong>) は、フローコンテンツの汎用コンテナーです。 {{glossary("CSS")}} を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。</span></p>
<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p><code><div></code> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 {{htmlattrxref("class")}} や {{htmlattrxref("id")}} を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を ({{htmlattrxref("lang")}} 属性を使用して) 示したりするために使用します。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 知覚可能コンテンツ</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/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/HTML/Content_categories#Flow_content">フローコンテンツ</a> を受け入れるすべての要素。<br>
または ({{glossary("WHATWG")}} HTML において) {{HTMLElement("dl")}} 要素。</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" name="Attributes">属性</h2>
<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p>
<div class="blockIndicator 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><div></code> 要素をページの中央に配置したりしてください。</p>
</div>
<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
<ul>
<li><code><div></code> 要素は、他に適切な意味的要素（{{HTMLElement("article")}} や {{HTMLElement("nav")}} など）がない場合に限り使用してください。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="A_simple_example" name="A_simple_example">単純な例</h3>
<pre class="brush:html"><div>
<p>Any kind of content here. Such as
&lt;p&gt;, &lt;table&gt;. You name it!</p>
</div> </pre>
<p>結果はこのようになります。</p>
<p>{{EmbedLiveSample("A_simple_example", 650, 60)}}</p>
<h3 id="A_styled_example" name="A_styled_example">スタイル付けを行う例</h3>
<p>この例では CSS を用いて <code><div></code> にスタイルを適用することで、影付きのボックスを作成します。なお、 <code><div></code> 要素に {{htmlattrxref("class")}} 属性を使用して、 <code>"shadowbox"</code> という名前のスタイルを要素に適用します。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="shadowbox">
<p>Here's a very interesting note displayed in a
lovely shadowed box.</p>
</div></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" name="Result">結果</h4>
<p>{{EmbedLiveSample("A_styled_example", 650, 120)}}</p>
<h2 id="Specifications" name="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', '<div>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>最新のスナップショットから変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td><code>align</code> を廃止</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("html.elements.div")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>意味的区分要素: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
<li>記述コンテンツのスタイリング用の {{HTMLElement("span")}} 要素</li>
</ul>
|
