HTMLのspanタグとは？意味・使い方・CSS・JSでの活用方法を初心者向けに解説

HTMLで文字の一部分だけ色を変えたり、JavaScript で特定の文字を書き換えたりするときに使われるのが「spanタグ」です。

しかし、HTML を学び始めたばかりの多くの方は、

・spanタグは何のために使うの？
・divタグとは何が違うの？
・classやidはどのように使い分けるの？
・CSSやJavaScriptではどう指定するの？

と疑問に感じます。

spanタグは、文章や文字の一部分をグループ化するためのシンプルな HTMLタグです。
タグ自体に見た目を変える機能はありませんが、CSS や JavaScript で特定の部分を操作するための「目印」として利用されます。

ここでは、HTML初心者向けに spanタグの意味や役割、基本的な使い方をわかりやすく解説します。
また、divタグとの違いや使い分け、class・id属性を使った CSS や JavaScript での活用方法についても紹介します。

この記事を読むことで、「文章の一部分を扱うときは spanタグを使う」理由や、divタグとの使い分け方が理解できるようになります。

HTMLのspanタグとは？

HTMLのコードを書いていると、非常によく見かけるのが <span>（spanタグ）です。まずは、このタグが持つ基本的な意味と役割を解説します。

spanタグの意味

spanタグとは、文章や文字の一部分を囲み、後から文字の色や背景色などを指定できるようにするHTMLタグです。
文章の中にある「価格」「重要な単語」「日付」など、一部分だけを変更したい場合に使用します。

価格は<span>980円</span>です。

このように spanタグで囲むことで、「980円」という部分だけを1つの対象として扱えるようになり、後から文字の色や背景色、文字自体の変更などができるようになります。

spanタグはCSSやJavaScriptで操作するための目印

spanタグの特徴は、タグ自体には特別な意味やデザイン効果がないことです。

例えば、
・<strong>タグ → 文字を強調する
・<a>タグ → リンクを設定する
というように、HTMLタグにはそれぞれ役割があります。

しかし、spanタグは囲んだだけでは文字の色が変わったり、太字になったりすることはありません。

価格は<span>980円</span>です。

ブラウザでの表示

価格は980円です。

見た目は変わりませんが、「980円」という部分を後から指定できる状態になります。

この目印を利用して、
・CSSで文字色や背景色を変更する
・JavaScriptで文字を書き換える
といった操作ができます。

つまり、spanタグは見た目を変えるためのタグではなく、特定の部分を操作するための目印を付けるタグです。

spanタグはインライン要素

spanタグはインライン要素に分類されます。

インライン要素とは、文章の流れの中で使用される要素のことです。
そのため、spanタグで文字を囲んでも基本的に改行されません。

例えば、

この商品は<span>期間限定</span>です。

は、

この商品は期間限定です。

のように、文章の途中に入れても自然に表示されます。

そのため、spanタグは単語や文章の一部分など、改行せずに指定したい部分を囲む場合に適しています。

spanタグとdivタグの違い

spanタグと divタグの大きな違いは、「どの範囲をまとめるために使うか」です。

spanタグは、文章や文字の一部分をグループ化するために使います。
一方、divタグはページ内の複数の要素をまとめたり、レイアウトを作成したりするために使われます。

例えば、文章の中で一部分だけ色を変えたい場合は spanタグを使用します。

商品の価格は<span>980円</span>です。

このように span タグで囲むことで、「980円」という文字だけを指定できます。CSSを使えば文字色や文字サイズなどを変更できます。

一方、divタグは文章の一部分ではなく、ページのまとまりを作る場合に使用します。

<div>
  <h2>商品情報</h2>
  <p>商品の説明文です。</p>
</div>

このように、見出しや文章など複数の要素をひとまとめにすることができます。

また、spanタグはインライン要素、divタグはブロック要素という違いがあります。

インライン要素である spanタグは、「spanタグはインライン要素」で解説したように文章の途中に配置しても基本的に改行されません。

一方、ブロック要素であるdivタグは前後で改行されるため、下記の様に1行でHTMLコードを記述しても、

<div>1つ目のエリア</div> <div>2つ目のエリア</div>

divタグで囲まれた範囲は1つのまとまりとして表示され、それぞれのdiv要素は下記の様に別の行に表示されます。
表示結果

1つ目のエリア

2つ目のエリア

つまり、文章の一部分を指定したい場合は spanタグ、ページ内のエリアや複数の要素をまとめたい場合は divタグを使うのが基本です。

<spanタグとdivタグの比較表>

項目	spanタグ	divタグ
種類	インライン要素	ブロック要素
改行	改行されない	前後で改行される
用途	文章や文字の一部を指定する	複数の要素やエリアをまとめる
主な利用	文字装飾・JavaScriptでの操作	レイアウト作成・コンテンツ管理
使用例	価格の一部だけ色を変える	ヘッダーや記事部分をまとめる

spanタグの基本的な使い方

spanタグは、文章や文字の一部分を指定するためのタグです。

ただし、spanタグで囲むだけでは文字の色や大きさが変わることはありません。

