使用方法、HTMLコンテンツ分割要素

HTMLコンテンツ分割要素（<div>）は、個々のスタイルを設定するためにWebページを個別のコンポーネントに構造化するためのコンテナーとして機能します。このチュートリアルでは、Webページで<div>コンテナを作成してスタイルを設定する方法を説明します。

<div>要素自体は、ページのレイアウトにほとんど影響を与えず、通常、サイズ、色、位置、またはその他の機能を調整するために属性が与えられます。通常、開発者はCSSを使用して<div>要素のスタイルを設定しますが、このチュートリアルでは、<div>要素をHTMLドキュメントで直接スタイル設定することにより、それらがどのように機能するかを理解できます。

<div>要素は、HTMLstyle属性でスタイル設定されます。以下の例に示すように、<div>要素には複数のスタイルプロパティを含めることができます。

<div style=”property: value; property: value;”></div>

<div>要素には開始タグと終了タグがありますが、コンテンツは必要ありません。 <div>要素が実際にどのように機能するかを理解するには、index.htmlファイルをクリアして、以下のコードをその中に貼り付けてください。（チュートリアルシリーズに従わなかった場合は、チュートリアルHTMLプロジェクトのセットアップでindex.htmlファイルのセットアップ手順を確認できます。

<div style="width:300px;height:200px; background-color:red;">
</div>

ファイルを保存して、ブラウザにリロードします。（ブラウザにファイルをロードする手順については、チュートリアルを参照してください。）幅300ピクセル、高さ200ピクセルの赤いボックスが次のように表示されます。

<div>タグの開始タグと終了タグの間にコンテンツを追加することにより、<div>要素にコンテンツを追加することもできます。次のように、<div>タグの間にテキストを追加してみてください。

<div style="width:300px;height:300px; background-color:red;">
  This is text inside a div. 
</div>

ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

<div>コンテナを<div>コンテナの中に入れることもできます。次のように、赤い<div>コンテナ内に黄色の<div>コンテナを追加してみてください。

<div style="width:300px;height:300px; background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>  
</div>

ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

<div>要素はブロックレベルの要素であり、独自の行から始まり、後続の要素を次の行にプッシュすることに注意してください。別の<div>要素をファイルに追加して、次の行にどのようにプッシュダウンされるかを理解してください（2番目の<div>要素の隣に収まるのに十分なスペースがあるように見えますが：

<div style="width:300px;height:300px;background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>
</div>
<div style="width:100px;height:100px; background-color:blue;">
</div>

ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

これで、<div>要素がどのように機能するかについての基本的な理解が得られました。このチュートリアルシリーズの3番目のセクションでWebサイトの構築を開始すると、<div>要素に戻ります。