Revision 316879 of div 要素

<h2 id="Summary" name="Summary">概要</h2>

<p>この要素は、何か特定のセマンティクスを表すものではない、フロー・コンテンツの為の汎用コンテナです。CSS によるスタイリングの用途等で、要素のグループ化が必要な場合に用います。多くの場合、 <strong>class 属性</strong>か <strong>id 属性</strong>、<strong>lang 属性</strong>等と共に使われます。セマンティクス上で他に適切な要素がある場合はそちらを使用して下さい。</p>

<p><code>&lt;div&gt;</code> は {{ HTMLElement("span") }} 要素と非常に似た役割を持っています。{{ HTMLElement("span") }} 要素がインラインレベル要素の汎用コンテナであるのに対し、<code>&lt;div&gt;</code> は<strong>ブロックレベル要素の為の汎用コンテナの役割</strong>を果たします。</p>




<h2 id="Usage_context" name="Usage_context">使用可能な場所</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th>コンテンツカテゴリ</th>
      <td><a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">フローコンテンツ</a></td>
    </tr>
    <tr>
      <th>許可された内容</th>
      <td>{{ HTMLElement("style") }} 及び、<a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">フローコンテンツ</a></td>
    </tr>
    <tr>
      <th>タグの省略</th>
      <td>不可。開始タグと終了タグの両方が必要です。</td>
    </tr>
    <tr>
      <th>許可された親要素</th>
      <td><a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">フローコンテンツ</a>を受け入れる全ての要素</td>
    </tr>
    <tr>
      <th>標準文書</th>
      <td><a class="external" href="https://www.w3.org/TR/html5/grouping-content.html#the-div-element" title="https://www.w3.org/TR/html5/grouping-content.html#the-div-element">HTML 5, section 4.5.13</a>; <a class="external" href="https://www.w3.org/TR/html401/struct/global.html#h-7.5.4" title="https://www.w3.org/TR/html401/struct/global.html#h-7.5.4">HTML 4.01, section 7.5.4</a></td>
    </tr>
  </tbody>
</table>




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

<p>他の全ての要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p>

<p>{{ HTMLVersionInline("5") }} では、 <code>&lt;div&gt;</code> の <strong>align 属性</strong> は{{ obsolete_inline() }}となっています。</p>





<h2 id="DOM_interface" name="DOM_interface">DOM インターフェース</h2>
<p>この要素は <a href="/ja/docs/DOM/HTMLDivElement" title="DOM/HTMLDivElement"><code>HTMLDivElement</code></a> インターフェースを提供します。</p>





<h2 id="Examples" name="Examples">例</h2>
<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>




<h3 id="Result" name="Result">表示結果</h3>
<p>Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!</p>



<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>




<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>

<div>{{HTML:Element_Navigation()}}</div>