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

a1504a71fc1c193e851481aef2fcb209_s

やぁ。私以外私じゃないの?どうもユトピ(@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入門】

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

colorプロパティを使ってみよう!

カラーネームで指定

コード

結果

#moji1 文字が緑になったぞ!文字が緑になったぞ!文字が緑になったぞ!文字が緑になったぞ!文字が緑になったぞ!文字が緑になったぞ!文字が緑になったぞ!文字が緑になったぞ!

16進数のカラーコードで指定

コード

結果

#moji2 文字が#EDA1A1色になったぞ!文字が#EDA1A1色になったぞ!文字が#EDA1A1色になったぞ!文字が#EDA1A1色になったぞ!文字が#EDA1A1色になったぞ!文字が#EDA1A1色になったぞ!

rgbで指定

コード

結果

#moji3 文字がrgb(0,54,190)色になった!文字がrgb(0,54,190)色になった!文字がrgb(0,54,190)色になった!文字がrgb(0,54,190)色になった!文字がrgb(0,54,190)色になった!文字がrgb(0,54,190)色になった!

rgbaで指定

コード

結果

#moji4 文字が薄い赤になった!文字が薄い赤になった!文字が薄い赤になった!文字が薄い赤になった!文字が薄い赤になった!文字が薄い赤になった!文字が薄い赤になった!文字が薄い赤になった!

このようにcolorを使用すれば文字の色を好きなように変更することができるようになります。
一番下の文字の色は真っ赤な色を指定したのですが、透明度でだいぶ薄くしたので、ピンクみたいな色になっていますね。


fontタグのcolor属性との違いは?


HTMLタグにはテキスト装飾ができる属性のある「fontタグ」というものがあります。
fontタグの属性には文字色を指定できる「color属性」というものがあり、この属性とCSSのプロパティ何が違うの?という風に疑問を持つ人もいると思います。

ぶっちゃけますと同じです。
文字の色を変えるという面では同じ機能なので、差はないです。

しかし!残念ながらfontタグとその属性はいま現在、非推奨となっています。ということは使わない方が良いということです。
非推奨のタグになりますと、将来的に機能しなくなる可能性があります。そうなると表示が崩れたりしますよね。

こういった理由からfontタグのは使わないでくださいね。
CSSにはほかにもfont-sizefont-familyなどのfontタグの機能を代替できるプロパティがありますので、そちらを使うようにしていきましょう。


まとめ


colorはさっくりと色の指定をすることができますし、idやclassを上手く使えば個性的なレイアウトをすることができますよ。
あまり難しいプロパティではないので、ぜひマスターしておきましょう!

あとfontタグは使わないようにね!!