spanタグの文字色や背景色を変更する方法を紹介!

spanタグの文字色や背景色を変更する方法を紹介します。spanタグはアクセントを加えるためテキストの一部分のみにcolorプロパティを適用する際などに使われます。今回はspanタグにcolorプロパティなどのスタイルを適用する方法を解説します。

コンテンツ [表示]

  1. 1spanタグの文字色や背景色を変更する方法
  2. 1.1文字色を変更する
  3. 1.2背景色を変更する
  4. 1.3スタイルを複数設定する
  5. 2まとめ

サイト制作において、このようにテキストの一部分のみに特別なスタイルを適用したい場合はspanタグを使います。

もちろんCSSでspanタグにスタイルを適用することもできますが、HTMLのspanタグを見つけるたびにCSSでどのようなスタイルが適用されるか確認しなければいけません。

そこでspanタグでワンポイントで変更する際にはstyle属性で指定するのがおすすめです。

spanタグの文字色や背景色を変更する方法

style属性の中は普段のCSSと同じように記述することができます。

文字色を変更する

まずspanタグの要素の文字色を変更する方法を解説します。

文字の色を変更するにはcolorプロパティです。

以下のサンプルコードでご覧ください。

背景色を変更する

次にspanタグの要素の背景色を変更する方法を解説します。

文字の色を変更するにはbackground-colorプロパティです。

以下のサンプルコードでご覧ください。

スタイルを複数設定する

例えばワンポイントで文字色も背景色も変更したいなど複数の変更をしたい場合、以下のように記述します。



 

spanタグ

<p>こちらのテキストの<span style="color:white; background-color: blue;">spanタグ</span>のみスタイルが変更されています。</p>

しかし、その場合HTMLの中身が長くなり、本来のテキストと見分けが付きづらくなってしまいます。

このような場合は、クラス名をつけてCSSで記述するのが良いでしょう。

まとめ

spanタグの文字色や背景色を変更する方法を紹介しました。普段のCSSの通り記述できることが確認できたと思います。

またHTML/CSSで色の指定については今回使ったキーワードの指定の他にもカラーコードやRGBやHSLなど様々な指定方法があります。ぜひ下記を参考も参考にしてみて下さい。

あわせて読みたい
CSSの色の指定方法をサンプルコード付き解説!のイメージ
CSSの色の指定方法をサンプルコード付き解説!
CSSの色の指定方法は「キーワード」「カラーコード」「RGB」「HSL」など複数あります。それぞれの色の指定の仕方についてサンプルコード付きで解説します。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。