文字を装飾したり、JavaScript で操作したりする場合は、属性を追加して対象を指定します。

spanタグでよく使われる指定方法には、以下の3つがあります。

・class属性：複数の要素をまとめて指定するときに使用する
・id属性：ページ内の特定の1箇所を指定するときに使用する
・style属性：HTML内に直接CSSを記述するときに使用する

それぞれ用途が異なるため、目的に合わせて使い分けることが大切です。

style属性を使って指定する

style属性を使うと、spanタグに直接CSSを記述できます。
例：

価格は<span style="color:red;">980円</span>です。

この場合、「980円」の部分だけ赤色で表示されます。
表示結果

価格は980円です。

このように、style属性を使えば簡単に一部分だけデザインを変更できます。

ただし、style属性を多く使用するとHTML内にデザインの指定が増え、管理しにくくなります。

そのため、Webサイト制作ではCSSとHTMLを分け、class属性を使ってCSSを指定する方法が一般的です。

class属性を付ける

class属性は、複数の要素をまとめて指定したい場合に使用します。

class属性を記述するときは、class の後に半角イコール（=）と半角ダブルクォーテーション（”）を付け、その間に class名を入れます。

例：

<span class="price">980円</span>

この場合、price が class名になります。
class名は、HTML内で要素を識別するための名前なので、作成者が任意に決めることができます。

【class名は任意の名前を設定できる】
現在のHTML仕様（HTML Living Standard）では、class属性の値にはさまざまな文字を使用できます。半角英数字やハイフン（-）、アンダーバー（_）などを含めることが可能です。
また、仕様上は日本語や全角文字を class名に使用することもできます。

例：

<span class="価格">980円</span>

<span class="price2">1,500円</span>

<span class="_price">2,000円</span>

ただし、日本語や全角文字、数字やハイフン（-）、アンダーバー（_）から始まるclass名などは、CSSで指定するときや、複数人でコードを管理するときに分かりにくくなる場合があります。

そのため、Web制作では半角英数字を基本にして、単語を区切る場合はハイフン（-）やアンダーバー（_）を使うことが一般的です。

例：

<span class="price">980円</span>

<span class="product-price">1,500円</span>

<span class="item2_price">2,000円</span>

class名は後からHTMLやCSSを修正するときに分かりやすいよう、要素の役割や内容が伝わる名前を付けることが大切です。

同じclass名を複数のspanタグに付けることで、まとめて指定することができます。

例：

<span class="price">980円</span>

<span class="price">1,500円</span>

このように同じ class名を設定すると、複数の要素に同じ CSS を適用できます。

特に CSS で文字色や背景色などのデザインを変更するときは、class属性を使うことが一般的です。

例えば、以下のようにCSSを指定すると、class=”price”を付けたすべての文字を赤色に変更できます。

.price {
  color: yellow;
}

このように class属性を利用すると、同じデザインを複数の場所に適用できます。

※spanタグに適用できる CSS の詳しい指定方法については、別の記事で解説します。

id属性を付ける

id属性は、ページ内にある特定の1つの要素を個別に識別するために使用します。

class属性は、同じclass名を複数の要素に設定して、まとめて指定するために使用します。

一方、id属性はページ内で「この要素だけ」と指定したい場合に利用します。

例えば、JavaScript で特定の文字を変更したり、ページ内リンクの移動先を指定したりするときなど、1つの要素を明確に指定したい場合に使われます。

id属性を記述するときは、id の後に半角イコール（=）と半角ダブルクォーテーション（”）を付け、その間に id名を入れます。

例：

<span id="price">980円</span>

この場合、priceがid名（id属性の値）になります。

id属性の使い方

id属性は、1つの HTML文書内で何度も使用できます。
ただし、同じ id名（id属性の値）を複数の要素に設定することはできません。

例えば、以下のように異なる id名を設定することは可能です。

<span id="price">980円</span>

<span id="title">商品名</span>

<span id="button">購入する</span>

この場合、それぞれ異なるid名が設定されているため、各要素を個別に識別できます。

一方、以下のように同じid名を複数の要素に設定することはできません。

<span id="price">980円</span>

<span id="price">1,500円</span>

この場合、同じpriceというid名が複数存在するため、どの要素を指しているのか判断できません。

id属性は「ページ内で1つだけ存在する要素を指定する」ために使うため、同じid名は1つのHTML文書内で1回だけ使用します。

id名に使用できる文字

現在のHTML仕様（HTML Living Standard）では、id属性の値には文字列を指定できます。
そのため、半角英数字、ハイフン（-）、アンダーバー（_）などを含めることができます。

例：

<span id="product-price">980円</span>

<span id="item_price">1,500円</span>

また、日本語や全角文字をid名に使用することも可能です。

例：

<span id="価格">980円</span>

ただし、日本語や全角文字を使用すると、CSS や JavaScript で指定するとき、また複数人でコードを管理するときに扱いにくくなる場合があります。

そのため、Web制作では半角英数字を基本にして、単語を区切る場合はハイフン（-）やアンダーバー（_）を使用することが一般的です。

例：

<span id="product-price">980円</span>

