プロパティ:color | 全国個人事業主支援協会

COLUMN コラム

プロパティ:color

今回は、前回のまとめ記事からプロパティを1つずつ紹介していきたいと思います！

まず今回紹介するのはこちら↓

「color」

colorは、文字の色を指定するプロパティです。

色の値については、「red」などの色の名前やrgb関数、「#000000」のような16進数のカラーコードで指定しますが、HTMLと同じ指定方法と、CSS独自の指定方法があります。

HTMLと同じ指定方法

#ff0000	ハッシュ（ # ）で始まる6桁のカラーコードで指定
red	redやgreen、whiteといったカラーネームで指定

.test1 { color: #ff0000; }

.test2 { color: red; }

CSS独自の指定方法

. test 3 { color: #f00; }

. test 4 { color: rgb(255,0,0); }

. test 5 { color: rgb(100%,0%,0%); }

ハッシュ（ # ）で始まる3桁のカラーコードで指定

#fff

1桁目が赤、2桁目が緑、3桁目が青を意味しています。この指定方法では、それぞれの色の強さを 0～ f までの16進数で指定します。

0 に近いほどその色は弱くなり、f に近いほどその色が強調されます。

rgb( ) による指定（0～255）

rgb(255,255,255)

( ) の中に、赤、緑、青の各値をカンマ（ , ）で区切って記述します。この指定方法では、それぞれの色の強さを 0 ～ 255 までの数値で指定します。

0 に近いほどその色は弱くなり、255 に近いほどその色が強調されます。

rgb( ) による指定（0%～100%）

rgb(100%,100%,100%)

( ) の中に、赤、緑、青の各値をカンマ（ , ）で区切って記述します。この指定方法では、それぞれの色の強さを 0% ～ 100% までの割合で指定します。

0% に近いほどその色は弱くなり、100% に近いほどその色が強調されます。