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

2020年03月03日

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

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

結論

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

例）これは赤いリンゴです。

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

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

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

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

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

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

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。