【6日でできるHTML＆CSS入門】divによるグループ化

Webページを制作するうえで、複数の要素を「グループ」としてまとめることはとても重要です。
例えば、「お知らせエリア」や「プロフィール欄」など、いくつかのHTML要素を1つのまとまりとして扱いたい場面はよくあります。
　このときに使われるのが、divタグです。divタグを使うことで、複数の要素をひとつのブロック（グループ）として扱い、まとめてデザインや機能を設定することができます。

１．divタグとは

1.1. divタグの基本的な役割

　divタグは「division（区切り）」の略で、汎用的なブロック要素です。意味的な制約はなく、主に「複数の要素をひとつのグループとしてまとめる」ために使われます。

タグ名主な用途仕様
<div>要素のグループ化ブロックレベル
  • 見出しや文章、画像など異なる種類の要素をグループにできる。
  • グループごとにCSSでスタイルやレイアウトを設定できる。

1.2. グループ化のメリット

  • デザインをまとめて指定できる
    例：ニュース一覧やカード型レイアウトなど
  • JavaScriptで操作しやすい
    例：グループ単位で表示/非表示を切り替え

２．divタグの使い方と実例

2.1. id属性とclass属性でのグループ化

divタグにはid属性やclass属性を使って「どのグループか」を識別するのが一般的です。

ファイル名： lesson32_1.html

<!DOCTYPE html>
<html>
<head>
  <title>divによるグループ化サンプル</title>
  <meta charset="utf-8"/>
  <style>
    #infoBox {
      border: 4px solid #2196f3;
      background-color: #e3f2fd;
      padding: 14px;
      text-align: left;
      font-style: normal;
      margin-bottom: 16px;
    }
    .profile {
      border: 4px solid #4caf50;
      background-color: #f1f8e9;
      text-align: center;
      font-style: italic;
      margin-bottom: 16px;
    }
    .notice {
      border: 4px solid #f44336;
      background-color: #ffebee;
      text-align: right;
      color: #f44336;
      text-decoration: underline;
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <div id="infoBox">
    <h2>インフォメーション</h2>
    <p>IDで指定したエリアです。1ページ内で1か所だけ指定できます。</p>
  </div>
  <div class="profile">
    <h2>プロフィール</h2>
    <p>classで指定したエリア（その1）。</p>
  </div>
  <div class="notice">
    <h2>お知らせ</h2>
    <p>classで指定したエリア（その2）。</p>
  </div>
</body>
</html>

表示結果

　青枠が「infoBox（ID指定）」、緑枠が「profile（class指定）」、赤枠が「notice（class指定）」で、それぞれに異なるデザインが適用されています。

2.2. id属性とclass属性の違い

属性用途複数使用主な使い方例
id一意の識別子×（1ページ内1回）重要な特定グループや個別指定に使用
class複数グループ化○（何度でも）共通スタイルや複数箇所の装飾に利用

コード例

idは一度だけ。classは複数の要素に何度も付与可能。

<div id="infoBox">...</div>
<div class="profile">...</div>
<div class="notice">...</div>
<div class="profile">...</div>
<div class="notice">...</div>

３．divタグで使われる主なCSSプロパティ

3.1. text-alignプロパティ

text-alignはテキストや画像の水平方向の揃え方を設定します。

値意味
left左寄せ
center中央揃え
right右寄せ
  • divごとに異なる揃え方ができます。

3.2. font-styleプロパティ

font-styleはフォントのスタイル（斜体・通常）を設定します。

値概要
normal標準フォント（通常）
italicイタリック体
oblique斜体（通常italicと同じ見た目）

3.3. text-decorationプロパティ

text-decorationはテキストの装飾を設定します。

値意味
none装飾なし（初期値）
underline下線
overline上線
line-through取り消し線

４．よく使われるタグ・プロパティ一覧

タグ・プロパティ概要
<div>要素のグループ化
id一意のグループ識別（1回のみ）
class複数のグループ指定（何度でも）
border枠線の指定
background-color背景色の指定
text-alignテキストの水平方向配置
font-styleフォントのスタイル指定
text-decorationテキスト装飾の指定

まとめ

divタグは、複数のHTML要素をグループ化するのに欠かせないタグです。
IDやクラスを使い分けて、効率よく・柔軟にデザインや動きを与えることができます。
divタグの活用は、HTML・CSSの基礎力向上にも直結しますので、ぜひさまざまなパターンで実践してみてください。