spanタグとは？HTMLでの使い方、役割、記述方法を紹介

「spanタグ」とは、囲んだ範囲をインライン要素としてグルーピングするHTMLタグです。spanタグ単体には特別な意味はなく、特定の範囲に対してCSSやJavaScriptでスタイルや機能を追加するために使います。

たとえば、段落の中の一部のテキストの色を変更する、文字のサイズを大きくする、下線を引くといったテキストの装飾に使用されます。spanタグは他のインライン要素と同じく、周囲のテキストと同じ行に表示されるのが特徴です。

spanタグを使用する方法は、以下の2つです。

• HTMLのspanタグに直接CSSを記述する
• HTMLとCSSの両方に記述する

それぞれのケースにおける使い方について、詳しく解説します。

<span>タグを使って、特定の部分だけスタイル（見た目）を変更したい場合、style属性を使って直接CSSを記述できます。

<span>タグを使って、△△△の部分を赤色に変える場合は以下のように記述します。

<p>
 〇〇〇<span style="color: red;">△△△</span>〇〇〇
</p>

↓ WEBページ上では以下のように表示されます。

これが<span>タグに直接CSSを記述する基本的な使い方です。

<span>タグはHTMLファイルだけで完結するため、簡単に特定の要素にスタイルを適用できるのがメリットです。例えば、ほんの一部のテキストを強調したいときや、一時的にデザインを調整したいときに、直接CSSを記述する場合に活用できます。

ただし、同じスタイルを複数箇所で使う場合、<span>タグごとにCSSを記述するのは非効率となります。例えば、同じスタイルを複数箇所で使いたい場合、すべての<span>タグに同じCSSを記述しなければならず、管理が煩雑になります。

そのため、同じスタイルを繰り返し使うような場合には、HTMLとCSSを分離して管理をおこないましょう。

次の項目で、HTMLとCSSを分離して記述する方法を解説します。

HTMLとCSSの両方に記述する方法では、HTMLで範囲を指定し、CSSでその範囲に対するスタイルを定義します。

例えば、以下のように記述します。

<p>
 〇〇〇<span class="example1">△△△</span>〇〇〇
</p>

span.example1 {
color: red;
}

↓ WEBページ上では以下のように表示されます。

HTMLとCSSの両方に記述するため手間がかかりますが、同じクラスを使うことで、他の場所でも同じスタイルを簡単に適用できます。また、デザインを変更したいときにはCSSファイルの該当箇所を修正するだけで、すべての同じクラスに適用されているスタイルが一括で更新されます。

以下のケースにおけるspanタグの記述方法について解説します。

• 文字色を指定する
• 背景色を指定する
• 改行する
• 文章を右寄せにする
• 文字の高さや幅を指定する
• 文字サイズを指定する
• 文字に下線を引く
• marginを指定する
• 入れ子構造を作る

■ 一部のテキストだけの文字色を変更する場合のspanタグの記述

<p>
 〇〇〇<span style="color: red;">△△△</span>〇〇〇
</p>

このように、style="color: red;"と書くことで、△△△の部分が赤色に変わります。

↓ WEBページ上では以下のように表示されます。

■ HTMLとCSSの両方に記述する場合

<p>
 〇〇〇<span class="example1">△△△</span>〇〇〇
</p>

span.example1 {
color: red;
}

<span>タグにclass="example1"を指定し、CSSファイルで.example1クラスに対して赤色を設定しています。

▼ 文字色は、color属性にカラー名もしくはカラーコードを記述することで指定できます。

<span>タグに直接CSSを記述して、特定のテキストの背景色を変えることができます。background-colorプロパティを使います。

■ 一部のテキストだけの背景色を変更する場合のspanタグの記述例

<p>
 〇〇〇<span style="background-color:red;">△△△</span>〇〇〇
</p>

↓ WEBページ上では以下のように表示されます。

■ HTMLとCSSの両方に記述する場合

<p>
 〇〇〇<span class="example1">△△△</span>〇〇〇
</p>

span.example1 {
background-color:red;
}

<span class="example1">と指定した部分に、CSSで赤い背景色が適用されます。
背景色は、文字色と同様にbackground-color属性にカラー名、もしくはカラーコードを記述することで指定できます。

<span>タグは通常インライン要素であり、そのままでは改行が適用されません。インライン要素は、テキストが同じ行に並ぶ特性を持ちます。

