HTML要素 ・ 見出し・文章
<span>
意味を持たないインライン要素
文章の一部分だけに、CSSで色や装飾をつけたいときに使う汎用の要素です。span 自体には意味がありません。
01
サンプルコード
HTML
1<p>本日の営業時間は<span class="time">10:00〜18:00</span>です。</p>
2<p>価格：<span class="price">¥1,200</span>（税込）</p>
CSS
1.time {
2 font-weight: bold;
3}
4.price {
5 color: #c0392b;
6 font-size: 1.3em;
7}
02
実行結果
ブラウザでの表示
03
解説
span は文章中の一部分を囲むためだけの要素です。囲んでも見た目は変わらず、class を付けてCSSで装飾するために使います。
ブロック要素の汎用要素が div、インライン要素の汎用要素が span です。span は改行されず、文章の流れの中に置かれます。
「重要」を表すなら strong、「強調」なら em のように、意味に合う要素がある場合はそちらを優先します。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
class | CSSで装飾するための名前 |
lang | 一部だけ別の言語のとき（例：lang="en"） |
title | マウスを乗せたときの補足 |
一部だけ英語にする
英語の部分に lang を付けると、読み上げソフトが正しく発音できます。
HTML
1<p>この機能は<span lang="en">Dark Mode</span>と呼ばれます。</p>
注意点
- 01意味を伝えたい部分には span ではなく、strong・em・time などを使いましょう。
- 02span の中に div や p などのブロック要素は入れられません。