6日でできる 新HTML&CSS入門｜divで要素をグループ化する
複数の要素をひとつにまとめると、デザインも管理もしやすくなる。
divを使って、Webページの部品を分かりやすいグループに整理しよう。
Webページは、見出し、文章、画像、リンク、ボタンなど、たくさんのHTML要素を組み合わせて作られています。小さなページであれば、要素をそのまま並べるだけでも見た目を作れますが、ページが少し大きくなると、「ここからここまでをお知らせエリアにしたい」「プロフィール欄をひとつのまとまりとして装飾したい」「複数の要素をカードのように見せたい」といった場面が増えてきます。
このようなときに便利なのが<div>です。<div>は、複数のHTML要素をひとつのブロックとしてまとめるためによく使われるタグです。<h2>や<p>のように文章の意味を表すタグではなく、主にレイアウトやデザインのために要素をグループ化する役割を持っています。
たとえば、お知らせエリアの中に見出しと説明文を入れたい場合、<div>で囲むことで、その見出しと説明文をひとまとまりとして扱えます。そして、その<div>にidやclassを付ければ、CSSで背景色、枠線、余白、文字の配置などをまとめて指定できます。
この記事では、<div>の基本的な役割、id属性とclass属性を使ったグループ化、text-alignやfont-style、text-decorationなどのCSS指定を、サンプルコードと図解を交えながら分かりやすく解説していきます。
divは複数の要素をまとめるための汎用ブロック
<div>は、divisionの略で、区切りやまとまりを作るためのタグです。HTMLの中では、特別な意味を持たない汎用的なブロック要素として使われます。
たとえば、<h2>は見出し、<p>は段落、<img>は画像というように、それぞれのタグには意味があります。一方、<div>は「ここをひとつのグループとして扱う」という目的で使われます。
| タグ | 主な役割 | 特徴 |
|---|---|---|
| <div> | 複数の要素をグループ化する | 汎用的なブロック要素 |
| <h2> | 見出しを表す | 文章構造を示す |
| <p> | 段落を表す | 本文や説明文に使う |
<div>そのものには、見た目を大きく変える力はありません。大切なのは、<div>にid属性やclass属性を付け、CSSと組み合わせて使うことです。これにより、グループ全体に枠線を付けたり、背景色を付けたり、余白を設定したりできます。
図1：divは複数の要素をひとつの箱にまとめる
この図から分かること
<div>を使うと、見出しや段落、画像などの複数の要素をひとつのまとまりとして扱えます。グループ化しておくことで、CSSをまとめて適用しやすくなります。お知らせ欄、プロフィール欄、カード型レイアウトなど、Webページの部品を作るときに役立ちます。
divでグループ化するメリット
<div>で要素をまとめると、CSSでデザインを指定しやすくなります。たとえば、見出しと本文を別々に装飾することもできますが、それらを<div>で囲んでおくと、グループ全体に背景色や枠線を付けられます。
お知らせエリアを作る場合、見出しだけでなく説明文も同じ背景の中に入れたいことがあります。そのようなとき、<div>で囲んでおけば、ひとつのボックスとして見せることができます。
| メリット | 内容 |
|---|---|
| デザインをまとめて指定できる | グループ全体に背景色、枠線、余白などを設定できる |
| レイアウトを整理しやすい | ページ内の部品をまとまりごとに管理できる |
| classやidで区別できる | どのグループにどのCSSを当てるか指定しやすい |
| JavaScriptでも扱いやすい | グループ単位で表示や非表示などの操作がしやすい |
Webページを作るときは、ひとつひとつの要素だけを見るのではなく、「この部分はひとまとまりの情報か」という視点で考えることが大切です。そのまとまりを作るための基本的なタグが<div>です。
id属性とclass属性でグループを識別する
<div>は、そのまま使うだけでは「ただの箱」です。CSSで特定の<div>にスタイルを当てるには、id属性やclass属性を使って名前を付けます。
id属性は、ページ内で1つだけの特別な要素を識別するときに使います。たとえば、ページ内に1つしかないメインのお知らせエリアなどに向いています。
class属性は、同じ種類のデザインを複数の要素に使いたいときに便利です。たとえば、プロフィールカードや注意ボックスなど、同じ見た目を何度も使う場合に向いています。
| 属性 | 主な用途 | 同じページ内での使い方 |
|---|---|---|
| id | 1つだけの特定グループを識別する | 同じid名は1回だけ使う |
| class | 共通スタイルを複数の要素に適用する | 同じclass名を何度でも使える |
CSSでは、idを指定するときは#を使い、classを指定するときは.を使います。
#mainInfo {
background-color: #e3f2fd;
}
.profileCard {
background-color: #f1f8e9;
}このように、HTML側で名前を付け、CSS側でその名前を指定することで、グループごとに違うデザインを適用できます。
divとid・classを使ったサンプル
ここでは、3つの<div>を使って、インフォメーション、プロフィール、注意メッセージの3つのエリアを作ります。それぞれにidやclassを付け、CSSで異なるデザインを指定します。
ファイル名： lesson32_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>divで要素をグループ化する</title>
<style>
#mainInfo {
border: 4px solid #2196f3;
background-color: #e3f2fd;
padding: 14px;
text-align: left;
font-style: normal;
margin-bottom: 16px;
}
.profileCard {
border: 4px solid #4caf50;
background-color: #f1f8e9;
padding: 14px;
text-align: center;
font-style: italic;
margin-bottom: 16px;
}
.alertBox {
border: 4px solid #f44336;
background-color: #ffebee;
padding: 14px;
text-align: right;
color: #f44336;
text-decoration: underline;
margin-bottom: 16px;
}
</style>
</head>
<body>
<div id="mainInfo">
<h2>サイトからのお知らせ</h2>
<p>このエリアはidで指定したグループです。ページ内で1つだけ使う想定です。</p>
</div>
<div class="profileCard">
<h2>スタッフ紹介</h2>
<p>このエリアはclassで指定したプロフィール用のグループです。</p>
</div>
<div class="alertBox">
<h2>重要なお知らせ</h2>
<p>このエリアもclassで指定し、注意を引くデザインにしています。</p>
</div>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、3つのグループがそれぞれ異なる見た目になります。
mainInfoの<div>は青い枠線と淡い青の背景色になり、左寄せの通常文字で表示されます。profileCardの<div>は緑の枠線と淡い緑の背景色になり、中央揃えで斜体の文字になります。alertBoxの<div>は赤い枠線と淡い赤の背景色になり、右寄せ、赤文字、下線付きで表示されます。
このように、<div>で要素をグループ化しておくと、その中の見出しや文章をひとまとまりのエリアとして見せることができます。
サンプルコードで使っているCSSの役割
このサンプルでは、<div>にidやclassを付け、それぞれに異なるCSSを指定しています。主なCSSの役割を整理してみましょう。
| CSS・属性 | 役割 |
|---|---|
| id | ページ内で1つだけの要素を識別する |
| class | 複数の要素に共通のスタイルを付けるための名前 |
| border | グループの外枠を表示する |
| background-color | グループ全体の背景色を指定する |
| padding | グループの内側に余白を作る |
| margin-bottom | 次のグループとの間隔を作る |
| text-align | 文字の横方向の配置を指定する |
| font-style | 文字のスタイルを通常または斜体にする |
| text-decoration | 文字に下線などの装飾を付ける |
| color | 文字色を指定する |
<div>自体は見た目の意味を持たないため、CSSと組み合わせることで役割が見えてきます。borderやbackground-colorを付けると、どこからどこまでが同じグループなのか分かりやすくなります。
図2：idとclassでdivごとに違うデザインを指定する
この図から分かること
<div>にidやclassを付けると、CSSで特定のグループを選べるようになります。idはページ内で1つだけの要素を指定するときに使い、classは複数の場所で再利用したいスタイルに向いています。グループごとに名前を付けることで、デザインを分けて管理しやすくなります。
id属性とclass属性の違いをもう少し詳しく見る
id属性とclass属性は、どちらも要素に名前を付けるために使います。ただし、使い方には大きな違いがあります。
idは、ページの中で1回だけ使う名前です。たとえば、ページ全体のメインエリアや、特別なお知らせ欄など、特定の1か所を指定したいときに使います。
classは、同じスタイルを複数の要素に使える名前です。たとえば、同じデザインのカードをいくつも並べたい場合、すべてのカードに同じclassを付けることができます。
<div id="mainInfo">メインのお知らせ</div>
<div class="profileCard">プロフィール1</div>
<div class="profileCard">プロフィール2</div>
<div class="profileCard">プロフィール3</div>上の例では、mainInfoは1つだけの特別なエリアです。一方、profileCardは複数のプロフィール欄に使えます。
| 比較項目 | id | class |
|---|---|---|
| CSSでの書き方 | #mainInfo | .profileCard |
| HTMLでの書き方 | id="mainInfo" | class="profileCard" |
| 同じ名前の使用 | 1ページ内で1回 | 何度でも使える |
| 向いている使い方 | 特定の1つのグループ | 同じ見た目を使う複数のグループ |
| 例 | メイン情報欄、ページ固有の領域 | カード、注意枠、プロフィール欄 |
CSSの学習では、まずclassをよく使うと考えておくと分かりやすいです。実際のWeb制作でも、共通スタイルを作って再利用する場面が多いため、classはとても重要です。
text-alignでグループ内の文字位置を変える
text-alignは、テキストやインライン要素の水平方向の位置を指定するCSSです。<div>にtext-alignを指定すると、その中にある文字の配置をまとめて変えることができます。
| 値 | 意味 |
|---|---|
| left | 左寄せ |
| center | 中央揃え |
| right | 右寄せ |
たとえば、プロフィール欄を中央揃えにしたい場合は、次のように指定できます。
.profileCard {
text-align: center;
}これにより、profileCardの中にある見出しや文章が中央にそろいます。ボタンや短い説明文を中央に置きたいときにも便利です。
一方で、お知らせ文のように文章量が多い場合は、左寄せのほうが読みやすいことがあります。文字の配置は見た目だけでなく、読みやすさにも関わるため、内容に合わせて選ぶことが大切です。
font-styleで文字の傾きを指定する
font-styleは、文字を通常表示にするか、斜体にするかを指定するCSSです。
| 値 | 意味 |
|---|---|
| normal | 通常の文字 |
| italic | イタリック体 |
| oblique | 斜体表示 |
たとえば、プロフィール欄の説明文に少し柔らかい印象を出したい場合、font-style: italic;を指定できます。
.profileCard {
font-style: italic;
}ただし、長い本文をすべて斜体にすると読みにくくなることがあります。斜体は、補足情報や短いメッセージなど、軽く雰囲気を変えたい場面で使うと効果的です。
text-decorationで文字に装飾を付ける
text-decorationは、文字に下線、上線、取り消し線などを付けるCSSです。
| 値 | 意味 |
|---|---|
| none | 装飾なし |
| underline | 下線 |
| overline | 上線 |
| line-through | 取り消し線 |
注意メッセージやリンク風の表現では、underlineを使うことがあります。
.alertBox {
text-decoration: underline;
}ただし、Webページでは下線がリンクを連想させることがあります。そのため、リンクではない文字に下線を付ける場合は、使いすぎに注意しましょう。重要な注意文など、意味が分かりやすい場面で使うと効果的です。
図3：divにCSSをまとめて指定するとグループ全体が変わる
この図から分かること
<div>で複数の要素を囲むと、そのグループ全体にCSSを適用しやすくなります。borderやbackground-colorでまとまりを見せたり、paddingで内側に余白を作ったり、text-alignで中の文字位置をそろえたりできます。<div>は、Webページの部品を作るための土台として役立ちます。
divでよく使うCSSプロパティ
<div>は、レイアウトやデザインのまとまりを作るために使われることが多いため、次のようなCSSと組み合わせることがよくあります。
| CSSプロパティ | 役割 | よく使う場面 |
|---|---|---|
| border | 枠線を付ける | カード、お知らせ枠、注意枠 |
| background-color | 背景色を付ける | グループの範囲を分かりやすくする |
| padding | 内側余白を作る | 文字と枠線の間隔を空ける |
| margin | 外側余白を作る | グループ同士の間隔を空ける |
| text-align | 文字の横方向の配置を変える | 中央揃えや右寄せ |
| font-style | 文字の傾きを変える | 補足文やプロフィール文 |
| text-decoration | 文字に装飾を付ける | 注意文や強調表現 |
| color | 文字色を変える | 注意、強調、分類 |
これらのCSSを組み合わせることで、同じ<div>でもまったく違う印象の部品を作れます。お知らせ欄は青系、プロフィール欄は緑系、注意欄は赤系のように色を変えると、情報の種類も伝わりやすくなります。
divを使うときに気をつけたいこと
<div>は便利ですが、何でもかんでも<div>で囲めばよいわけではありません。HTMLには、意味を持つタグもたくさんあります。
たとえば、ページの見出しには<h1>や<h2>、段落には<p>、独立したセクションには<section>、ナビゲーションには<nav>など、内容に合ったタグがあります。
<div>は、意味を持つタグだけではうまくまとまりを作れないときや、デザインのために複数要素を囲みたいときに使うとよいです。
| 目的 | 使いやすいタグ |
|---|---|
| 見出しを表したい | <h1>、<h2> |
| 段落を表したい | <p> |
| 意味のあるセクションを作りたい | <section> |
| ナビゲーションを表したい | <nav> |
| 汎用的にグループ化したい | <div> |
つまり、<div>は便利な箱ですが、意味を表すタグの代わりとして乱用しすぎないことも大切です。まずは内容に合うタグを使い、それでもグループ化が必要なところで<div>を使うと、HTMLが分かりやすくなります。
divによるグループ化を学ぶとレイアウトが作りやすくなる
Webページでは、複数の要素をひとまとまりにして扱う場面がとても多くあります。お知らせ欄、商品カード、プロフィール欄、注意メッセージ、問い合わせエリアなど、実際のページの多くはグループの集まりとして作られています。
<div>を使うと、こうしたまとまりを作り、CSSで一括して装飾できます。さらに、idやclassを使えば、特定のグループだけを個別にデザインしたり、同じデザインを複数のグループに再利用したりできます。
最初は、<div>で囲むと何が変わるのか分かりにくいかもしれません。そんなときは、borderやbackground-colorを付けて、グループの範囲を目で確認してみるのがおすすめです。どこからどこまでが同じまとまりなのかが分かると、CSSの効き方も理解しやすくなります。
<div>は、HTMLとCSSをつなぐ大切な土台です。グループ化の考え方を身に付けると、ページの構造を整理しながら、見やすく管理しやすいWebデザインを作れるようになります。