HTMLを学び始めると必ず出てくるのが、div（ディブ） と span（スパン） の2つのタグです。
どちらも「汎用タグ」で、意味は持ちません。
しかし、使える場所・役割・用途 がまったく違います。
この記事では、div と span の本質・違い・使い分けの基準・実例・注意点 を初心者向けにていねいに解説します。
div・span とは？
どちらも 非セマンティックタグ（意味の無いタグ） です。
- デザインを調整したいとき
- レイアウトを整えたいとき
- CSSを当てるための枠を作りたいとき
に使用します。
div の特徴（ブロック要素）
div は「ブロック要素」で、段落のように “ひとまとまりの大きな領域” を作ります。
<div>ここは1つのブロックです。</div>
<div>2つ目のブロックです。</div>
特徴
- 幅は自動で“横幅いっぱい”に広がる
- 上下に余白を持ち、次の要素は下に来る
- レイアウトの大枠を作るのに最適
- セクションの枠作りに使われることが多い
→ WordPressテーマのデザイン調整でも div は頻出。
span の特徴（インライン要素）
span は「インライン要素」で、文章の一部を囲むために使います。
<p>この文章の中の <span>一部分だけ</span> を強調したい。</p>
特徴
- 文中の一部分を囲うために最適
- 横に並ぶ
- 幅・高さを持たない
- 改行をしない
- 文字装飾（CSS）に使いやすい
→ 文章中で色を変えたい・強調したい時によく使う。
div と span の違いまとめ
| 比較項目 | div | span |
|---|---|---|
| 種類 | ブロック要素 | インライン要素 |
| 役割 | 大きなまとまり（段落ブロック） | 文章の一部を囲む |
| 幅 | 横幅いっぱい広がる | 文字の幅だけ |
| 改行 | 自動で改行される | 改行されない |
| 用途 | レイアウト作り | テキスト装飾 |
| 意味 | なし | なし |
→ div = 枠、span = 部分装飾 というイメージでOK。
使い分けの基準（これだけでOK）
文章の一部だけに色・太字などの装飾 → span
ひとまとまりの内容を囲いたい → div
レイアウトの箱（コンテナ）として使う → div
改行させずに囲みたい → span
見出しや段落など“意味のある”部分 → h2、p、article など（divは使わない）
よくある実践用コード例
テキストの一部分だけ色を変えたい（span）
<p>おすすめは <span class="highlight">HTMLとCSSの同時学習</span> です。</p>
ボックスデザインを作りたい場合（div）
<div class="box">
<h2>お知らせ</h2>
<p>新しい講座を追加しました。</p>
</div>
複数の要素をまとめたい（div）
<div class="profile-area">
<img src="ken.jpg" alt="KEN">
<p>KEN-BLOG運営者です。</p>
</div>
文章内の一部分だけ背景色（span）
<p>この部分は <span class="marker">特に重要</span> です。</p>
よくある間違い
全てのレイアウトに div を使ってしまう
→ HTMLが div だらけになり、可読性が悪化。
見出し（hタグ）の代わりに div を使う
→ 意味が失われるため SEO に悪影響。
表示のために span を乱用する
→ 意味を持つ部分は strong などを使うべき。
div をネストしすぎる
→ 管理しづらくなる。
まとめ
- div = ブロック要素（大きな枠）
- span = インライン要素（文の一部）
- 使う目的は “意味ではなくデザイン・構造”
- div はレイアウト向け
- span は文字装飾向け
- 使い分けを理解すると、HTMLが劇的に綺麗になる
著者からのひと言
div と span の違いを理解できると、HTMLが一気に扱いやすくなります。
特に WordPress では div を使う場面が多いので、「枠」なのか「部分装飾」なのかを意識するだけでコードの質が上がります。ぜひ今日から意識してみてください！
次回の記事は「block要素とinline要素の違いを理解しよう」です。
この記事が役に立ったら、いいね！お願いします！
