HTML&CSSコーディング
背景に色をつける

要素の背景に色をつけるにはbackground-colorプロパティを使用します。

ここではbackground-colorプロパティについて、その値の取り方を中心にわかりやすく解説します。

背景色を指定するbackground-color

background-colorは、要素の背景色を指定するプロパティです。値はカラーネーム、カラーコード、RGB（Red, Green, Blue）などで指定します。実際には、カラーコードを使用することが多い印象です。

※下記の例ではわかりやすくするためpaddingも設定しています。

カラーネームで指定

カラーコード（16進数）で指定

RGBで指定

その他の色についてはカラーネームとカラーコード 一覧をご覧ください。

枠線と背景の色

枠線の色はborderプロパティ、背景の色はbackground-colorプロパティで設定します。

値の取り方はどちらも同じで、カラーネーム、カラーコード、RGBなどが使えます。

RGBAの使い方

RGBには応用形として"RGBA"というものがあります。Aは"alpha"の頭文字で色の透明度を意味します。

Aの値は0～1で設定します。0は完全透明、1は完全不透明です。

黄色：rgb(255, 255, 0)

黄色：rgba(255, 255, 0, 0.8)

RGBAのAで指定する透明度はそのプロパティに対して適用されます。もし要素（セレクタ）全体を透明にしたい場合はopacityプロパティを使います。

background-color: rgba(255, 255, 0, 0.1)

opacity: 0.1;

配色は書籍やツールを活用

配色はとても奥が深くて、試行錯誤の連続になると思います。

配色を決定するのに、Adobeのカラーホイールなどのウェブツールや市販の色見本は大いに参考になります。

配色の参考書籍

ノンデザイナーズ・デザインブック

総合的なデザイン本で、配色の基礎知識も学べます。なんといってもわかりやすいです。見やすさ、可読性、ユーザビリティを学ぶための良書でもあるので、持っておいて損はないと思います。

3色だけでセンスのいい色

めちゃくちゃ売れている配色アイデア本。使用色を3色に絞っているので、色の使い過ぎで収集がつかなくなることがありません。配色面積比があるのも便利。