HTML <div> 要素

<div> 要素は、他のHTML要素をまとめるためのコンテナ（Container）として使用されます。

1. <div> 要素の基本

<div> 要素はデフォルトではブロックレベル（Block-level）要素です。これは、常に新しい行から始まり、利用可能な全幅を占有することを意味します。

<div> 要素には必須の属性はありませんが、style、class、id 属性が一般的によく使用されます。

2. <div> をコンテナとして使用する

<div> 要素をCSSと組み合わせることで、コンテンツのブロックに対してスタイリングを行ったり、レイアウトを構築したりすることができます。

<div style="background-color:black; color:white; padding:20px;">
  <h2>ロンドン</h2>
  <p>ロンドンはイギリスの首都です。イングランドで最も人口の多い都市であり、その都市圏には900万人以上の住民がいます。</p>
</div>

3. <div> の中央揃え (Centering a <div>)

<div> 要素を水平方向に中央揃えにするには、CSSを使用して width（幅）を指定した上で、margin: auto; を設定します。

<style>
.my-container {
  width: 300px;
  margin: auto;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>

<div class="my-container">
  <p>この div 要素は中央に配置されています。</p>
</div>

4. 複数の <div> を並べる (Side by Side)

Webサイトのレイアウトを作成する際、複数の <div> 要素を横に並べて配置することがよくあります。モダンな開発では Flexbox や CSS Grid を使用するのが一般的ですが、基本的な考え方は <div> を一つのユニットとして扱うことにあります。

<style>
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* float を解除するための clear fix */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>カラム 1</h2>
    <p>いくつかのテキスト...</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>カラム 2</h2>
    <p>いくつかのテキスト...</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>カラム 3</h2>
    <p>いくつかのテキスト...</p>
  </div>
</div>

5. <div> vs <span> の違い

よく比較される <span> 要素との決定的な違いは、その表示形式にあります。

• <div>：ブロックレベル要素。新しい行から始まり、コンテンツを大きなブロックとしてグループ化します。
• <span>：インライン（Inline）要素。新しい行を作らず、テキストの一部など、行内の特定の部分をマークアップするために使用されます。

<div>
  これはブロックレベルのコンテナです。 <span style="color:red;">ここはインラインの要素です。</span>
</div>

6. まとめ

<div> はそれ自体が特定の意味（セマンティクス）を持つわけではありませんが、文書を論理的なセクションに分割し、CSSでデザインを当てるための「入れ物」として、Web制作において欠かすことのできない最も重要な要素の一つです。

適切な クラス名（Class names） を割り当てることで、再利用性の高い堅牢なコンポーネントを設計していきましょう。