犬の手も借りたいあなたに最適な記事を届けます

【CSS】 詳細No.1!colorプロパティーの使い方完全網羅

こんにちは。いぬのてです。

本記事ではCSSのプロパティー「color」についてご紹介します。

CSSのプロパティー一覧は以下の記事にて紹介しております。

また、cssってなに?プロパティーってなに?という疑問を抱いた方は以下のCSS入門記事をご覧ください。

color

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は上記のαがないバージョンです。


色というのは、の3つから構成されています。

黄色のように、この三つの色を細かな配分で合わせることで、全ての色が成り立っています。

これを色の三原色といいます。

美術の授業で習いましたね。

もっと詳しく知りたい方は別途調べてみてください。

上記のように赤、緑、青を意味する

rgb(255,255,255)のように組み合わせることで色を指定できます。

ちなみにこれは黒です。

さらにrgbaでは、αの部分で透明度を指定できます。

aが0なら透明度0、1なら透明度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:輝度の3つで指定します。

rgba()と同様に、透明度であるαを加えた、hsla()もあります。

色相

色相というのは、色の相関図でも使われる。

円状のものです。

0と360が赤色で以下の画像のように、角度で色を指定します。

仮に500と指定すると、500-360=140の値の色が適応されます。

彩度

彩度は100%が純正の色で、0%が灰色です。

0%に近づくほど、灰色が混ざった感じの色になります。

輝度

輝度は、50%が純色です。

間違えないように気をつけてください。

0%が黒で、100%が白です。

50%を基準に、黒に近づく、もしくは、白に近づく色になります。

スポンサーリンク

グラデーション

文字色の指定は単色じゃなく、グラデーションを使うこともできます。

グラデーションを使用するとこのような文字を作成できます!

グラデーションの使い方は、以下の記事でまとめています。

注意点

文字色を設定する時は、背景色はにも注意しましょう。

背景色と文字色が似ている色であれば、せっかく色をつけたのにインパクトがなくなってしまいます。