spanタグの文字色や背景色を変更する方法を紹介！
spanタグの文字色や背景色を変更する方法を紹介します。spanタグはアクセントを加えるためテキストの一部分のみにcolorプロパティを適用する際などに使われます。今回はspanタグにcolorプロパティなどのスタイルを適用する方法を解説します。
サイト制作において、このようにテキストの一部分のみに特別なスタイルを適用したい場合は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など様々な指定方法があります。ぜひ下記を参考も参考にしてみて下さい。
無料
【7月31日まで】全カリキュラム無料で提供中！
Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。
無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！
