HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<span>
汎用インライン要素。特別な意味を持たず、CSSやJavaScriptでスタイリング・操作するためのコンテナとして使われます。
info
概要
<span> 要素は、**セマンティクス（意味）を持たない**汎用的な**インライン要素**です。主に、その中に含まれるコンテンツにCSSスタイルを適用したり、JavaScriptで特定の部分を操作したりするために使用されます。
ブロックレベルの汎用コンテナとして <div> 要素がありますが、<span> はインライン要素に対して同じ役割を果たします。
play_circle
デモ (静的表示)
HTML (Source)
<p>
文章の中の
<span style="color: red; font-weight: bold;">強調したい部分</span>
にスタイルを適用します。
</p>
<br>
<p>
<span class="button-link">
スタイリングされたテキスト
</span>
</p>
Preview (Result)
文章の中の 強調したい部分 にスタイルを適用します。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | <span> には固有の属性はありませんが、すべての要素が持つグローバル属性（class, id, style, data-*, role など）を使用できます。 |
| class | CSSでスタイルを指定するために使用される最も一般的な属性です。 |
| id | JavaScriptで要素を一意に特定したり、CSSで特定のスタイルを適用したりするために使用します。 |
| title | 要素に関する補足情報を示し、ホバー時などにツールチップとして表示されることがあります。 |
code
実用例
1. 特定の単語の色を変える（CSSクラス使用）
<p>
この文の中の <span class="highlight">重要な単語</span> に色を付けます。
</p>
/* 関連CSSの例: */
.highlight {
color: #FF5722;
font-weight: bold;
}
2. データ属性 (data-*) の利用
<p>
ユーザーID: <span data-user-id="12345">太郎</span>
</p>
// JavaScriptで値を取得する例:
const userId = document.querySelector('[data-user-id]').dataset.userId;
3. アイコンフォントのコンテナとして
<button>
<span class="material-symbols-outlined">favorite</span>
お気に入り
</button>
lightbulb
知っておくべき重要事項
warning
セマンティック要素の優先
スタイルやスクリプトを適用したい箇所が、
スタイルやスクリプトを適用したい箇所が、
<strong> (重要性)、<em> (強調)、<time> (日時) のようなセマンティクス（意味）を持つ要素で表現できる場合は、そちらを優先して使用すべきです。<span> は、他に適切な要素がない場合の「最後の手段」として使用します。
accessibility_new
アクセシビリティ
<span> は意味を持たないため、スクリーンリーダーは特別な扱いをしません。もし <span> をボタンやリンクのように対話的な要素として機能させたい場合は、role 属性（例: role="button"）や tabindex 属性を適切に設定する必要があります。ただし、**可能な限りネイティブの <button> や <a> を使用すべきです。**