cssを構築する際にほぼ必ずと言っていいほど使うbackgroundプロパティ。

backgrondに関わらず1つのプロパティで複数の設定を持つタイプのものは 結構初心者殺しなんじゃないかなと思います。

今回はbackground-colorの書き方をご紹介します。

background-colorの指定方法について

backgroundは背景色、背景画像URL、繰り返し、位置と設定することが出来ます。

CSS3からは画像のサイズだったり設定できる項目が増えました。

もちろん1つ1つ個別に設定することも可能です。

現在あるbackgroundのプロパティ一覧です。

この中でもよく使うのが

この5つかなと思います。

そしてカラーとイメージに関しては基本両方併用しないかなと思います。

画像が透過していれば背景色を有効活用できますが、 それなら画像を作る時点で色を付けておけばいいかなと思います。

今回はbackground-colorに焦点を当てて説明していきます。

16進数指定

基本中の基本のbackgroundの使い方です。

主にカラーを設定出来ますが、16進数のカラーコードを指定することが基本となります。

background-color:#ffcc00;

上記はオレンジぽい感じの色合いになります。

16進数に慣れていない人に説明すると、#は16進数を使うときに頭につける文字と覚えておくと良いでしょう。

次にFF、cc、00となっていますが、これは２つで１組となります。

16進数は0～Fの16種類の数字を1桁で表すことが出来ます。

それが2桁あるということは16x16という意味合いになり256パターンの指定方法が存在するということになりますね。

0が暗く255が明るいという感じになります。

すべてが0だと真っ暗。すべてが255（16進数だとFF）なら真っ白ということになります。

それではffcc00の場合は、赤の部分がffとなっているので真っ赤な状態です。

次に緑の部分であるccは真緑ではなくちょっとだけ暗くなっています。

そして青の部分である00は完全に真っ暗な状態なので青の色味が出ていないということでもありますね。

赤と緑を混ぜると黄色になるのですが、緑の値がMAXから少し下がっている状態で混ぜているので 赤みが強い黄色ということでオレンジぽい色合いという意味になるわけですね。

慣れてくるまではカラーピッカー等を作って好きな色を選択して出てくるカラーコードをそのままコピペで大丈夫です。

慣れてくると頭の中でカラーピッカーを構築することができて 数字で色を管理できるようになれば作業効率もかなり上がりますが、 おそらくデザイナーでなければ基本的に指定された色を使うので デザイナーでなければコピペで十分だなと思います。

RGB指定

カラーを16進数で指定するのが基本ではありますが、 もちろん0~255の10進数で指定することも可能です。

その時は以下のような指定方法になります。

background-color:rgb(255,0,255);

上記の場合は赤と青が255でMAXなので紫になるということになります。

RGBA指定

そしてもう一つ指定する方法としてアルファ値、つまり透明の度合いを指定することも可能です。

background-color:rgba(255,0,255,.5);

rgbaにすると青の指定の後に透明度を指定することが出来ます。

透明はアルファなのでRGBAというわけですね。

そしてちょっと癖があるのが、RGBは0~255なのに対してアルファ値は 0.0～1.0という範囲の指定になります。

そして記法として「.5」となっているのは「0.5」ということと同じ意味になります。

CSSでは小数点になる場合、「0.5」の「0」部分を省略することが出来ます。

transitionの速度でも速度を小数点で指定することができるのですが、 同じように0を省略可能なのを覚えておくと良いでしょう。

ただ、個人的にはちゃんと0もつけて書いておいたほうが誰もがわかりやすくていいかなと思います。

0を省略するのはCSSのみをやっている人ぐらいかなと思います。

余談として16進数の指定方法でもアルファ値を設定することが出来ます。

background-color:#ffffff00;

上記は白背景ですがその後を00にしているため結局透明になっているというわけですね。

16進数の桁を1つ増やすことでアルファ値の指定ができます。

rgbaと違って同じ16進数で指定できますが、 慣れていない人はぱっと見てなにがなんだかわからないので 透明色を使うときはrgbaをオススメします。

16進数で透明を書く必要はないですが、書き方を知っているのと知らないのとでは決定的な差が出てしまいます。

もし誰かが16進数で透明色を使ってたら知らなければ意味がわからないからですね。

意味を知っていればどうなっているのかが理解できるためスムーズに仕事が進みます。

HLS、HLSA指定について

RGBの他にHLSという指定方法も可能です。

これは色相(Hue)、彩度(Saturation)、輝度（Lightness）で指定する方法です。

正直カラーの指定方法はこちらのほうが使いやすいっちゃ使いやすいのですが、 CSS界隈においてRGBで使っている人の方が圧倒的に多いので 共同開発なんかをするときはできる限りRGBでやったほうが良いなと思います。

私もあまりCSSではこの指定方法を使わないので今回は省略します。

transparent指定

最後に特殊な指定方法として「transparent」というものがあります。

これは透明という意味合いになっていていわゆるrgba(0,0,0,0.0)と同じ意味になります。

もしtransition等で色の変化アニメーションをしたい場合は rgbaで透明指定をするほうがいいでしょう。

そしてtransparentを使う時は正直あまりないかなと思います。

昔は脳死でbackground:transparent url～と打っていたのですが、 backgroundはデフォルトでtransparentになっているため指定する必要はないかなと思います。

backgroundでまとめて指定する際も省略可能です。

もし誰かが先にカラーを指定してた場合、transparentにしたいなってときに上書きで指定するぐらいでしょう。