【HTML Living Standard】span要素の使い方

span要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月26日

基本的な使い方

spanオブジェクトは、HTMLドキュメント内でインライン要素として特定の意味を持たない、汎用的なコンテナを表すオブジェクトです。主にテキストの一部や他のインライン要素をグループ化するために使用されます。span自体は特別な視覚的表現やセマンティックな意味を持つものではありませんが、Cascading Style Sheets（CSS）とJavaScriptと組み合わせることでその真価を発揮します。

たとえば、段落内の特定の単語やフレーズをspan要素で囲むことで、CSSを使ってその部分だけに異なる色、フォントサイズ、背景色などのスタイルを適用したり、JavaScriptを使って特定のインタラクションやイベントハンドラを付与したりすることが可能になります。これにより、HTMLの構造的な意味付けを損なうことなく、きめ細やかなスタイリングや動的な操作を実現できます。

span要素は、ブロックレベル要素であるdiv要素のインライン版と考えることができます。div要素がページの主要なセクションや大きなブロックをグループ化するのに対し、span要素はテキストの流れを中断することなく、行の中の小さなまとまりを区分けする際に非常に役立ちます。CSSやJavaScriptを通じて、Webページの表現力やインタラクティブ性を高めるための強力なツールとして活用されます。

公式リファレンス: : The Content Span element

構文(syntax)


1<span>任意のテキストや他のインライン要素</span>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTML span要素でインライン要素を装飾する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>span要素の基本例</title>
7    <style>
8        /* CSSでspan要素にスタイルを適用するための定義 */
9        .highlight {
10            color: #E60047; /* 赤系の色 */
11            font-weight: bold;
12        }
13        .emphasize {
14            background-color: #FFF100; /* 黄色 */
15            padding: 2px 5px;
16            border-radius: 3px;
17        }
18    </style>
19</head>
20<body>
21    <!-- span要素は、テキストや他のインライン要素の一部をグループ化し、
22         CSSでスタイルを適用したり、JavaScriptで操作したりするための汎用的なインラインコンテナです。
23         それ自体では特別な意味を持ちません。 -->
24
25    <p>
26        これは通常のテキストです。
27        <span class="highlight">この部分はspan要素で囲まれ、赤色で太字にハイライトされています。</span>
28        テキストはまだ続きます。
29    </p>
30
31    <p>
32        重要な情報：
33        <span class="emphasize">この箇所は背景色が黄色に強調されています。</span>
34        ご注意ください。
35    </p>
36
37    <p>
38        <span>複数のspan要素を</span>
39        <span>同じ段落内で使用することも可能です。</span>
40    </p>
41</body>
42</html>

HTMLのspan要素は、ウェブページ内で特定のテキストや他のインライン要素の一部をグループ化するための汎用的なコンテナです。この要素自体には特別な意味や視覚的な効果はなく、コンテンツの構造に直接的な影響を与えません。

主な役割は、CSS（スタイルシート）を適用して見た目を変更したり、JavaScriptを使って動的な操作を行ったりする対象として、コンテンツの一部をマークアップすることです。例えば、段落内の特定の単語を強調するために色を変えたり、背景色を付けたりする場合にspan要素を使用します。

サンプルコードでは、タグで囲まれた通常のテキストの一部をやで囲んでいます。これにより、CSSで定義された.highlightクラスや.emphasizeクラスのスタイルが、そのspan要素内のテキストにのみ適用され、赤色の太字や黄色の背景色として表示されます。

span要素は引数を直接受け取ったり、特定の値を返したりすることはありません。代わりに、class属性やid属性などのグローバル属性を使用することで、CSSやJavaScriptから識別し、制御することが可能です。このように、span要素はウェブコンテンツの表現力を高めるために、CSSやJavaScriptと連携して利用される非常に基本的な要素の一つです。

要素は、それ自体では特別な意味を持たない汎用的なインライン要素です。主にCSSで見た目を装飾したり、JavaScriptで特定のテキスト部分を操作したりするために使用します。テキストの意味的な強調や重要性を示したい場合は、や、ハイライトにはなど、よりセマンティックな（意味のある）要素を優先してください。は、意味付けが不要で純粋にスタイル適用やスクリプト操作が必要な場合に限定して使いましょう。不必要に多用すると、HTMLの構造が複雑になり、可読性やメンテナンス性が低下する原因となるため注意が必要です。

spanタグでインライン要素を装飾する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>spanタグの基本的な使い方</title>
7    <style>
8        /* .highlight クラスが適用されたspan要素のスタイル */
9        .highlight {
10            color: #FF0000; /* 文字色を赤に設定 */
11            font-weight: bold; /* 文字を太字に設定 */
12        }
13        /* .emphasis クラスが適用されたspan要素のスタイル */
14        .emphasis {
15            color: #0000FF; /* 文字色を青に設定 */
16            font-style: italic; /* 文字を斜体に設定 */
17        }
18    </style>
19</head>
20<body>
21    <h1>spanタグのサンプルコード</h1>
22    <p>
23        この文章では、<span class="highlight">特定のキーワードを強調</span>しています。
24        `&lt;span&gt;`タグは、テキストの<span class="emphasis">インライン（行内）の一部</span>をグループ化し、
25        CSSでスタイルを適用したり、JavaScriptで操作したりするための汎用的な要素です。
26    </p>
27    <p>
28        例えば、こちらの<span id="special-text">部分にはIDを付与</span>して、
29        後からJavaScriptで内容を変更することも可能です。
30    </p>
31</body>
32</html>

HTMLのタグは、文章中の特定のテキストの「インライン（行内）の一部」をグループ化するために使用される汎用的な要素です。このタグ単体では特に視覚的な変化や意味を持ちませんが、主にCSSと組み合わせてテキストにスタイルを適用したり、JavaScriptで内容を操作したりする際に活用されます。

サンプルコードでは、を使って「特定のキーワードを強調」し、で「インライン（行内）の一部」という部分を異なるスタイルで装飾しています。このように、タグにclass属性やid属性を付与することで、特定の範囲のテキストを識別し、CSSで文字の色や太さ、斜体などのデザインを設定したり、JavaScriptで動的な処理を加えたりできます。

タグはブロック要素とは異なり、囲まれた内容が新しい行を生成することなく、既存の行内で自然に表示される「インライン要素」です。そのため、文章の流れを崩さずに一部分にだけデザインを適用したい場合に非常に便利です。

この要素は、プログラミング言語の関数のような「引数」や「戻り値」を持つものではありません。HTML要素は、その属性を通じて情報を受け取り、コンテンツを表示することが主な役割であり、特定の処理結果を返すような概念は適用されません。classやid属性は、外部のCSSやJavaScriptから対象を特定するための識別子として機能します。

タグは、テキストのインライン（行内）の一部をグループ化し、主にCSSでスタイルを適用したりJavaScriptで操作したりするための汎用的な要素です。このタグ自体には意味的な役割（セマンティクス）がないため、重要性を強調する場合は、斜体にしたい場合はなど、より意味の通るタグの利用を優先してください。は新しい行を作らない「インライン要素」であり、などの「ブロック要素」とは特性が異なります。HTMLの構造を意味的に保ち、スタイリングはCSSで行うことを意識し、の過度な使用は避けてコードの可読性を高めましょう。