👌
【HTML入門】spanタグとpタグの違いと使い分け方をわかりやすく解説
【HTML入門】spanタグとpタグの違いと使い分け方をわかりやすく解説
HTMLを書いているとよく出てくる「<span> と <p> の違い」。
なんとなく使っている人も多いのではないでしょうか？
この記事では、それぞれの役割と正しい使い分け方をわかりやすく説明します。
🧩 結論から言うと
| タグ | 役割 | 特徴 |
|---|---|---|
<p> |
段落（パラグラフ）を表す | ブロック要素。文章のまとまりを示す。 |
<span> |
文字や一部分を装飾・操作する | インライン要素。小さな範囲に使う。 |
🌿 <p>タグとは？
✅ 意味
「ひとまとまりの文章（段落）」を表すタグ。
🧱 特徴
- ブロック要素（改行を伴う）
- テキストを意味的に区切る（セマンティック）
- 自動で前後に余白（
margin）が入るブラウザも多い
📝 例
<p>このカフェでは、季節のフルーツを使ったスイーツが人気です。</p>
<p>ドリンクとのセットメニューもおすすめです。</p>
表示結果（イメージ）：
このカフェでは、季節のフルーツを使ったスイーツが人気です。
ドリンクとのセットメニューもおすすめです。
文章を段落として表現する時に使います。
🌸 <span>タグとは？
✅ 意味
「文の中の一部分だけ」を装飾したり、JavaScriptで操作したりするためのタグ。
🧩 特徴
- インライン要素（改行しない）
- 見た目やスクリプト操作用（意味は持たない）
- 小さな範囲で使う（1語や数文字など）
📝 例
<p>おすすめは <span class="highlight">いちごタルト</span> です！</p>
CSSで装飾：
.highlight {
color: #e91e63;
font-weight: bold;
}
表示結果：
おすすめはいちごタルトです！
➡ 「いちごタルト」の部分だけ色を変えられる、という使い方ですね。
🌼 違いのまとめ
| 項目 | <p> |
<span> |
|---|---|---|
| 意味 | 段落（文章のまとまり） | テキストの一部を装飾・操作 |
| 要素の種類 | ブロック要素 | インライン要素 |
| 改行 | あり（自動で改行） | なし（同じ行に続く） |
| 主な使い方 | 本文・説明文など | 強調・部分装飾・JS操作対象 |
| 例 | <p>お知らせです。</p> |
<span class="red">重要</span> |
💡 よくある間違い
❌ 間違い例
<span>お知らせ</span>
<span>新商品が入荷しました。</span>
これは段落（文章のまとまり）なので、<p>で囲むべきです。
✅ 正しい書き方
<p>お知らせ：新商品が入荷しました。</p>
🧠 まとめ
-
<p>は 意味のある段落（文章単位） -
<span>は 意味のない装飾用タグ -
<p>の中で一部を強調したいときに<span>を使うのが基本！
📌 一言まとめ
「文章」＝
<p>、
「文章の中の一部分」＝<span>。
👋 次回予告
次回は「divタグとspanタグの違い」について解説します！
Discussion