background-svg

background-colorについて

background-colorは背景色を指定するプロパティです。
次のように書きます。ピンク色のところが色を指定するコードです。色の指定方法は色々あるのでいくつか書いてみます。

background-color:#ffc0cb;

background-color:rgb(255,192,203);

background-color:pink;

background-color:hsl(349,100%,87%);

これで背景色を指定することができます。フォントの色と相談して視認性に問題のない色を選ぶのが基本です。
またbackground-colorの初期値はtransparent(透明)となっています。


代表的な色の指定方法をちょっと説明します。

1、RGBカラー
光の三原色である赤(Red)、緑(Green)、青(Blue)の値を指定して色を決定します。赤、緑、青はそれぞれ0~255の範囲で値を取ることができるので、256の3乗で16,777,216色もの色を表現できます。
コードは「#」で始まり、赤、緑、青の値をそれぞれ2桁の16進数に変換してくっつけて書きます。例えば「#ffc0cb」は、赤の値が「ff(255)」、緑の値が「c0(192)」、青の値が「cb(203)」ということです(※カッコ内は10進数の値)。
説明として「#rrggbb」とも書かれることもあります。「#rrggbb」ということです。赤緑青をすべて同じ値にすることでグレースケールを表現できるという性質があります。
また「rgb(255,192,203)」と10進数で書く方法もあります。
16進数での記法は赤、緑、青それぞれの値がゾロ目である際に記述をより簡易にすることができます。例えば「#aaccee」は「#ace」と記載してもOKです。
2、有名色
英語で書くとNamedColorです。特定のRGBコードには名前が付けられており、それをコードの代わりに利用できます。例えば「#ffc0cb」には「pink」という名前が付いているので「pink」と記述し「#ffc0cb」を指定することができます。
どんな色名があるかはこのページを見てください。
有名色ですがdarkgrayがgrayより明るめだったり、indianredとか時代にそぐわないネーミングだったり、papayawhipとかどんな色なのか直感的に分かり辛いとか色々批判があります。よく使う色だけ覚えるといいでしょう。
余談となりますが、rebeccapurpleはcssカラーモジュールレベル4で唯一追加された有名色です。この導入背景がちょっといい話でした(賛否はあるみたいですが)。よかったら調べてみてください。
3、HSLカラー
RGBより直感的に色を指定できる、という売り文句の色指定方法です。色相(Hue)、彩度(Saturation)、明度(Lightness)を順にhsl()関数内で指定します。
例えば赤は「hsl(0,100%,50%)」と記述します。色相(Hue)は角度であり0が赤で360で一回りの色相環を意味します。彩度(Saturation)は鮮やかさであり、100%で純色、0%でグレースケールになります。明度(Lightness)は100%で白となり0%で黒になります。
色相を固定して、彩度と明度だけ変更すればモノトーンのカラーバリエーションを作れます。直感的言われることもあってカラーピッカーを自作したい人HSLで指定出来るように作ってみると使いやすいものができるかもしれません。
4、不透明度
rgb()とhsl()では色に透過情報を追加できます。関数名をrgba()とhsla()とし、4つ目の値に不当明度を追加します。ちなみにaはalphaの意味でアルファチェンネルを意味します。
「rgba(255,192,203,70%)」で不当明度70%のピンク、「hsla(0,100%,50%,50%)」で不当明度50%の赤を意味します。