CSSで背景色を変えたいときは、background-colorプロパティを使います。「background color」と検索されることもありますが、CSSに書くときは2つの単語を半角ハイフンでつないだbackground-colorが正しい名前です。
この記事では、background-colorの意味と書き方を初心者向けに説明します。実際にHTMLとCSSを用意し、ページ全体とプロフィールカードの背景色を変えるところまで進めます。
background-colorは要素の背景色を変えるCSSプロパティ
background-colorは、HTML要素の背景色を指定するCSSプロパティです。ページ全体だけでなく、見出し、段落、ボタン、表、カードなど、さまざまな要素に使えます。
CSSでは、背景色を付けたいHTML要素をセレクターで選び、次のように記述します。
.box {
background-color: #dbeafe;
}
.boxは、class="box"が付いたHTML要素を選ぶセレクターです。background-colorは変更する項目、#dbeafeは設定する色を表しています。
コロン（:）はプロパティと値の区切り、セミコロン（;）は宣言の終わりです。記号はすべて半角で入力してください。
CSSそのものの書き方から確認したい場合は、次の記事でセレクター・プロパティ・値の役割を詳しく説明しています。
background-colorで使える色の指定方法
背景色の値には、色名、16進数のカラーコード、rgb()、hsl()などを指定できます。初心者は、色を正確に共有しやすいカラーコードから使うと分かりやすいです。
| 指定方法 | 記述例 | 特徴 |
|---|---|---|
| 色名 | skyblue | 英単語で直感的に指定できます |
| カラーコード | #dbeafe | 6桁の16進数で細かく指定できます |
| RGB | rgb(219 234 254) | 赤・緑・青の成分で指定できます |
| HSL | hsl(214 95% 93%) | 色相・彩度・明度で調整できます |
| 透明 | transparent | 背景色を完全に透明にします |
色名で指定する
redやskyblueなど、CSSで定義された色名を値に書く方法です。試しやすい一方、使える名前は決まっており、細かな色調整には向きません。
.box {
background-color: skyblue;
}カラーコードで指定する
カラーコードは、先頭の#と6桁の英数字で色を表します。たとえば、#ffffffは白、#000000は黒です。大文字と小文字で色は変わりません。
.box {
background-color: #dbeafe;
}rgb()で指定する
rgb()は、光の三原色である赤（Red）、緑（Green）、青（Blue）の強さを組み合わせる方法です。各成分を基本的に0〜255で指定し、数値が大きいほどその色の成分が強くなります。
.box {
background-color: rgb(219 234 254);
}現在は、色成分を空白で区切る書き方を使えます。rgb(219, 234, 254)のようにカンマで区切る従来の書き方もブラウザで利用できます。
background-colorで背景色を変える手順
ここからは、index.htmlとstyle.cssを使って、プロフィールカードの背景色を変更します。「変更前の状態→CSSの追加→変更後の状態」の順に確認しましょう。
変更前のHTMLを用意する
同じフォルダーにindex.htmlとstyle.cssを作ります。まず、index.htmlへ次のコードを記述してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>背景色の練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="profile">
<h1>プロフィール</h1>
<p>background-colorを練習しています。</p>
<a class="button" href="#">詳しく見る</a>
</main>
</body>
</html>link要素は、同じフォルダーにあるstyle.cssを読み込む指定です。CSSをまだ書いていないため、この時点ではブラウザの標準に近い白い背景で表示されます。
CSSファイルの読み込み方やパスが分からない場合は、次の記事を参考にしてください。
style.cssに背景色を追加する
次に、style.cssへCSSを記述します。bodyでページ全体、.profileでカード、.buttonでリンク風ボタンの背景色を指定します。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 40px 16px;
background-color: #dbeafe;
color: #172554;
font-family: sans-serif;
}
.profile {
width: min(100%, 560px);
margin-inline: auto;
padding: 32px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
.profile h1 {
margin-top: 0;
}
.button {
display: inline-block;
padding: 12px 20px;
color: #ffffff;
background-color: #2563eb;
border-radius: 8px;
text-decoration: none;
}paddingは要素の内側に余白を作るプロパティです。背景色は要素の内容だけでなく、paddingで作った内側の余白にも表示されます。
変更後の表示を確認する
2つのファイルを保存してブラウザを更新すると、ページ全体が薄い青色、プロフィールカードが白色、ボタンが濃い青色になります。どのセレクターへ指定したかによって、背景色が付く範囲が変わる点を確認してください。
背景色を付ける範囲を変える方法
ページ全体の背景色を変える
ページ全体の背景色は、基本的にbody要素へ指定します。HTML文書全体のルート要素であるhtmlにも背景を指定できますが、通常のページ背景ならbodyで十分です。
body {
background-color: #f1f5f9;
}見出しや段落の背景色を変える
見出しならh1やclassセレクター、段落ならpなどを選びます。要素型セレクターを使うと同じ種類の要素すべてに適用されるため、一部だけ変えたい場合はclassを付けましょう。
<p class="notice">重要なお知らせです。</p>.notice {
padding: 16px;
background-color: #fef3c7;
}p要素は横幅いっぱいに広がるブロック要素なので、背景色も基本的に利用できる横幅へ広がります。文字の周囲だけに背景色を付けたい場合は、span要素を使います。
<p>ここが<span class="highlight">重要な部分</span>です。</p>.highlight {
background-color: #fef08a;
}背景色を透明・半透明にする方法
背景色を完全に透明にする場合は、値にtransparentを指定します。background-colorの初期値もtransparentです。
.button {
background-color: transparent;
}半透明にする場合は、rgb(37 99 235 / 50%)のようにスラッシュの後ろへアルファ値を指定します。アルファ値は色の不透明度で、0%は完全な透明、100%は完全な不透明です。
.button {
background-color: rgb(37 99 235 / 50%);
}opacityを使うと、背景だけでなく文字や枠線を含む要素全体が半透明になります。背景色だけを透かしたい場合は、アルファ値付きの色を使ってください。詳しい違いは次の記事で画像付きで解説しています。
background-colorが反映されないときの確認点
背景色が変わらないときは、次の項目を上から順番に確認します。
background colorではなく、半角ハイフン付きのbackground-colorと書いているか- コロン、セミコロン、波括弧を半角で正しい位置に書いているか
- HTMLのclass名とCSSのセレクターが一致しているか
- HTMLから正しいパスでCSSファイルを読み込んでいるか
- ファイルを保存し、ブラウザを再読み込みしたか
- ほかのCSSに上書きされていないか
たとえば、HTMLがclass="profile"なのにCSSを.profilesと書くと、名前が一致しないため適用されません。大文字と小文字、単数形と複数形も含めて確認しましょう。
同じ要素へ複数の背景色が指定されている場合は、セレクターの優先度や記述順によって別の色に上書きされることがあります。ブラウザの開発者ツールを使うと、実際に適用されているCSSを確認できます。
背景色を決めるときは文字の読みやすさも確認する
背景色を変えたら、その上にある文字とのコントラストも確認してください。コントラストとは、文字色と背景色の明るさの差です。差が小さいと、文字を読み取りにくくなります。
WCAGでは、通常サイズの文字に対して4.5:1以上、大きな文字に対して3:1以上のコントラスト比が目安とされています。淡い背景には濃い文字、濃い背景には白などの明るい文字を組み合わせるのが基本です。
.notice {
color: #172554;
background-color: #dbeafe;
}色だけで「エラー」「成功」などの意味を伝えるのも避けます。色の違いに加えて、文字やアイコンなどでも状態が分かるようにすると、より多くの人が内容を理解できます。
background-colorでよくある疑問
backgroundとbackground-colorの違いは何ですか？
background-colorは背景色だけを指定するプロパティです。backgroundは、背景色、背景画像、位置、サイズなどをまとめて指定できるショートハンドプロパティです。
背景色だけを変更したい場合は、何を設定しているか分かりやすいbackground-colorを使うとよいでしょう。backgroundをあとから指定すると、先に設定した背景画像などが初期値へ戻る場合がある点にも注意が必要です。
background-colorでグラデーションを指定できますか？
指定できません。CSSのグラデーションは画像として扱われるため、background-imageまたはbackgroundへ指定します。
.box {
background: linear-gradient(to right, #dbeafe, #bfdbfe);
}背景色が文字の後ろだけにならないのはなぜですか？
pやdivなどのブロック要素は、基本的に利用できる横幅へ広がるためです。文字部分だけに背景色を付けたい場合は、対象の文字をspan要素で囲んでclassを付けます。
まとめ
CSSで背景色を変えるときは、background-color: 色;と記述します。検索時には「background color」と分けて書かれることもありますが、CSSのプロパティ名には半角ハイフンが必要です。
まずはbody、カード、ボタンへ異なる背景色を指定し、セレクターによって色が付く範囲が変わることを確認してみてください。背景色を決めるときは、文字とのコントラストも一緒に確認しましょう。