目次
- spanタグとは？
- spanの基本構造
- spanを使うべき場面
- ① 文中の一部の文字だけを装飾したいとき
- ② 特定の単語だけフォントを変えたいとき
- ③ ボタンやリンク内の一部だけデザイン変更
- ④ アイコンとテキストを並べたいとき（インラインのまま扱える）
- span を使わない方がよい場面（NG例）
- 意味的に重要な強調をspanで行う
- 見出しを span で作ろうとする
- ブロック全体をspanで囲む
- span と div の違い
- span と strong / em の違い
- 実務でよく使う span の活用例
- ① ボタンの一部だけアニメーション
- ② 見出しの補助テキスト（意味は弱いがデザイン用途）
- ③ テキスト一部を囲って色分け
- CSSでspanをデザインする例
- span の使い方チェックリスト
- まとめ
spanタグとは？
<span> は 「意味を持たないインライン要素」 を表すタグです。
- 特別な意味を持たない
- 文を壊さず、文字の一部分だけにスタイルを当てたいときに使う
- インライン要素なので改行されない
つまり、
見た目を変えたい部分だけをピンポイントで囲む“マーカー”のような存在
です。
spanの基本構造
<p>この文章の <span class="accent">ここだけ</span> を強調します。</p>- 文の途中に挟み込める
- CSSで狙った部分だけ装飾できる
非常によく使われます。
spanを使うべき場面
① 文中の一部の文字だけを装飾したいとき
<p>
料金は <span class="price">3,000円</span> です。
</p>価格部分だけ色を変えたいときなど。
② 特定の単語だけフォントを変えたいとき
<p>
<span class="english">Design</span> と <span class="jp">デザイン</span> の違い
</p>英語だけ別フォントにしたい場合に便利。
③ ボタンやリンク内の一部だけデザイン変更
<a href="#" class="btn">
お申し込みは <span>こちら</span>
</a>ボタン内の一部を動かしたり色変えしたいとき。
④ アイコンとテキストを並べたいとき（インラインのまま扱える）
<span class="icon">★</span> 人気サービスインラインのまま自然に使えるのが強み。
span を使わない方がよい場面（NG例）
意味的に重要な強調をspanで行う
<!-- NG -->
<span>重要なお知らせ</span>意味的に重要な文章は
<strong>（強調・重要）<em>（文脈上の強調）
を使います。
<!-- OK -->
<strong>重要なお知らせ</strong>見出しを span で作ろうとする
<!-- NG -->
<p><span class="title">サービス紹介</span></p>見出しは必ず hタグ（h1〜h6） を使うべき。
ブロック全体をspanで囲む
<!-- NG：spanはインラインなのでレイアウト用途に不向き -->
<span>
<p>段落を包含するのはおかしい</p>
</span>ブロック要素の親は div / section などを使う。
span と div の違い
| タグ | 種類 | 意味 | 使う場面 |
|---|---|---|---|
| span | インライン | 意味なし | 文章の一部だけ装飾 |
| div | ブロック | 意味なし | レイアウト・内容のまとまり |
span は 文の途中に使う
div は ブロック単位で分ける
span と strong / em の違い
| タグ | 意味 | 用途 |
|---|---|---|
| span | 意味なし | 見た目だけ変える |
| strong | 重要性の強調 | 重要・警告など |
| em | 文脈上の強調 | 言い回しの強調 |
span は“重要性”を持たせたいときには使いません。
実務でよく使う span の活用例
① ボタンの一部だけアニメーション
<button>
お申し込み <span class="arrow">→</span>
</button>CSSで .arrow にアニメーションをつける。
② 見出しの補助テキスト（意味は弱いがデザイン用途）
<h2>
サービス紹介 <span class="sub">Service</span>
</h2>副題など“意味的に重要でない補足”に使う。
③ テキスト一部を囲って色分け
<p>
当サービスは <span class="highlight">初期費用0円</span> でご利用いただけます。
</p>CSSでspanをデザインする例
.price {
color: #e60033;
font-weight: bold;
}
.accent {
background-color: yellow;
padding: 0 4px;
}
.english {
font-family: 'Pinyon Script', cursive;
}
.highlight {
background: linear-gradient(transparent 60%, #ffe4b5 60%);
}spanはインラインなので
自由度が高く、装飾に最適。
span の使い方チェックリスト
- 文中の一部を装飾するためだけに使っているか
- 意味的強調には strong/em を使っているか
- ブロック要素の親にしていないか
- 見出しを span で作っていないか
- 無意味に多用していないか
まとめ
- span＝「意味を持たないインライン要素」
- 文中の一部だけ装飾したいときに使う
- 重要な強調や見出しには使ってはいけない
- ブロック用途は div、意味強調は strong/em
- 実務ではボタン・見出しの補助・価格装飾などで大活躍
“文を壊さず一部だけオシャレにする”
それが span の正しい役割です。