CSS

background-colorとは？

CSSの background-colorプロパティは、要素の背景色を指定するために使用されます。このプロパティを使用することで、要素の背景に任意の色を設定することができます。

以下のように、色を指定する値を background-colorプロパティに設定します。

element {
	background-color: 色;
}

色の指定方法

background-colorプロパティでは、色をいくつかの方法で指定できます。

キーワード

例えば、red, blue, greenなどの色名。

CSS

p {
	background-color: red;
}

16進数表記

#で始まり、6桁または3桁の16進数で色を指定します。さらに、4桁（#RGBA）や8桁（#RRGGBBAA）を使うと透明度もまとめて指定できます。

CSS

div {
	background-color: #ff0000; /* 赤 */
}

CSS

div {
	background-color: #ff000080;    /* 透明度付きの赤（AA=80 → 約50%） */
}

RGB値

rgb()関数を使って、赤、緑、青の値を0から255まで指定。

CSS

header {
	background-color: rgb(255, 0, 0); /* 赤 */
}

RGBA値

rgba()関数を使って、赤、緑、青の値に加え、透明度を0から1の範囲で指定。

CSS

section {
	background-color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
}

HSL値

hsl()関数を使って、色相、彩度、明度を指定。

CSS

footer {
	background-color: hsl(0, 100%, 50%); /* 赤 */
}

HSLA値

hsla()関数を使って、色相、彩度、明度に加え、透明度を指定。

CSS

article {
	background-color: hsla(0, 100%, 50%, 0.5); /* 半透明の赤 */
}

最新の書き方：rgb() / hsl() に「/」で透明度も書ける

rgba() / hsla() も今でも使えますが、最近は rgb() / hsl() の中に透明度（alpha）まで一緒に書けます。

ポイントは 「スラッシュ / の後ろが透明度」 というルールです。

.demoRgbModern {
	/* 従来：rgba() */
	background-color: rgba(255, 0, 0, 0.5);

	/* 最新：rgb() に / で alpha（同じ意味） */
	background-color: rgb(255 0 0 / 0.5);
}

.demoHslModern {
	/* 従来：hsla() */
	background-color: hsla(200, 100%, 50%, 0.4);

	/* 最新：hsl() に / で alpha（同じ意味） */
	background-color: hsl(200 100% 50% / 0.4);
}

つまずきポイント：opacity は「要素まるごと（文字も中身も）」透けますが、この書き方は 「背景色だけ」 を半透明にできます。

半透明（alpha）は「下の色と混ざる」

半透明の背景色（rgba() / hsla() / #RRGGBBAA）は、ただ「薄くなる」のではなく、下の色と混ざって見えます。

なので、同じ 0.5（50%）でも、下が白か黒かで「見える赤」が変わります。

ポイント：半透明は「背景を透かす」ので、下の背景が変わるページ（カード、モーダル、画像の上など）では見え方がズレやすいです。

注意：opacity: 0.5; を使うと、その要素の文字や中身まで全部半透明になります。「背景だけ」を半透明にしたいなら、このページの例みたいに rgba() / hsla() / #RRGGBBAA を使うのが安全です。

.alphaDemo {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.alphaDemo__base {
	width: 260px;
	padding: 12px;
	border-radius: 12px;
	border: solid 2px #ccc;
}

/* 透明度が分かりやすい“市松模様” */
.alphaDemo__checker {
	background-image:
		linear-gradient(45deg, #ddd 25%, transparent 25%),
		linear-gradient(-45deg, #ddd 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ddd 75%),
		linear-gradient(-45deg, transparent 75%, #ddd 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
	background-color: #fff;
	color: #111;
}

.alphaDemo__black {
	background-color: #111;
	color: #fff;
	border-color: #333;
}

.alphaDemo__overlay {
	padding: 12px;
	border-radius: 10px;
	background-color: rgba(255, 0, 0, 0.5);
}

<div class="alphaDemo__base alphaDemo__checker">
	<p><strong>下が明るい（白＋市松）</strong></p>
	<div class="alphaDemo__overlay">rgba(255, 0, 0, 0.5)</div>
</div>

<div class="alphaDemo__base alphaDemo__black">
	<p><strong>下が暗い（黒）</strong></p>
	<div class="alphaDemo__overlay">rgba(255, 0, 0, 0.5)</div>
</div>

背景色の初期値と「どこまで塗られるか」

background-color の初期値は transparent（透明）です。何も指定していないときは、要素の背景は透明で、後ろにある親要素の背景色がそのまま見えている状態になります。

そのため、親に背景色をつけて、子には何も指定しないと、子要素も同じ色で塗られているように見えますが、実際には「親の色が透けて見えているだけ」です。

<div class="parent">
	<p>子要素には background-color を指定していません</p>
</div>

.parent {
	background-color: lightblue;
}

.parent p {
	/* ここでは背景色を指定していない（transparent のまま） */
}

また、背景色は「マージン以外」に塗られます（デフォルトではボーダーの下まで＝border-box まで塗られます）。ただし border は背景の上に描かれるので、見た目としては「コンテンツとパディングが塗られている」と感じやすいです。マージンは余白スペースなので、そこには背景色はつきません。

.box {
	background-color: pink;
	padding: 16px;
	margin: 16px;
}

この例では、ピンク色になるのはテキストの周りとパディングまでで、外側のマージン部分は背景色がつかないことが確認できます。

背景色と枠線（border）の関係

CSS では、背景色はデフォルトで border-box（ボーダーを含む領域）全体に塗られます。ただし、border は背景の上に重ねて描かれるため、solid のような塗りつぶしの border を使うと、背景色は border に完全に隠れてしまい、外からは見えません。

一方、dotted や dashed のような点線・破線の border の場合は、線のすき間から背景色が見えます。これは、背景が塗られた上に border が描かれ、その border にすき間があるためです。

また、border-radius を設定すると、背景も border の丸い形に合わせてクリップされます。そのため、背景色もいっしょに角が丸くなり、border と背景の形がそろって見えます。

つまり、背景と border は「別のレイヤー」ですが、背景は border-box 全体に塗られ、最終的な見え方は border がどのように描かれるかによって変わります。

<div class="box">background-color</div>

.box {
	background-color: darkgreen;
	color: floralwhite;
	border: dotted 1em floralwhite;
	padding: 1em;
	margin: 1em;
	border-radius: 30px;
}

補足：背景色が「どこまで塗られるか」は background-clip で調整できます。デフォルトは border-box なので枠線の下まで背景が塗られます。枠線の下には塗りたくない場合は、次のように padding-box を使います。

.box {
	background-color: darkgreen;
	color: floralwhite;
	border: dotted 1em floralwhite;
	padding: 1em;
	margin: 1em;
	border-radius: 30px;

	/* 枠線の下には背景を塗らない */
	background-clip: padding-box;
}

よくある質問（FAQ）

背景色を指定したのに見えません。なぜ？

まずは「その要素にサイズがあるか」と「上に別の要素が重なっていないか」を確認します。背景色は“塗る場所”がないと見えません。

子要素に background-color を書いてないのに、色が付いて見えます

子要素の背景は初期値が transparent なので、親の背景が透けて見えているだけです（背景色が継承されたわけではありません）。

背景色は margin にも付きますか？

margin は外側の余白なので背景は付きません。背景が塗られるのは基本的にボーダーの内側です。

半透明にしたいです

rgba() / hsla() や、#RRGGBBAA（末尾AAが透明度）を使うと分かりやすいです。

背景色を「一部だけ」にしたいです

background-clip を使うと、枠線の下まで塗る／塗らないを切り替えできます。

よくあるエラー早見表

「効いてない」ように見える

要素の高さがなく、背景を塗る面がほぼ無い（例：中身が空）。

色名を書いたのに反映されない

スペルミスが多いです（例：whilte など）。まずはブラウザの開発者ツールで警告を確認します。

透明度の指定が思った通りにならない

rgba() の最後は 0〜1、#RRGGBBAA のAAは 00〜FF です。

背景が枠線の下に見える／見えない

border の種類（solid / dotted など）と background-clip の影響です。