概要

background-color は、HTML要素の背景色を指定するためのCSSプロパティです。色の指定には、キーワード、16進数、RGB、RGBA、HSLなどさまざまな形式が使えます。

基本的な使い方

See the Pen backgorund-colorについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* キーワード */
div {
  background-color: red;
}

/* 16進数 */
div {
  background-color: #ff0000;
}

/* RGBA（透明度付き） */
div {
  background-color: rgba(255, 0, 0, 0.5);
}

色の指定方法は目的やデザインに応じて使い分けることができます。

出力される内容の例

<div style="background-color: lightblue;">
  背景色が水色になります。
</div>

役割とメリット（定義リスト形式）

視認性の向上

特定のエリアを目立たせることで、ユーザーの視線を誘導できます。

デザインの統一感

ブランドカラーやテーマに沿った背景色で、全体の一体感を出せます。

装飾目的

要素を飾ることで、シンプルな構成にもアクセントを与えられます。

状態の区別

ホバーやアクティブ状態など、UIの状態変化を色で表現できます。

注意点

• テキストとのコントラストが不十分だと可読性が下がるため、十分な色の差を確保する必要があります。
• 背景画像との併用時は、透過色（rgbaなど）を活用すると効果的です。
• 要素のサイズが width や height で指定されていない場合、背景色の表示が期待通りにならないことがあります。

まとめ

background-color は、要素の背景色を指定するための基本プロパティです。視認性の向上やデザインの一貫性を保つために、非常に重要な役割を担います。さまざまな色指定方法に対応しており、用途に応じた使い分けが可能です。