CSS の background-color 属性の設定方法

2年 ago
蓮, 翼
1 minute

CSSのbackground-colorプロパティは、要素の背景色を設定するために使用されます。基本的な構文は次のとおりです。

selector {
background-color: color;
}

セレクターは背景色を設定する要素のセレクター、colorは色の値で、以下の形式を使用可能です。

  1. 色名：あらかじめ用意された赤、青などの色名を使用できます。
  2. 16進数値：#を先頭につけ、その後に6桁の16進数値が続く。例：#ff0000は赤を表す。
  3. RGB値：関数rgb()で表し、括弧内は0〜255の整数。例：rgb(255, 0, 0)は赤。
  4. RGBA値：RGB値と似ていますが、末尾に透明度を表す値が追加され、0～1の範囲を取ります。例をあげると、rgba(255, 0, 0, 0.5) は半透明の赤を表します。

例を以下に示します：

body {
background-color: red;
}
h1 {
background-color: #00ff00;
}
p {
background-color: rgb(0, 0, 255);
}
div {
background-color: rgba(255, 0, 0, 0.5);
}

このコードはbody要素の背景を赤、h1要素の背景を緑、p要素の背景を青、div要素の背景を半透明の赤に設定します。

bannerAds