HTML <div> タグ

定義と用法

<div> タグは、HTMLドキュメント内の分割や部分（分節や節、division/section）を定義します。

<div> タグは、ドキュメントを独立した、異なる部分に分割することができます。厳格な整理ツールとして使用され、フォーマットと関連付けられていません。

どんな種類のコンテンツも配置できます。 <div> 内に<div> タグはHTML要素のコンテナとして使用され、CSSでスタイルを設定したり、JavaScriptで操作したりできます。

タグが利用可能であれば、 id または class を使用して <div>を使用して、そのタグの効果がより強化されます。 class または id 属性を使用して、 <div> タグでスタイルを設定します。

注意：デフォルトでは、ブラウザは常に <div> 要素の前後に改行符を配置することで行われます。

使用法

<div> ブロック要素です。これは、その内容が自動的に新しい行を始めることを意味します。実際には、改行は <div> 固有のユニークなフォーマット表示。以下で設定できます。 <div> の class または id に追加のスタイルを適用する必要はありません。

各 <div> にクラスやidを追加することもできますが、その方法も利点はあります。

同じ <div> 要素適用 class または id 属性ですが、より一般的なケースではそのうちの1つだけを適用することが多いです。これらの主な違いは、classが要素グループ（似た要素、またはある種の要素群）に用いられ、idが単一のユニークな要素を識別するという点です。

参照もしてください：

HTMLトレーニング：HTML ブロック要素とインライン要素

HTMLトレーニング：HTML レイアウト

HTML DOMリファレンスマニュアル：Divオブジェクト

例

ドキュメント内でCSSでスタイルを設定する<div>部分：

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>これはdiv要素の中のタイトルです</h2>
  <p>これはdiv要素の中のテキストです。</p>
</div>
</body>
</html>

自分で試してみる

ケーススタディ

<body>
 <h1>新しいウェブサイト</h1>
  <p>いくつかの文字。いくつかの文字。いくつかの文字...</p>
  ...
 <div class="news">
  <h2>ニュースヘッドライン 1</h2>
  <p>いくつかの文字。いくつかの文字。いくつかの文字...</p>
  ...
</div>
 <div class="news">
  <h2>ニュースヘッドライン 2</h2>
  <p>いくつかの文字。いくつかの文字。いくつかの文字...</p>
  ...
 </div>
 ...
</body>

例説明

ご覧の通り、上記のHTMLはニュースサイトの構造をシミュレートしています。各divはニュースのタイトルと要約を組み合わせています。つまり、divはドキュメントに追加の構造を提供しています。同時に、これらのdivが同じ種類の要素であるため、class="news"でこれらのdivを識別できます。これにより、divに適切な意味付けが加わり、さらにスタイルを使ってdivをフォーマットしやすくなります。一石二鳥です。

ヒント：classとidの使用法をさらに学びたい場合は、W3schoolの「構造化マークアップ」の章で「div、id、その他のアシスタント」のセクションを読んでください。

グローバル属性

<div> タグは、以下のイベント属性をサポートしています HTMLでのグローバル属性。

イベント属性

<div> タグは、以下のイベント属性をサポートしています HTMLでのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <div> 要素：

div {
  display: block;
}

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート