【初心者向け】CSS 背景色の設定方法｜background-color・RGBA・透明色の使い方を徹底解説

Webデザインにおいて背景色（background-color）は、サイト全体の印象を左右する大切な要素です。この記事では、CSS 背景色の基本設定から、RGBAを使った透明表現、デザインを引き立てる応用テクニックまで、初心者にもわかりやすく解説します。

Table of contents

CSSで背景色を設定する基本を理解しよう

背景色を変更するときに使うのが、background-colorプロパティです。HTML要素・ボタン・セクション・ページ全体などに対して背景色を指定し、デザインの統一感を出すことができます。

CSSで背景色を設定する基本や初心者向けのサンプルコードは、background-colorプロパティの基本使い方を解説でも詳しく紹介されています。

背景色を指定する基本構文は以下の通りです。

selector {
background-color: 色;
}

例1・CSSファイル内で指定

body {
background-color: #f0f0f0;
}

例2・HTMLのインラインスタイルで指定

<div style="background-color: lightblue;">背景が水色のボックス</div>

CSSでは、背景色を複数の方法で指定できます。使い方を覚えることで、柔軟にデザインできます。

指定方法	書き方	例
カラーネーム	英単語で指定	`background-color: red;`
16進数カラーコード	#で始まる値	`background-color: #89e4a8;`
RGB値	赤・緑・青の数値で指定	`background-color: rgb(255, 200, 100);`
RGBA値	透明度・α値を含む	`background-color: rgba(63,81,181,0.7);`
透明指定	完全に透明	`background-color: transparent;`

RGBAのA（アルファ）は透明度を表します。
0が完全透明、1が不透明です。

background-colorプロパティの詳細な仕様やブラウザ対応状況は、background-colorプロパティ仕様（MDN）で確認できます。

ページ全体に色を設定

body {
background-color: #fafafa;
}

セクション単位で設定

section {
background-color: lightblue;
}

hoverで色を変える例

button:hover {
background-color: #2196f3;
color: white;
}

背景色は単なる装飾ではなく、可読性やデザイン性にも関わります。

具体的なコードサンプルや実践的な背景色指定のコツは、背景色指定背景色プロパティ活用ガイドでも詳しく紹介されています。