background-color
background-colorは、背景色を指定するスタイルです。
解説
指定した要素の背景色をカラーネームやカラーコードなどで指定します。
背景色を指定しない場合は、透明（transparent）になります。
構文
構文は以下になります。
background-color: 値;
値
background-colorには以下の値が指定できます。
| 値 | 説明 |
|---|---|
| カラーネーム | カラーネームで指定する （例）青色を名称で指定する ⇒ background-color:blue; |
| カラーコード | カラーコードで指定する （例）青色をコードで指定する ⇒ background-color:#0000ff; |
| RGB値 | RGB値で指定する （例）青色をRGB値で指定する ⇒ background-color:rgb(0, 0, 255); |
| RGBA値 | RGBA値で指定する （例）青色、透過率0.8を指定する ⇒ background-color:rgba(0, 0, 255, 0.8); ※透過率は0.0(透明)～1.0(不透明)で指定します。 |
| transparent | 透明を指定する（デフォルト値） （例）background-color:transparent; |
太字の値はデフォルト値です。
サンプル
背景色をライムにする（カラーネームで指定）
.sample01 {
background-color:lime;
}
<div class="sample01">ライム色です</div>
ライム色です
背景色をライムにする（カラーコードで指定）
.sample02 {
background-color:#00ff00;
}
<div class="sample02">ライム色です</div>
ライム色です
背景色を透明にする
.sample03 {
background-color:transparent;
}
<div class="sample03">透明です</div>
透明です
備考
- 背景色を透明にしたい場合は、当スタイルを明示的に指定する必要はありません。
- カラーネームについては以下ページをご覧ください。
⇒ カラーネーム一覧
関連項目
- background：背景に関するスタイルをまとめて指定する
- background-color：背景色を指定する
- background-image：背景に画像を指定する
- background-repeat：背景画像の表示方法を指定する
- background-position：背景画像の位置を指定する
- background-attachment：背景画像のスクロール方法を指定する
- background-clip：背景画像を表示する範囲を指定する
- background-size：背景画像のサイズを指定する
