閉じる
カテゴリー
もっと見る:HTML&CSSコーディング

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

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

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

【PR】 配色サイト "Tricolors"

3色ベースの配色見本Tricolors、タップ/クリックで配色パターンを切り替え!

例:ルフィたんじろうウェディングクジャクシベリアンハスキーコスモス など

おすすめ配色見本サイト Tricolors(トリカラーズ) Color Palettes / Color Combinations

背景色を指定するbackground-color

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

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

カラーネームで指定

background-color: red;
background-color: yellow;
background-color: blue;
background-color: black;

カラーコード(16進数)で指定

background-color: #FF0000;
background-color: #FFFF00;
background-color: #0000FF;
background-color: #000000;

RGBで指定

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

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

枠線と背景の色

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

background-color: yellow;
border: solid 8px blue;

値の取り方はどちらも同じで、カラーネーム、カラーコード、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色に絞っているので、色の使い過ぎで収集がつかなくなることがありません。配色面積比があるのも便利。

HTML/CSS一覧