CSS

The `background-color` property in CSS is used to specify the background color of an element.

background-color

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

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

element {
	background-color: 色;
}

色の指定方法

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

キーワード

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

CSS

p {
	background-color: red;
}

16進数表記

`#`で始まり、6桁または3桁の16進数。

CSS

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

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); /* 半透明の赤 */
}

使用例

<p>Light gray</p>
<p>Blue</p>
<p>Translucent green</p>
<p>Green</p>

p:nth-of-type(1) {
	background-color: #f0f0f0; /* 薄いグレー */
}
p:nth-of-type(2) {
	background-color: blue; /* 青 */
}
p:nth-of-type(3) {
	background-color: rgba(0, 255, 0, 0.3); /* 半透明の緑 */
}
p:nth-of-type(4) {
	background-color: hsl(120, 100%, 50%); /* 緑 */
}