文字色と背景色のプロパティ

文字色のプロパティ

【構文】color: 色名または色コード;

文字色を指定するプロパティはcolorプロパティです。フォントに関するプロパティですが、「font-color」ではないので注意しましょう。

See the Pen
2-7_1
by Koji Seto (@yseseto)
on CodePen.

背景色のプロパティ

【構文】 background-color: 色名または色コード;

背景色はbackground-colorプロパティで指定します。色の指定方法は文字色と同様です。

See the Pen
2-7_2
by Koji Seto (@yseseto)
on CodePen.

色の指定方法

【構文】

ColorName (カラーネーム)

#RRGGBB / #RGB (16進コード)

rgb(Red, Green, Blue) / rgba(Red, Green, Blue, Alpha) (10進コード)

カラーネームによる指定は、色名を英語で指定する方法です。たくさんありますので、気になる人は調べてみてください。

16進数によるコード指定は、最もよく使われる方法です。16進数(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) 2桁ずつ、合計6桁で光の3原色の赤、緑、青の値を指定する方法となります。

各色256段階の指定ができるため、約1,677万色の指定ができますが、特に(00, 33, 66, 99, CC, FF)のみを使用したコードを「Webセーフカラー」と呼び、かつてモニタの表示できる色数が少なかった時代に、安全に使用できる色としてこう呼ばれていました。大まかな色指定をしたい場合にはこのWebセーフカラー216色がよく使われます。また省略して各色16進数1桁ずつの計3桁でも指定できます。

最後に10進数によるコード指定ですが、10進数(0〜255)をカンマで区切って指定します。考え方は16進数と同じですが、rgba()は最後に不透明度(アルファ)を0〜1の範囲で指定できます(0は0%、1は100%)。半透明色で塗りつぶしたいときに使用します。

See the Pen
2-7_3
by Koji Seto (@yseseto)
on CodePen.