diff options
Diffstat (limited to 'files/ja/web/html/element/div/index.html')
| -rw-r--r-- | files/ja/web/html/element/div/index.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/files/ja/web/html/element/div/index.html b/files/ja/web/html/element/div/index.html new file mode 100644 index 0000000000..fcb7d5257e --- /dev/null +++ b/files/ja/web/html/element/div/index.html @@ -0,0 +1,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> |