JavaScriptでid属性を利用する

id属性は、JavaScript で特定の要素を操作するときによく利用されます。

JavaScript では、id名を指定してページ内の要素を取得できます。

例：

document.getElementById("price")

これは、「idがpriceの要素を取得する」という意味です。

例えば、以下のspanタグがある場合、

<span id="price"<980円</span>

JavaScript でこの要素を取得すると、文字を書き換えたり、表示内容を変更したりできます。

ただし、JavaScript では class属性を使って要素を取得することもできます。

そのため、「JavaScriptだからidを使う」というわけではありません。

id属性は同じ値を複数使用できないため、JavaScript で特定の1つの要素を確実に指定したい場合に向いています。

一方、class属性は同じ class名を複数の要素に設定できるため、複数の要素をまとめて操作したい場合に向いています。

このように、class属性は「複数の要素をまとめる」、id属性「1つの要素を個別に識別する」という違いがあります。

CSSでspanタグを指定する方法

HTML で spanタグに設定した class属性や id属性は、CSS から指定して文字色や背景色などを変更できます。

class属性をCSSで指定する

HTML で class属性を付けた場合は、CSS では先頭に「.（ドット）」を付けて指定します。
HTML

<span class="price">980円</span>

CSS

.price {
  color: red;
}

このように記述すると、class=”price” を付けた spanタグの文字色が赤色になります。

同じ class名を付けた要素には、同じ CSS がまとめて適用されます。

id属性をCSSで指定する

HTML で id属性を付けた場合は、CSS では先頭に「#（シャープ）」を付けて指定します。
HTML

<span id="price">980円</span>

CSS

#price {
  color: red;
}

このように記述すると、id=”price” を付けた spanタグだけの文字色が赤色になります。

class は「.（ドット）」、idは「#（シャープ）」を付けて指定すると覚えておくと分かりやすいでしょう。

なお、CSS でデザインを指定する場合は、同じスタイルを複数の要素へ適用しやすい class属性を使うのが一般的です。

CSSでspanタグを活用する方法

spanタグに class属性や id属性を付けると、CSS で文字の一部分だけ背景色を変更できます。

ここでは、背景色を変更する例を紹介します。

class属性で指定する

HTML

価格は<span class="price">980円</span>です。

CSS

.price {
  background-color: yellow;
}

ブラウザでの表示

価格は980円です。

id属性で指定する

HTML

価格は<span id="price">980円</span>です。

CSS

#price {
  background-color: red;
}

ブラウザでの表示

価格は980円です。

class属性・id属性のどちらでも、spanタグの背景色を変更できます。
ただし、同じデザインを複数の要素へ適用しやすいことから、CSS では class属性を使うのが一般的です。

一方、id属性はページ内で1つの要素を識別するために使用されることが多く、JavaScript で特定の要素を操作する場面などでよく利用されます。

CSS の詳しい書き方については、別の記事で解説します。

JavaScriptでspanタグを活用する方法

spanタグの文字を書き換える
JavaScript では、spanタグの文字を書き換えたり、表示・非表示を切り替えたりできます。

そのためには、まず操作したい spanタグを JavaScript から指定する必要があります。

指定する方法には、主に id属性と class属性があります。

id属性：特定の1つの要素を指定する場合に使用する
class属性：同じ名前が付いた複数の要素をまとめて指定する場合に使用する

例えば、ページ内に1つしかないメッセージを書き換えたい場合は、id属性を使用するのが分かりやすい方法です。

HTML

<span id="text-target">こんにちは</span>

<button onclick="changeText()" style="background:orange; color:white; font-size:20px; padding:18px 96px; border:none; border-radius:8px;">変更</button>

JavaScript

function changeText() {
  document.getElementById("text-target").textContent = "さようなら";
}

ブラウザでの表示
変更ボタンを押すと「こんにちは」の文字が変わります。ブラウザの更新ボタンで元に戻ります。
こんにちは

この例では、id=”text-target” が付いた spanタグを JavaScript で取得し、表示されている文字を「さようなら」に変更しています。
JavaScript で要素を取得する方法や、id・class の使い分けについては、別記事で詳しく解説します。

一方、複数の同じ種類の要素をまとめて操作したい場合は、class属性を使って指定することもできます。

例えば、次のコードでは、ボタンをクリックすると class=”fruit” が付いたすべての spanタグの文字色が赤色に変わります。

HTML

<span class="fruit">りんご</span>
<span class="fruit">みかん</span>
<span class="fruit">ぶどう</span>

<button onclick="changeColor()" style="background:orange; color:white; font-size:20px; padding:18px 96px; border:none; border-radius:8px;">文字色を変更</button>

JavaScript

function changeColor() {
  const fruits = document.querySelectorAll(".fruit");

  fruits.forEach(function(fruit) {
    fruit.style.color = "red";
  });
}

ブラウザでの表示
文字色を変更のボタンを押すとの文字が赤色に変わります。ブラウザの更新ボタンで元に戻ります。
りんご
みかん
ぶどう

このように、class属性を使うと、同じ名前が付いた複数のspanタグをまとめて操作できます。