こんにちは。いぬのてです。
本記事ではCSSのプロパティー「color」についてご紹介します。
CSSのプロパティー一覧は以下の記事にて紹介しております。
また、cssってなに？プロパティーってなに？という疑問を抱いた方は以下のCSS入門記事をご覧ください。
colorプロパティーは
- 文字色の設定をします。
- 適応要素はすべての要素です。
- 親要素に指定した場合、子要素にも反映されます。
color 使い方
色の指定の仕方は3種類あります。
# + 6桁
色にはカラーコードと呼ばれるものがあります。
これはかっこよく言うとコードネームのようなものです。
カラーコードは、0.1.2.3.4.5.6.7.8.9.A.B.C.D.E.Fの組み合わせ
つまり，16進数によって成り立っています。
全部の色を覚えるのは不可能なので、よく使う色だけ覚えておくといいでしょう。
- 黒 – 000000
- 白 – FFFFFF
- 赤 – FF0000
- 青 – 0000FF
- 黄 – FFFF00
- 緑 – 00FF00
上記のように色には、コードが決まっていますが、丸暗記する必要はありません。
覚えている人は極少数でしょう。
しかし、カラーコードには法則がありますので、手探りで自分好みの色を見つけることができるかもしれません。
気になる人は以下の記事をご覧ください。
準備中
色名（英語）
CSSというのは優秀で、色を普通に指定することで、使えます。
赤ならred、青ならblue 、と指定できます。
lightblueなどといった、淡い青とかも指定することができます。
英語の勉強になったりしますが、英単語だけをみた時に、どのような色か、想像しにくい単語もありますので、注意が必要です。
rgb(0~255, 0~255 , 0~255 ） もしくは rgba( 0~255 , 0~255 , 0~255 ,0~1)
rgbaというのはred,green,blue,αの頭文字で構成されています。
rgbは上記のαがないバージョンです。
色というのは、赤・緑・青の３つから構成されています。
黄色は赤と緑、紫は赤と青のように、この三つの色を細かな配分で合わせることで、全ての色が成り立っています。
これを色の三原色といいます。
美術の授業で習いましたね。
もっと詳しく知りたい方は別途調べてみてください。
上記のように赤、緑、青を意味する
rgb(255,255,255)のように組み合わせることで色を指定できます。
ちなみにこれは黒です。
さらにrgbaでは、αの部分で透明度を指定できます。
aが０なら透明度０、１なら透明度MAXで、実質色なしです。
rgba(255,255,255,0.8)にすると透明度の高い黒色になります。
hsl(0~360,0~100%,0~100%) もしくは hsla(0~360,0~100%,0~100%,0~1)
あまり知られていませんが、hsl()という色指定の方法もあります。
hue:色相、saturation:彩度、lightness:輝度の３つで指定します。
rgba()と同様に、透明度であるαを加えた、hsla()もあります。
色相
色相というのは、色の相関図でも使われる。
円状のものです。
0と360が赤色で以下の画像のように、角度で色を指定します。
仮に500と指定すると、500-360＝140の値の色が適応されます。
彩度
彩度は100%が純正の色で、0%が灰色です。
0%に近づくほど、灰色が混ざった感じの色になります。
輝度
輝度は、50%が純色です。
間違えないように気をつけてください。
0%が黒で、100%が白です。
50%を基準に、黒に近づく、もしくは、白に近づく色になります。
グラデーション
文字色の指定は単色じゃなく、グラデーションを使うこともできます。
グラデーションを使用するとこのような文字を作成できます！
グラデーションの使い方は、以下の記事でまとめています。
注意点
文字色を設定する時は、背景色はにも注意しましょう。
背景色と文字色が似ている色であれば、せっかく色をつけたのにインパクトがなくなってしまいます。
