【6日でできるHTML入門】divタグとspanタグ

　HTMLでページを構成するとき、見出しや段落、リストなどのタグはコンテンツを意味的に区分けしますが、レイアウトやデザインを最適化するためには「範囲をまとめる」「文字列の一部分だけに書式を当てる」といった汎用的な要素が必要になります。そこで登場するのが、ブロックレベル要素として複数の要素をまとめる<div>タグと、インライン要素として文字列の一部を装飾できる<span>タグです。ここではこれらのタグの基本的な使い方、そしてブロックレベル要素とインライン要素の違いについて解説します。

１．`div`タグの使い方

1.1. 機能と役割

汎用ブロック要素として、意味をもたないコンテナ
複数の要素（見出し、段落、画像など）をひとかたまりにグループ化
CSSでまとめてレイアウトや装飾を適用できる

1.2. 実例：枠線でグループ化

　以下は「見出し+h2」と「本文+p」を<div class="panel">…</div>で囲み、まとめて枠線を描画する例です。

ファイル名： lesson17-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>☀ トラベルガイド</title>
  <style>
    div.panel {
      border: double 4px #336699;
      padding: 10px;
      width: 480px;
    }
    h2 {
      margin: 0 0 8px;
    }
    p {
      line-height: 1.6;
      margin: 0;
    }
  </style>
</head>
<body>
  <h1>旅のしおり</h1>
  <div class="panel">
    <h2>おすすめスポット</h2>
    <p>緑あふれる山道や湖畔の風景は、四季折々の表情を見せてくれます。</p>
  </div>
</body>
</html>

ポイント解説
div.panel：タグ名とクラス名を組み合わせたセレクタで、特定の<div>だけに書式を適用
border：枠線の種類（double）、太さ（4px）、色（#336699）
padding：内側余白を確保し、テキストが枠線にくっつかないように

ブラウザの出力例

１.3. 幅と余白を指定

　まとめる範囲に対して幅（width）や外部余白（margin）を指定すれば、ページ全体のレイアウトも自由に構成できます。

div.panel {
  width: 520px;
  margin: 20px auto;
}

margin:20px auto;：上下に20px、左右は自動（中央配置）

２．`span`タグの使い方

2.1. 機能と役割

汎用インライン要素として、文字列の一部を囲む
改行を伴わずに一部分だけに色やフォントなどを適用

2.2. 実例：キーワード強調

以下は「キーワード」のみを赤字＋太字にする例です。

ファイル名： lesson17-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔍 用語集</title>
  <style>
    span.keyword {
      color: #CC0000;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>HTMLの基本要素には、<span class="keyword">見出し</span>や<span class="keyword">リスト</span>、<span class="keyword">リンク</span>などがあります。</p>
</body>
</html>

ポイント解説
span.keyword：インラインで適用できるスタイル
テキスト内の一語だけ強調したいときに最適

ブラウザの出力例

３．ブロックレベル要素とインライン要素

　HTMLには要素の表示特性として「ブロックレベル要素」と「インライン要素」の２種類があり、それぞれレイアウトや書式指定の振る舞いが異なります。どちらを使うかによって、要素が占める領域や改行の挙動が変わるため、意図したデザインを実現するうえで必ず押さえておきたい概念です。

3.1. 定義と表示のしくみ

種類	定義	デフォルトの振る舞い
ブロックレベル要素	「独立した矩形領域」で表示される要素。上下に自動的に改行が入る。	幅は可能な限りいっぱいに広がり、要素の前後で改行される。
インライン要素	「テキストの流れの中」に表示される要素。	テキストと同じ行内に収まり、前後で改行されない。

ブロック要素は display: block;、インライン要素は display: inline; が初期値
CSS の display プロパティで振る舞いを切り替えることも可能

3.2. 主な要素の一覧

種類	主なタグ例
ブロックレベル要素	`<div>`, `<p>`, `<h1>`〜`<h6>`, `<ul>`, `<ol>`, `<li>`, `<section>`
インライン要素	`<span>`, `<a>`, `<img>`, `<strong>`, `<em>`, `<br>`

3.3. 用途の使い分け

レイアウトの大枠を組む → ブロックレベル要素
例）サイト全体のコンテナ、記事のセクション、ナビゲーションメニュー
テキストや画像を文章中に散りばめる → インライン要素
例）文字列の強調、リンク、アイコンや装飾用の小さな画像

3.4 CSSでの切り替え例

/* インライン要素をブロック表示させたいとき */
a {
  display: block;
  width: 200px;
  margin: 10px auto;
}

/* ブロック要素をインライン表示させたいとき */
div.note {
  display: inline;
  background-color: #eef;
  padding: 2px 4px;
}

3.5. ポイント

ブロックレベル要素は独立した領域として扱われ、行をまたいで表示される。
インライン要素はテキストの流れの中で表示され、行をまたがない。
divタグは汎用的なブロック要素、spanタグは汎用的なインライン要素として、CSSと組み合わせて柔軟に使い分ける。
必要に応じて display プロパティで要素の表示特性を切り替えることで、思いどおりのレイアウト・装飾を実現できる。

まとめ

divタグは「まとまり」のための汎用コンテナ、spanタグは「文字列の一部」を装飾するための汎用インライン要素
ブロックレベル要素とインライン要素の違いを理解し、適切に使い分けることで、柔軟かつ見やすいHTML＋CSSの構造が実現できる
CSSセレクタと組み合わせることで、ページ全体のレイアウトから細かな文字装飾まで自在にコントロール可能

以上を踏まえ、divとspanを活用したモダンなWebページ構築をマスターしましょう。

【6日でできるHTML入門】divタグとspanタグ