ホーム(記事一覧)へ

CSSで文字色を一部変える方法

文章を書いていて一部注目させたいワードを赤字にしたい!ってときありますよね。

そんなときに使える「CSSで文字色を一部変える方法」を説明します。

結論

spanタグで囲ってCSSのcolorを指定しましょう。

例)これは赤いリンゴです。
例)これは<span style="color:red;">赤い</span>リンゴです。

spanは文章の一部を装飾するタグ

文字の一部の色を変える、太字にする、下線を引くなど装飾する際はインライン要素であるspanタグで囲ってCSS指定します。

fontタグは使ってはいけない

一昔前なら以下のようにして文字色を一部変えていました。

例)これは<font color="red">赤い</font>リンゴです。

しかしこのfontタグ、現在周流となっているhtml5では非推奨、つまり使うな!とされています。装飾は全部CSSでやっていきましょう。ということです。

たまにfontタグでの変更方法を載せたサイトもありますが、古い情報です。

せっかくCSS3やhtml5を覚えるんですから新しいやり方でいきましょう。

まとめ

CSSで文字色を一部変えるにはspanタグで囲ってCSSのcolorを指定しましょう。

関連記事