spanタグ インライン要素をグループ化する｜HTML辞典
<span>タグとは？
<span>タグは、HTML文書内でインライン要素をグループ化し、部分的にスタイルを適用するためのタグです。
意味を持たない汎用のインライン要素であり、CSSやJavaScriptと組み合わせて使用されます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）
インライン要素として扱われ、ブロックレベル要素のようなレイアウトの変更は行いません。
閉じタグの有無
<span>は開始タグ（<span>）と閉じタグ（</span>）の両方が必要です。
基本的な記述方法
<span> を使用すると、テキストの一部分にスタイルを適用できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>spanタグの例</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>この文章の中で、<span class="highlight">特に重要な部分</span> を強調します。</p>
</body>
</html>ポイント：
<span>はインライン要素なので、改行は発生しない。- 部分的にCSSを適用するために使われる。
<div>のようなブロック要素とは異なり、レイアウトを構成する目的では使用しない。
使用できる主な属性
<span>タグには特別な意味はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <span class="highlight">...</span> |
id | 一意の識別子を設定 | <span id="important-text">...</span> |
style | インラインスタイルを適用 | <span style="color: blue;">...</span> |
data-* | カスタムデータ属性 | <span data-user="123">...</span> |
CSSを使ったデザイン変更
<span> を適切にスタイル付けすることで、見た目を調整できます。
✅ カスタムスタイルの適用
.underline {
text-decoration: underline;
}
.bold {
font-weight: bold;
}<p>この文章の中で、<span class="underline">下線を引く部分</span> と <span class="bold">太字にする部分</span> があります。</p><span> の適切な使用例
✅ テキストの一部分にスタイルを適用
テキストの一部分だけ色を変えたり、太字にする際に適しています。
<p>この<span style="color: blue;">青色の</span>テキストはCSSでスタイルを適用しています。</p>✅ JavaScriptとの連携
JavaScriptで特定のテキストのみを操作する際に便利です。
<p id="message">ここに <span id="dynamic-text">変化する</span> テキストがあります。</p>
<script>
document.getElementById("dynamic-text").textContent = "更新された";
</script><span> の適切でない使用例（誤った使い方）
❌ ブロック要素の代用として使用するのはNG
<span> はインライン要素なので、レイアウトの構成には向いていません。
<!-- NG：ブロック要素の代わりに <span> を使用 -->
<span class="container">
<h2>見出し</h2>
<p>これは本文です。</p>
</span>✅ 正しい書き方（<div> を使用）
<div class="container">
<h2>見出し</h2>
<p>これは本文です。</p>
</div>❌ <b> や <strong> の代わりに使用するのはNG
意味を持たせるなら <strong> や <b> を使用する方が適切。
<!-- NG：意味的な強調として <span> を使用 -->
<p>この文章は <span style="font-weight: bold;">重要</span> です。</p>✅ 正しい書き方（<strong> を使用）
<p>この文章は <strong>重要</strong> です。</p><span> と他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<span> | インライン要素のグループ化 | 見た目には影響なし | テキストの部分的なスタイル適用 |
<div> | ブロック要素のグループ化 | 改行が発生 | レイアウトの管理 |
<strong> | 意味のある強調 | 太字（デフォルト） | 重要なキーワードの強調 |
<b> | 装飾目的の太字 | 太字（デフォルト） | 視覚的な強調のみ |
<em> | 意味のある強調 | 斜体（デフォルト） | 文章の強調 |
使用上の注意点
✅ 部分的なスタイル適用や操作にのみ使用する
✅ CSSを活用して適切にデザインする
<span>だけでスタイルを適用せず、適切なCSSを設定するのが望ましい。
関連タグ
<div>– ブロック要素のグループ化<strong>– 文章の意味的な強調（太字）<b>– 視覚的な太字（装飾目的）<em>– 文章の意味的な強調（斜体）<mark>– 重要な部分をハイライト
まとめ
<span>タグは、インライン要素のグループ化や部分的なスタイル適用に適したタグ です。
意味を持たず、CSSやJavaScriptと組み合わせて使用するのが前提となります。
ブロック要素の代用や意味のある強調には使用せず、適切に使い分けることが推奨されます。
