divとspanの違いが分からない

✅ 回答

どちらも「意味を持たない汎用タグ」ですが、表示のされ方が根本的に違います。

一言で言うと

	div	span
種類	ブロック要素	インライン要素
改行	前後に改行が入る	改行されない
幅	親要素の横幅いっぱい	中身の幅だけ
例え	段ボール箱	マーカーペン
用途	レイアウトのまとまり	文中の一部を装飾

コードで確認

<!-- div：ブロック要素（前後に改行が入る） -->
<div style="background: lightblue; padding: 10px;">
  これは1つ目のブロック
</div>
<div style="background: lightyellow; padding: 10px;">
  これは2つ目のブロック（次の行に表示される）
</div>

<!-- span：インライン要素（文の流れの中に入る） -->
<p>
  この文章の<span style="color: red;">ここだけ赤く</span>できます。
  改行されません。
</p>

使い分けの判断基準

• 「このまとまりを1つの箱として扱いたい」→ div
• 「文章の中の一部分だけスタイルを変えたい」→ span
• 「ヘッダー/ナビ/メインなど意味がある」→ セマンティックタグ（header, nav, main）

図書室の「貸出ランキング」ページでの使い分け例

• <div class="card"> — 本の紹介カード全体を囲む
• <div class="card-list"> — カード一覧のレイアウト用
• <span class="badge">1位</span> — カード内の「1位」ラベル
• <span class="highlight">貸出中</span> — 文中の強調

CSSでの挙動の違い

/* span（インライン要素）にはwidth/heightが効かない */
span { width: 200px; }  /* 無視される */

/* display: inline-block にすると効くようになる */
span { display: inline-block; width: 200px; }

/* div（ブロック要素）はwidth/marginが効く */
div { width: 300px; margin: 0 auto; } /* 中央揃えOK */

spanにサイズや上下marginを指定しても効かないのは、インライン要素の仕様です。display: inline-block に変えると、インラインの流れを保ちながらサイズも指定できます。

よくある間違い

• ❌ spanにwidth/heightを指定する → インライン要素には効かない（display: inline-blockが必要）
• ❌ 全部divで囲む → 意味のあるタグ（header・section・nav等）を使うべき
• ❌ divの中にdivを10段ネスト → 構造を見直すサイン。FlexboxやGridの活用を検討しよう

使い分けの実例

<!-- div: ブロック要素（横幅いっぱい、前後に改行） -->
<div class="card">
  <h2>タイトル</h2>
  <p>説明文</p>
</div>

<!-- span: インライン要素（テキストの一部を装飾） -->
<p>この<span class="highlight">重要な部分</span>だけ色を変えたい</p>

<!-- ❌ よくある間違い: spanでレイアウトを作ろうとする -->
<span class="container">...</span> <!-- widthやheightが効かない -->

<!-- ✅ レイアウトにはdiv（またはセマンティックタグ）を使う -->
<div class="container">...</div>
<section class="hero">...</section>

覚え方：div = 箱（レイアウト用）、span = マーカー（テキスト装飾用）。迷ったらdivを使えばOK。