たった1行で文字をカラフルに！CSSプロパティ「color」の使い方

やぁ。私以外私じゃないの？どうもユトピ(@yutopi60pa)です。
 

皆さんいかがお過ごしですか？
僕は最近たまごパンにはまっています。
あの鮮やかな黄色とまろやかな舌触りがたまらなく美味しい。美味であるぞ。
 

ですがこの鮮やかな黄色って本当に天然の色なのかな？やっぱり着色料使っているのかな？
CSSみたいに・・・。
 
CSSみたいに・・・。
 
 
 
 
 
 
 
 
ということで今回は文字の色を変えることができるCSSプロパティの「color」の解説をしていきます！
 
 

colorとは？

 
CSSプロパティのcolorとは文字の色を変えることができるプロパティです。
文字の色を赤にしたり、青にしたり、よくわからない色にしたりと色の幅は非常に多いです。
ブログなどの文章を書くときには文字色つけるて強調することは多く行われていますよね。
 

ここで注意なのですが、勘違いで文字の色を指定する際に「font-color」や「text-color」なんていうプロパティを指定してしまう人がいるのですが、このようなプロパティは存在しません。
colorという名前だけで、文字の色を指定するプロパティだと想像はつきにくいですが、ここは注意してくださいね。

さて、その指定方法についてみていきましょう！

• カラーネーム・・・redやblueなどの色の名前で指定
• 16進数のカラーコード・・・#ffffffや#e9e9e9などのカラーコードで指定。3桁も可能/li>
• rgb・・・R、G、Bの各色の濃さを0～255で指定
• rgba・・・R、G、Bに加えて、透明度のalphaを0～1までの小数点に数値で指定

このようにcolorプロパティに色を指定できます。
最後のrgbaは色だけでなく透明度も指定できますので、表現の幅が広がりますね！
 
 

色の指定方法については詳しく記事にまとめましたので、そちらも参考にしてください。
 

・CSSでの色を指定する3つの方法【お母さんにもできるCSS入門】

それでは早速やってみましょう！