しかし、display: block; を使うと、<span>タグはインライン要素のまま、ブロック要素の特性（改行が可能）も持たせることができます。

■ 一部のテキストだけを改行する場合のspanタグの記述例

<p>
 <span class="example1">〇〇〇</span>
 <span class="example1">△△△</span>
 <span class="example1">□□□</span>
</p>

span.example1 {
display: block;
}

↓ WEBページ上では以下のように表示されます。

各<span>タグの後に改行が入り、それぞれのテキストが縦に並びます。この方法は、インライン要素の特性を保ちながら柔軟にレイアウトを調整できるため、特定のテキストを改行させたい場合に利用します。

■ 右寄せにする場合のspanタグの記述例

<p>
 <span class="example1">〇〇〇△△△□□□</span>
</p>

span.example1 {
display:block;
text-align:right;
}

↓ WEBページ上では以下のように表示されます。

改行する場合と同様に、「display: block;」を記述してspanタグをブロック属性にすることで右寄せを可能にしています。
中央寄せする場合は「text-align: center;」、左寄せする場合は「text-align: left;」と記述します。

<span>タグはインライン要素のため、通常はwidthやheightの指定ができません。しかし、display: block;を使ってインライン要素にブロック要素の特性を持たせることで、幅や高さの指定が可能になります。

■ 一部のテキストだけの文字の高さや、幅を指定する場合のspanタグの記述例

<p>
あああああ<span class="example1">いいいいい</span>ううううう
</p>

span.example1 {
display:block;
  width: 50px;
  height: 100px;
}

※ 上記例では、「いいいいい」という文字列の幅を50px、高さを100pxに設定しています。

↓ WEBページ上では以下のように表示されます。

注意点として、テキストのサイズが指定したwidthやheightに収まらない場合、テキストがはみ出したり、要素のサイズに合わせて見た目が不自然になることがあります。必要に応じて、overflowやtext-alignなどのプロパティを追加して、見た目を調整できます。

■ 一部のテキストだけの文字のサイズを大きくする場合のspanタグの記述例

<p>
 あああああ<span style="font-size:22px;">いいいいい</span>ううううう
</p>

※ 上記例では、style="font-size:22px;"を使って、「いいいいい」の部分の文字サイズを22pxに指定しています。

↓ WEBページ上では以下のように表示されます。

■ HTMLとCSSの両方に記述する場合

<p>
 あああああ<span class="example1">いいいいい</span>ううううう
</p>

span.example1 {
font-size:22px;
}

class="example1"を使って、特定の部分に対して文字サイズを指定します。

■ 一部のテキストだけの文字に、下線を引く場合のspanタグの記述例

<p>
 〇〇〇<span style="border-bottom:solid">△△△</span>□□□
</p>

↓ WEBページ上では以下のように表示されます。

■ HTMLとCSSの両方に記述する場合

<p>
 〇〇〇<span class="example1">△△△</span>□□□
</p>

span.example1 {
border-bottom:solid ;
}

「border-bottom」の属性値を「solid」にすることで、下線が表示されます。二本線を引く場合は「double」、点線を引く場合は「dotted」です。「border-color」で下線の色を指定したり、「border-width」で下線の太さを指定したりできます。

■ 打ち消し線を引く場合は、「text-decoration:line-through;」を使用します。

<p>
 〇〇〇<span style="text-decoration:line-through">△△△</span>□□□
</p>

↓ WEBページ上では以下のように表示されます。

■ 一部のテキストだけmarginを指定する場合のspanタグの記述例

<p>
〇〇〇<span class="example1">△△△</span>□□□
</p>

span.example1 {
　margin:0;
  padding:0;
}
span{
  margin-top:100px;
  margin-left:50px;
  margin-right:50px;
  display:inline-block;  
}

↓ WEBページ上では以下のように表示されます。

spanタグでは左右のmarginを指定できますが、上下のmarginは指定できません。上下のmarginを指定する場合には、「display: inline-block;」を記述してspanタグをブロック属性にする必要があります。

■ 入れ子構造を作る場合のspanタグの記述例

<p>
〇〇〇
<span class="example1">△△△
<span class="example2">□□□</span>
△△△</span>
〇〇〇
</p>

