HTMLのソースコードを見ていると、<span>〜</span>といった記述を目にすることがあります。制作会社に作ってもらったホームページや、WordPressのテーマを触っているときに見かけても、何のためにあるのか分からないという方は少なくありません。
このページでは、spanタグの意味と役割から、その他のHTMLタグとの違い、実際の使い方までを解説します。
spanタグとは
spanタグは、HTMLにおけるインライン要素のひとつで、文章の中の特定の範囲を指定するためのタグです。タグ自体には見た目の変化や意味的な役割はなく、CSSやJavaScriptと組み合わせることで、指定した範囲に装飾や処理を適用できます。
spanタグがコードに出てくるのは、文章の一部だけを装飾の対象として指定する必要があるからです。ホームページのデザインはHTMLで構造を作り、CSSで見た目を整えるのが基本です。価格だけ赤字にしたい、キーワードだけ太字にしたいといった場面では、該当する文字をspanタグで囲み、そこにCSSでスタイルを指定します。
また、ボタンを押したときにテキストが変わるといったJavaScriptによる動的な処理の対象範囲を示す目的でも使われます。
コードの中でspanタグを見かけたときは、その範囲に何らかのスタイルや処理が適用されていると理解しておくと、コード全体の意図が把握しやすくなります。
spanタグとその他HTMLタグとの違い
spanタグと混同されやすいタグに、divタグとpタグがあります。それぞれ役割と扱う要素の種類が異なるため、違いを押さえておくと、コードが読みやすくなります。
divタグとの違い
spanタグとdivタグは、どちらも特定の範囲を指定するための汎用タグですが、扱う要素の種類が異なります。
divタグはブロック要素で、前後に改行が入り、ページのセクションやレイアウトの区切りとして使われます。一方、spanタグはインライン要素で、文章の流れを崩さずに文中の一部だけを指定できます。
大きな構造やレイアウトを組むときはdivタグ、文章の中の一部にだけスタイルを当てたいときはspanタグと使い分けるのが基本です。
pタグとの違い
pタグはparagraph（段落）の略で、文章のひとまとまりを段落として表すブロック要素です。段落全体に意味を持たせる役割があり、前後に改行が入ります。
spanタグは段落の中の一部に対してスタイルや処理を適用するためのタグで、文書の構造には影響を与えません。
pタグで段落を作り、その中の特定の文字にスタイルを当てたいときにspanタグを使うというのが、実際のコードでよく見られる組み合わせです。
spanタグの使い方
spanタグで文字を装飾するには、本来CSSファイルで設定を管理する方法が推奨されています。ただし、CSSの編集には専門知識が必要なため、ここではHTMLに直接記述するstyle属性を使った使い方を紹介します。
spanタグの記述方法
spanタグは、装飾したいテキストを<span>と</span>で囲んで使います。以下が基本的な書き方です。
<span style="プロパティ: 値;">テキスト</span>
style属性をspanタグに直接記述することで、CSSファイルを別途用意しなくてもHTMLだけで装飾が完結します。WordPressの投稿画面などでHTMLを直接編集できる環境であれば、このままコピーして使えます。
プロパティの部分に指定したい装飾の種類、値の部分に具体的な設定を入力します。複数の装飾を同時に適用したい場合は、セミコロンで区切って続けて記述できます。
<span style="color: red; font-size: 20px;">テキスト</span>
文字色を変える
文字色を変えるには、colorプロパティを使います。以下のように記述すると、spanタグで囲んだ部分だけ文字色が変わります。
<span style="color: red;">テキスト</span>
redの部分は色名のほか、#ff0000のようなカラーコードでも指定できます。
価格や重要なキーワードなど、特定の文字だけ目立たせたいときに使われます。ページ全体のデザインとのバランスを考えながら、使う箇所を絞って活用するのがポイントです。
背景色を変える
背景色を変えるには、background-colorプロパティを使います。以下のように記述すると、spanタグで囲んだテキストの背景だけに色がつきます。
<span style="background-color: yellow;">テキスト</span>
マーカーで線を引いたような見た目になるため、注意書きや強調したい箇所に使われます。多用するとページ全体が見づらくなるため、本当に目立たせたい箇所に絞って使うことが大切です。
文字サイズを変える
文字サイズを変えるには、font-sizeプロパティを使います。以下のように記述すると、spanタグで囲んだ部分だけ文字サイズが変わります。
<span style="font-size: 20px;">テキスト</span>
数値の単位はpxのほか、周囲の文字サイズに対する相対的な比率で指定するemも使えます。周囲との差が大きすぎると読みにくくなるため、前後のテキストとのバランスを確認しながら調整してください。
文字に下線を引く
文字に下線を引くには、text-decorationプロパティにunderlineを指定します。以下のように記述すると、spanタグで囲んだ部分に下線が引かれます。
<span style="text-decoration: underline;">テキスト</span>
WebページではリンクにもHTMLタグで下線が引かれるケースがあるため、リンクではない箇所に下線を使うとユーザーが混乱することがあります。リンクと区別できるよう、色や太字と組み合わせて使うことが推奨されます。
spanタグに関するよくある質問
spanタグを使う中でよく寄せられる疑問をまとめました。
1文の中にspanタグが複数回出てきてますが問題ありませんか？
問題ありません。
1文の中に複数のspanタグを使うことは一般的で、HTMLの仕様上も問題ない記述です。たとえば、文章の中で価格とキーワードをそれぞれ別の色で目立たせたい場合など、装飾したい箇所ごとにspanタグを使います。
ただし、必要以上に細かく分割するとコードが読みにくくなるため、装飾が必要な範囲に絞って使うことが大切です。
spanタグの中にspanタグが入っていますが問題ありませんか？
問題ありません。
spanタグの中に別のspanタグを入れる入れ子構造はHTMLの仕様上、有効な記述です。ある文字列に複数の装飾を同時に適用したい場合などに使われます。ただし、入れ子が深くなるとコードが複雑になり、意図しないスタイルの競合が起きることもあります。
特別な理由がない限り、シンプルな構造にしておくことが推奨されます。
PCだけ・スマホだけ改行する時のspanタグの使い方を教えてください
spanタグにclass属性を指定し、CSSのメディアクエリと組み合わせることで、PCとスマホで改行の有無を切り替えられます。
PCだけ改行したい場合の記述例です。
HTML
テキスト<span class="br-pc"></span>テキスト
CSS
.br-pc { display: block; }
@media screen and (max-width: 768px) {
.br-pc { display: none; }
}
スマホだけ改行したい場合の記述例です。
HTML
テキスト<span class="br-sp"></span>テキスト
CSS
.br-sp { display: none; }
@media screen and (max-width: 768px) {
.br-sp { display: block; }
}
ただしこの方法はCSSの編集が必要なため、対応が難しい場合は制作会社に依頼することをおすすめします。
使い方のコード例を参考にしても反映されません
まず、記述したコードが正しく保存されているかを確認してください。WordPressの場合、ビジュアルモードで編集するとspanタグが自動的に削除されることがあります。HTMLモードで記述し、保存後もタグが残っているかを確認してください。
コードが正しく残っているにもかかわらず反映されない場合は、ホームページのデザイン設定が影響している可能性があります。その場合は制作会社に相談することをおすすめします。
まとめ
spanタグは、HTMLコードの中で文章の一部に装飾や処理を適用するための範囲を指定するタグです。タグ自体には意味や見た目の変化はなく、style属性やCSSと組み合わせることで初めて機能します。
divタグやpタグとの違いはインライン要素である点で、文章の流れを崩さずに一部だけを装飾できるのが特徴です。文字色・背景色・文字サイズ・下線など、ページ内で目立たせたい箇所に絞って活用することで、読者にとって見やすいページ作りに役立てることができます。
