CSSで背景色を指定する方法｜background-color

📌

結論

background-color でページの背景色を変えられます

📝 実際のコードはこちら

body { background-color: #f5f5f5; }

たった1行で、ページ全体の背景色が薄いグレーに変わります。

background-colorの使い方

background-color は要素の背景色を指定するプロパティです。対象の要素を変えれば、特定の部分だけ色を付けることもできます。

📝 実際のコードはこちら

<div style="background-color: #e3f2fd; padding: 16px;">
  青い背景のボックス
</div>

背景色と文字色のコントラスト比（WCAG基準で4.5:1以上）を確認しましょう。薄い背景に薄い文字は読めません。

・背景色は background-color で指定・#f5f5f5 のような薄いグレーはよく使われる定番色・文字色とのコントラストに注意

bodyの背景色を#f5f5f5にしてみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

bodyの背景色を#f5f5f5にしてください。

詰まったらヒント

background-color を使います。