HTMLのspanタグとは？初心者向け使い方ガイド

HTMLの<span>タグを使うと、Webページや段落の一部にスタイルを適用できます。段落内のテキストを装飾する、たとえば特定の単語の色を変更するといった用途でよく使われます。<span>タグ自体は、デフォルトでは何のスタイルも持ちません。

HTMLでコーディングをしていると、Webページ上の特定の部分だけにスタイルを適用したくなることがあります。たとえば、文中の特定の単語を強調したい、リンクリストの中の特定のリンクだけを目立たせたい、といったケースです。

そんなときに役立つのがHTMLの<span>タグです。<span>は汎用的なインラインコンテナで、Webドキュメント内のフレージングコンテンツをグループ化するために使われます。<span>タグは主にスタイリングの目的、とりわけテキストの装飾のために広く利用されています。

このチュートリアルでは、具体例を交えながら、HTMLの<span>タグを使ってWebページの要素にスタイルを適用する方法を解説します。読み終える頃には、<span>タグを自信を持って使いこなせるようになっているはずです。

HTMLの<span>タグの基本

HTMLの<span>タグは、Webページの一部を操作するために使われます。多くの場合、<p>要素の中で使用され、段落の特定の部分にスタイルを適用します。たとえば、<span>を使えば段落内の単語の色を変更できます。

<span>タグ単体には、デフォルトのレンダリングや値がありません。つまり、属性を何も指定せずにこのタグを使っても、Webページの表示には一切影響しません。

<span>タグは、CSSと組み合わせて、Webページ上の特定の要素にスタイルを適用するためによく使われます。<span>を使えば、複数の要素にまとめて同じスタイルを適用することも簡単になります。

HTMLの<span>タグの書き方（構文）

HTMLの<span>タグには、開始タグ（<span>）と終了タグ（</span>）があります。基本的な構文は次のとおりです。

<span></span>

HTMLの<span>タグには、タグ固有の属性はありません。たとえば、<img>タグには「height」や「width」といった固有の属性がありますが、<span>にはそのような属性は存在しません。スタイリングはCSSに任せているためです。なお、<span>タグはすべてのグローバルHTML属性をサポートしています。

<span>タグは<div>タグに似ていると考えると分かりやすいでしょう。どちらも、それ自体には固有のスタイルを持ちません。ただし、<div>はブロック要素であるため、テキストのセクションやブロックを定義するために使われます。一方、<span>は段落など、ドキュメントの特定の部分にスタイルを適用するために使われます。

それでは次のセクションで、HTMLにおける<span>タグの動作を示す具体例をいくつか見ていきましょう。

<span>タグのHTML使用例

<span>タグを使ってHTMLのインライン要素にスタイルを適用するコード例を紹介します。最初の例では段落内で<span>タグを使用し、2つ目の例ではリスト内で使用します。

段落内で<span>を使う例

たとえば、地元のベーカリー「Pringle and Sons Bakery」のWebページをデザインしているとしましょう。このページではベーカリーの歴史を紹介します。オーナーのPringle氏から、重要な情報を赤いテキストで強調してほしいと依頼されました。

このタスクは、次のようなコードで実現できます。

index.html

<p>Pringle and Sons Bakeryは、インディアナ州オークブリッジのコミュニティに欠かせない存在です。1975年にJames Pringleが創業したこのベーカリーは、オークブリッジ地域に<span class="redText">おいしい焼き菓子</span>とコーヒーを提供しています。創業以来、<span class="redText">何千人</span>ものお客様にご利用いただいてきました。</p>

styles.css

.redText {
color: red;
}

このコードの表示結果は次のとおりです。

この例では、「おいしい焼き菓子」と「何千人」という語を強調しました。Pringle氏いわく、これらの語は特に重要なため、赤色で表示するよう指示されました。

まず、<p>タグで囲まれたテキストを定義しました。このテキストはPringle and Sons Bakeryの歴史を紹介するものです。そのうえで、赤色で表示したい語を<span>タグで囲みました。

CSSファイルでは、redTextクラスが割り当てられた要素の文字色を赤にするよう指定しました。これにより、<span class="redText">タグを使うと、テキストの色を赤に変更できます。

このケースで<span>タグが便利なのは、テキスト内の特定の単語だけを強調できたからです。<p>タグ自体に赤いテキストのスタイルを適用することも可能ですが、その場合は段落全体が赤いテキストになってしまいます。

リスト内で<span>を使う例

次に、Pringle and Sons Bakeryから、ソーシャルメディアページへのリンクをリスト形式でWebサイトに追加してほしいと依頼されたとしましょう。

ベーカリー側によると、TwitterとFacebookのページへのリンクは特に重要です。チームが最も活発に活動しているプラットフォームだからです。そこで、これらのリンクを水色で強調表示してほしいとのことでした。

このタスクは、次のようなコードで実現できます。

index.html

<ul>
	<li><span class="blue"><a href="twitter.com">Twitter</a></span></li>
	<li><span class="blue"><a href="facebook.com">Facebook</a></span></li>
	<li><a href="instagram.com">Instagram</a></li>
</ul>

styles.css

.blue {
	background: lightblue;
}

このコードの表示結果は次のとおりです。

HTMLコードでは、<ul>タグを使って順序なしリストを作成しました。このリストには3つの項目があり、それぞれが<li>タグで囲まれています。

TwitterとFacebookのリスト項目は、HTMLのspanタグ（<span class="blue">と</span>）で囲まれています。各リスト項目の開始spanタグにはclass属性が指定されており、その値は「blue」です。

さらに、.blueというスタイルを定義しました。これは、適用先の要素の背景色を水色（ライトブルー）に変更するものです。その結果、HTMLコード内でCSSクラス.blueを持つすべてのリンクの背景色が水色に変わりました。

Instagramリンクの背景色が変わらなかったのは、そのリンクのテキストを<span>タグで囲まなかったためです。

まとめ

HTMLの<span>タグは、HTMLページ上の特定の要素にスタイルを適用するための汎用コンテナです。デフォルトでは<span>タグは何も行いませんが、CSSと組み合わせることで、要素に自由にスタイルを適用できます。

練習課題として、文中の単語をすべて大文字で表示する<span>タグを定義してみましょう。テキストを大文字に変換するには、<span>タグと組み合わせてCSSルールを使用する必要があります。

このチュートリアルでは、具体例を交えながら、HTMLの<span>タグの使い方を解説しました。これであなたも、プロのWeb開発者のように<span>タグを使い始める準備が整いました。HTMLの学習方法についてのガイダンスが必要な場合は、「HTMLの学び方」ガイドもぜひ参考にしてください。