CSS
色指定の4つの方法
- 定義されたカラーキーワードを指定する
- 「# + 6桁のカラーコード」で指定する
- rgbで指定
- HSLという形で指定
定義されたカラーキーワードを指定する
17種類とバリエーションは少ないですが、
black, red , greenなど普段馴染みがある言葉で指定できるためとてもあつかいやすいです。
「# + 6桁のカラーコード」で指定する
カラーコードは0~9、a~fで設定されています。
これは0が最も色が薄く、fが最も色が濃いという意味です。
6桁のうち最初の2桁は赤、真ん中の2桁は緑、最後の2桁は青のそれぞれの色の強さを表します。
つまり、光の3原色である赤、青、緑の強度で色を表すわけです。
例えば赤を表示させる場合は右のようになります。
rgbで指定
rgbとはRed、Green、Blueの頭文字を取ったもので、0から255までの数字で指定します。
例えば赤色にしたい場合はこのように指定することができます。
また、透明度(Alpha)を指定することもできます。
その場合はrgbにAlphaというものを加えて、右のように指定します。
透明度を加えるとこのような結果になります
！注意 ！
Alphaの指定方法について 透明度(Alpha)の値は0~1の間で設定するので注意してください
HSLという形で指定
HSLとはHue(色相)、Saturation(彩度)、Lightness(輝度)の3つを指定する方法です。
「hsl( 207, 100%, 86%);」のように指定することができます。
基本的には2つ目の「#+6桁のカラーコード」が使われます。
ただ、カラーコードは覚えなくても構いません
例えば「色 css」と調べてあげたりすると、カラーコードの一覧が出てくるようになっています。
そのため、書き方だけはしっかり押さえておきましょう
