- 公開日： 最終更新日：
spanタグとは？HTMLでの使い方と基本の役割
HTMLで一部の文字にだけCSSを適用したいときに使われるのがspanタグです。装飾やレイアウトの調整を行う場面では欠かせない存在ですが、使い方や他のタグとの違いが分からないという方も少なくありません。
このページでは、spanタグの基本的な役割から使い方、他のHTMLタグとの違いまでを解説します。
目次
spanタグとは
spanタグは、HTMLにおけるインライン要素のひとつで、テキストの一部に対して意味付けやスタイル指定をする際に使われます。段落全体を囲むdivタグやpタグと異なり、spanタグはあくまで文章の中の一部だけに使うのが特徴です。
spanタグ自体には表示上の変化はありませんが、CSSやJavaScriptと組み合わせることで、装飾や動的な処理を適用できます。意味的な構造を持たず、見た目の調整やスクリプト制御のための汎用的なタグとして、Web制作で広く活用されています。
spanタグの基本的な役割
spanタグの主な役割は、HTML文書内で特定のテキスト範囲を指定し、そこにスタイルや機能を適用できるようにすることです。
たとえば、文章の中で価格や強調したいキーワードなど、特定の箇所だけ色や文字サイズを変更したい場合に使用されます。また、JavaScriptと連携して特定部分にイベントを設定したり、データ取得の対象にしたりといった動的な操作のためのフックとしても役立ちます。
見た目の装飾だけでなく、クラスやIDでグループ化して再利用しやすくするなど、柔軟なデザイン設計や保守性の向上につながる重要な役割を担っています。
spanタグと他のhtmlタグとの違い
spanタグは、他のHTMLタグと比べて構造的な役割を持たないため、目的や使い方に違いがあります。ここでは、代表的なdivタグやpタグとの違いについて解説します。
divタグとの違い
divタグとspanタグは、どちらも特別な意味を持たない汎用タグですが、使い方や役割は大きく異なります。最も大きな違いは、divタグがブロック要素であるのに対し、spanタグはインライン要素であるという点です。
ブロック要素であるdivタグは、ページのレイアウトを構成するために使用され、通常は段落やセクションのように上下に分かれて表示されるのが特徴です。一方でspanタグは、文章の流れの中で特定の文字列や単語にスタイルを適用したいときに使用され、行の中で表示が完結します。
たとえば、以下のような違いがあります。
<!-- divタグの例（ブロック） -->
<div class="box">この部分がブロックとして表示されます</div>
<!-- spanタグの例（インライン） -->
<p>この文章の<span class="highlight">一部だけを装飾</span>したい場合に使用します</p>
このように、構造を区切りたい場合はdivタグ、テキストの一部にだけ処理を加えたい場合はspanタグを使うと考えると分かりやすいでしょう。より詳しくはdivタグとは？のページをご覧ください。
pタグとの違い
pタグは、paragraph（段落）の略であり、文章全体のまとまりを意味づけるためのブロック要素です。一方、spanタグには意味的な役割がなく、構造的にもブロックを作りません。
pタグは、テキストを段落として表現する際に使用され、基本的には段落単位で改行や余白が自動的に適用されます。対してspanタグは、文章中の一部に装飾やスクリプト処理を加える目的で使われ、HTML文書の構造には影響を与えません。
たとえば、以下のような違いがあります。
<!-- pタグの例 -->
<p>これは段落として扱われるテキストです。</p>
<!-- spanタグの例 -->
<p>これは<span class="emphasis">強調したい一部の文字列</span>です。</p>
このように、pタグは文書の意味を表すタグ、spanタグは見た目や操作の対象として使うタグという違いがあります。文書構造を意識する場合はpタグを、スタイル調整をしたい場合はspanタグを使うのが基本です。
spanタグの使い方
spanタグは、CSSと組み合わせて使うことで、文字の装飾やレイアウトの調整が可能です。ここでは、基本的な記述方法とよく使われる装飾例を紹介します。
spanタグの記述方法
spanタグは、装飾したいテキストの前後を<span>と</span>で囲み、class属性やstyle属性を使ってスタイルを指定します。基本的な書き方は以下の通りです。
<span class="sample">装飾したい文字</span>
CSSでクラスを定義しておけば、同じスタイルを複数箇所で再利用できます。
.sample {
color: red;
font-weight: bold;
}
また、簡単なスタイルであれば、style属性を直接記述することもできます。
<span style="color: red;">赤い文字</span>
ただし、可読性やメンテナンス性の観点から、外部または内部CSSでの管理が推奨されます。
文字色を変える
文字の色を変えるには、CSSのcolorプロパティを使用します。たとえば、以下のように記述することで、特定の文字だけを赤くすることができます。
<span style="color: red;">この部分だけ赤く表示されます</span>
または、class属性を使って複数のspanタグに一括で色を適用することもできます。
HTMLの記述例
<span class="red-text">赤文字</span>
CSSの記述例
.red-text {
color: red;
}
Webデザインの中で、キーワードや強調したいフレーズの視認性を高めたいときに効果的です。
背景色を変える
背景色を変更したい場合は、CSSのbackground-colorプロパティを使います。以下は、テキストの背景に黄色をつける例です。
<span style="background-color: yellow;">この部分の背景が黄色になります</span>
文章内で注意喚起したい箇所や、読みやすさを補う目的で活用できます。
文字サイズを変える
文字サイズはfont-sizeプロパティで調整します。以下の例では、文字を1.5倍に拡大しています。
<span style="font-size: 1.5em;">文字が大きく表示されます</span>
相対指定と絶対指定がありますが、レスポンシブ対応を考慮するなら相対指定が推奨されます。
文字に下線を引く
文字に下線をつけたいときは、CSSのtext-decorationプロパティを使います。
<span style="text-decoration: underline;">この文字に下線が付きます</span>
リンクではない強調表現として使う際に便利ですが、下線＝リンクと誤解されやすい点には注意が必要です。
文章を右寄せにする
テキストを右寄せしたい場合は、親要素にtext-align: right;を指定する方法が一般的ですが、spanタグ単体でもdisplayをinline-blockに変更すれば右寄せが可能です。
<span style="display: inline-block; text-align: right; width: 100%;">右寄せのテキスト</span>
または、CSSクラスを使って下記のように定義します。
HTMLの記述例
<span class="align-right">右寄せテキスト</span>
CSSの記述例
.align-right {
display: inline-block;
text-align: right;
width: 100%;
}
テキストをビジュアル的に調整したい場面で役立ちます。
spanタグを使うときの注意点
spanタグは便利な反面、使い方によってはHTMLの可読性や保守性を損なうことがあります。ここでは、使う際に気をつけたいポイントや、よくある疑問について解説します。
spanへのcssの適用はclass属性を使う
spanタグにスタイルを適用する際は、class属性を使ってCSSで定義する方法が基本です。以下のように、スタイルを外部CSSまたは内部スタイルシートで管理することで、HTMLがすっきりと保たれます。
HTMLの記述例
<span class="highlight">この文字は青色で太字になります</span>
CSSの記述例
.highlight {
color: blue;
font-weight: bold;
}
一方、style属性を直接記述するインラインCSSは、簡単に適用できる反面、HTMLの可読性が落ち、管理が煩雑になるため多用は避けるべきです。
<!-- 管理しづらくなる例 -->
<span style="color: blue; font-weight: bold;">この文字</span>
複数箇所で同じスタイルを使いたい場合、classを使うことで一括管理が可能になります。
spanタグは複数利用しても良い
1つのHTML内でspanタグを何度でも使用することは可能です。例えば、文章内で複数の単語をそれぞれ装飾したいとき、以下のように複数回使う場面はよくあります。
<p><span class="keyword">SEO</span>に強い<span class="keyword">コンテンツ</span>を作成</p>
ただし、必要以上に細かく分割してしまうと、HTMLが読みにくくなり、CSSの管理も煩雑になる恐れがあります。意味のある範囲に対して使うことで、構造のわかりやすさと保守性を保つことができます。
spanタグの中にspanタグは利用ができる
HTMLの仕様上、spanタグの中に別のspanタグを入れる入れ子構造は可能です。例えば、ある文字列に2つの異なる装飾を同時に適用したいときに使われます。
<span class="outer">外枠<span class="inner">内側だけ色を変える</span></span>
ただし、深い入れ子構造になると可読性が低下し、CSSのスタイル競合が起きる可能性もあります。特別な装飾が必要な場合を除いて、できるだけシンプルな構造にするのが望ましいです。
spanタグでPC・スマホのみの改行が可能
通常、spanタグはインライン要素なので、改行には向いていません。しかし、CSSと組み合わせることでPCとスマホで表示を切り替えながら改行を制御することが可能です。例えば、以下のようにCSSメディアクエリと組み合わせれば、表示デバイスによって改行の有無を切り替えることができます。
<span class="br-pc">PCでのみ改行</span>
<span class="br-sp">スマホでのみ改行</span>
.br-pc {
display: block;
}
.br-sp {
display: none;
}
@media screen and (max-width: 768px) {
.br-pc {
display: none;
}
.br-sp {
display: block;
}
}
この方法を使えば、スマートフォンとPCでレイアウトを調整しながらspanタグ内での改行も実現できます。
spanタグのまとめ
spanタグは、HTMLでテキストの一部にだけ装飾や機能を加えたいときに使用されるインライン要素です。
CSSと組み合わせることで、文字の色やサイズ、背景などの見た目を自由に調整でき、JavaScriptでの操作対象としても活用されます。pタグやdivタグとの違いを理解し、適切な使い方をすることで、コードの可読性や保守性も向上します。
また、複数利用や入れ子構造、デバイス別の改行など、柔軟なレイアウト調整にも対応できます。HTMLやCSSを使ったWeb制作において、spanタグはシンプルでありながら非常に応用の利くタグです。正しい使い方を押さえて、効果的なデザインや構造を実現しましょう。
