インライン要素（span）
文章の一部だけに特定のデザインを適用したい時に使う、意味を持たない「インラインの箱」。
spanタグ＝文章の中の「ピンポイント装飾」
`` タグは、文章の流れを壊さずに、特定の単語やフレーズだけにスタイルを適用するための「インライン要素」です。このタグ自体には意味がなく、純粋に「見た目」や「JavaScript操作」のために使われます。
`
` が「ブロックレベル要素」として大きな箱を作るのに対し、`` は文章の一部として溶け込むため、改行を伴いません。
基本的な使い方
今日のおすすめは<span style="color: red; font-weight: bold;">イチゴ</span>です。
この例では、「イチゴ」という単語だけが赤く太字になり、文章の流れは維持されます。
divとの決定的な違い
よく比較されるのが `
` タグです。両者の違いを理解することは、HTMLの基礎を固める上で非常に重要です。
| 要素 | 種類 | 特徴 |
|---|---|---|
<div> |
ブロックレベル | 横幅いっぱいに広がり、前後に改行が入る |
<span> |
インライン | 文章の一部として扱われ、改行しない |
実際の使用例
`` タグは、以下のような場面で頻繁に使われます。
- 文字色の変更: 重要な数値や警告文を目立たせる
- JavaScriptでの操作: 特定の部分だけを動的に書き換える
- アイコンフォントの挿入: Font Awesomeなどのアイコンを文中に配置
JavaScript操作の例
<p>現在の気温：<span id="temp">25</span>℃</p>
<script>
document.getElementById('temp').textContent = '30';
</script>
<script>
document.getElementById('temp').textContent = '30';
</script>
セマンティックな代替案を検討する
`` は便利ですが、「意味」を持たないため、可能であればセマンティックなタグを優先すべきです。
- 強調したい → `` または ``
- コードを示す → `
` - 削除された文字 → `
`
「見た目」だけが目的で、適切な意味タグがない場合にのみ `` を使いましょう。
まとめ
`` は「無色透明な容器」です。文章の一部だけを装飾したい時、JavaScriptで操作したい時に威力を発揮します。ただし、乱用は避け、意味のあるタグが使える場面では、そちらを優先しましょう。