まとまりを作ろう（divとspan）

これまでのタグは、見出し・段落・画像……と、それぞれ「意味」を持っていました。今回のふたつ、<div> と <span> は、ちょっと変わり者。それ自体に特別な意味はなく、「まとめる」ためだけのタグです。

divは大きなまとまり

<div> は、複数のタグをまるっと囲んで、ひとつのグループにします。

<div>
  <h2>お店について</h2>
  <p>朝10時から夜8時まで営業しています。</p>
</div>

この <div> は、見た目には何も変えません。でも「見出しと段落を、ひとつの“お店紹介ブロック”としてまとめた」というかたまりができます。あとで「このブロックだけ背景を灰色に」といった飾りつけが、まとめてできるようになるのです。

spanは文中のひとつまみ

<span> は、文章の一部分だけをつまむための箱。行を変えずに、その場でひとつまみします。

<p>今日の空は <span>とても青い</span> です。</p>

これも見た目は変わりません。でも「“とても青い”の部分だけ、あとで色を変えたい」というとき、<span> で囲んでおけば狙い撃ちできます。

このレッスンのまとめ

1. <div> はいくつかのタグをブロックごとまとめる箱
2. <span> は文章の一部だけをつまむ箱
3. どちらも意味は持たない——「あとで飾るための目印」