span.example1 {
font-size:26px;
}
span.example2 { 
color: red; 
}

↓ WEBページ上では以下のように表示されます。

spanタグを使うときの注意点は以下の3つです。

1. ブロック要素は入れられない
2. スタイリングはCSSで管理する
3. 過度な入れ子構造は避ける

それぞれの注意点について解説します。

spanタグを使うときの1つ目の注意点は、ブロック要素は入れられないことです。spanタグはインライン要素の範囲を指定するHTMLタグなので、<span>と</span>の間にpタグやdivタグなどのブロック要素を入れることはできません。

このように、spanタグの中にpタグなどのブロック要素を入れることはできません。

■ 正しい例（インライン要素に適用）

<p>
 これは<span style="color: red;">赤い文字</span>です。
</p>

■ 正しい例（display: blockの使用）

<span style="display: block; color: red;">
 赤いブロック要素のように表示されます。
</span>

このように、CSSの「display: block」や「display: inline-block」のスタイルを適用することで、spanタグ自体をブロック要素のように振る舞わせることが可能です。この方法を使用すると、ブロック要素のように改行したり、幅や高さを指定できるようになります。

とはいえ、基本的にはspanタグはインライン要素として使用するのが一般的で、ブロック要素を内包する際にはdivタグの方が適しています。

spanタグにはstyle属性を使用してスタイルを直接指定できますが、HTMLとCSSは分離して管理する事が推奨されています。

HTMLは文書の構造や意味を定義するための言語であり、CSSはそのスタイル（見た目）を定義するための言語です。HTMLとCSSを分離することで、それぞれの役割が明確になりコードが読みやすくなります。

また、外部CSSファイルを使用することで、HTMLファイルのサイズを小さく保つことができるため、ページの読み込み速度を向上させることができます。

■ HTML内で直接スタイルを指定する場合

<p>〇〇〇<span style="color: red;">△△△</span>□□。</p>

上記のように、直接スタイルを指定すると複数の箇所でスタイルを変更したいときに、すべての場所で手動で修正する必要があります。また、HTMLファイルが長くなり、管理が難しくなります。

■ HTMLでの記述例

<p>〇〇〇<span class="highlight">△△△</span>□□。</p>

■ CSSでの記述例

.highlight { 
  background-color: red;
}

spanタグは入れ子構造で使用することもできます。しかし、spanタグを入れ子構造で使用するとコードが複雑になるため、どこまで適用させるのか、適用されないのはどこなのかを把握しづらいです。spanタグを入れ子構造で使用するのは避け、個別にspanタグを記述するようにしましょう。

■ 正しい使用例

<span>シンプルな構造で管理</span>

「spanタグ」と「divタグ」の違いは、どの要素をグループ化するかです。spanタグではインライン要素の範囲を指定しますが、divタグではブロック要素の範囲を指定します。

spanタグにスタイル属性を付けるとその範囲だけが影響を受けますが、divタグにスタイル属性を付けるとdivタグで囲われたすべてが影響を受けるということです。

【spanタグの場合】

<p>
 〇〇〇<span style="color: red">△△△</span>□□□
</p>

【divタグの場合】

<div style="color:red; ">
〇〇〇△△△□□□
</div>

また、spanタグを記述しただけでは見た目の変化は発生しませんが、divタグを記述した場合は前後で改行がおこなわれます。

【spanタグの場合】

<div>
 <span>〇〇〇</span><span>△△△</span><span>□□□</span>
</div>

【spanタグの場合】

<div>〇〇〇</div><div>△△△</div><div>□□□</div>

また、divタグではwidth・heightの指定や上下のmargin・paddingの指定が可能ですが、spanタグでは指定しても効果は反映されません。spanタグでwidthやheight、上下のmargin・paddingを指定する場合には、「display:block」を記述してブロック要素にする必要があります。

今回は、spanタグについて解説しました。spanタグは、ひとつの段落のテキストの一部だけを装飾する際に使用するHTMLタグです。

文字色・背景色を変更する範囲や文字の高さ・幅を変更する範囲など、スタイル属性を適用させる範囲をspanタグで指定します。spanタグと同様に範囲を指定するdivタグやpタグとは用途が異なるため、本記事で解説したspanタグを使うときの注意点や、「spanタグ」と「divタグ」の違いを確認してspanタグを使用しましょう。