CSS ・ 色・背景
background-color
背景色
要素の背景の色を指定します。内容と padding の部分まで塗られ、margin の部分は塗られません。
01
サンプルコード
HTML
1<div class="box beige">背景色：#faf5ec</div>
2<div class="box dark">背景色：#201f1d</div>
3<div class="box clear">半透明の背景</div>
CSS
1.box {
2 padding: 12px 16px;
3 margin-bottom: 8px;
4}
5.beige {
6 background-color: #faf5ec;
7}
8.dark {
9 background-color: #201f1d;
10 color: #fff;
11}
12.clear {
13 background-color: rgb(182 130 53 / 25%);
14}
02
実行結果
ブラウザでの表示
03
解説
background-color は要素の背景色を指定するプロパティです。色の書き方は color と同じです。
背景は要素の内容と padding の範囲に塗られます。margin の部分は塗られないため、要素の外側は親の背景が見えます。
背景色を変えるときは、文字色とのコントラストも一緒に確認します。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
#faf5ec | 16進数の色 |
rgb(0 0 0 / 50%) | 透明度付きの色 |
transparent | 透明（初期値） |
currentColor | 文字色と同じ色 |
ショートハンドで書く
background プロパティを使うと、背景色と背景画像などをまとめて書けます。
CSS
1.hero {
2 background: #201f1d url("hero.jpg") center / cover no-repeat;
3}
注意点
- 01background-color は継承されません。ただし初期値が透明なので、親の背景色が透けて見えます。
- 02暗い背景色にしたら、文字色を明るくするのを忘れないようにします。