CSSの背景色の使い方を完全ガイド！初心者でもわかるbackground-colorの基本
生徒
「CSSで背景の色を変えることってできますか？」
先生
「できますよ！背景色を指定したいときには、background-colorというプロパティを使います。」
生徒
「実際にはどんな風に書けばいいんですか？」
先生
「それでは、一緒に基本の書き方から見ていきましょう！」
1. CSSで背景色を設定するには？
CSS（シーエスエス）とは、ウェブページの見た目やデザインを整えるための言語です。その中で、背景色を設定するときに使うのがbackground-colorというプロパティです。
たとえば、段落の背景を水色にしたいときは、次のように書きます。
<style>
p {
background-color: lightblue;
}
</style>
<p>背景が水色の段落です</p>
このように、CSSのbackground-colorを使えば、簡単に背景の色を変えることができます。
2. 色の指定方法は3つある
背景色の指定にも、文字色と同じように3つの方法があります。
- 色の名前（例：pink、yellow、gray）
- カラーコード（例：#f0f0f0）
- rgba（透明度を含めた色の指定。例：rgba(0, 0, 255, 0.3)）
それぞれの方法を順番に見ていきましょう。
3. 色の名前で背景色を指定する方法
色の名前を使えば、初心者でも簡単に背景色を設定できます。たとえば「黄色」にしたい場合はyellowと書くだけです。
<style>
div {
background-color: yellow;
}
</style>
<div>背景が黄色のボックスです</div>
この方法は簡単ですが、使える色の名前は140種類ほどに限られているため、より細かい色の調整がしたいときはカラーコードを使います。
4. カラーコードで背景色を指定する方法
カラーコードとは、#のあとに英数字6桁で色を指定する方法です。
例えば、明るいグレーの背景にしたいときは #eeeeee と指定します。
<style>
section {
background-color: #eeeeee;
}
</style>
<section>背景が明るいグレーです</section>
カラーコードを使えば、色のバリエーションが無限に広がります。デザイナーもよく使う方法です。
5. rgbaで透明な背景色を作る方法
rgbaは「赤・緑・青・透明度」を設定できる便利な書き方です。
たとえば、青色で少し透けた背景にしたい場合は rgba(0, 0, 255, 0.3) などと書きます。
<style>
div {
background-color: rgba(0, 0, 255, 0.3);
}
</style>
<div>透明感のある青い背景です</div>
透明度（0〜1）は小さいほど薄くなり、1に近づくほど不透明になります。重ねる要素があるときに効果的です。
6. 複数の要素に一括で背景色を設定する方法
同じ背景色を複数のタグに使いたいときは、カンマで区切ってまとめて指定できます。
<style>
h1, h2, p {
background-color: #f5f5dc;
}
</style>
<h1>見出し1</h1>
<h2>見出し2</h2>
<p>段落の背景も同じ色に</p>
このようにまとめると、同じデザインを簡単に適用できます。サイト全体に統一感を出したいときに便利です。
7. 背景色を設定するタグは自由に選べる
background-colorは、どんなHTMLタグにも使うことができます。よく使われるのは次のタグです：
div：大きなボックスを作るときに便利p：文章の背景に色をつけたいときsection：ページ内のセクションごとに背景を変えるh1〜h6：見出しの背景にアクセントをつける
状況に応じて、どのタグに色をつけたいのか考えて使い分けましょう。
8. 注意！文字と背景の色はバランスが大事
背景色を設定するときに大事なのが、文字色とのバランスです。
たとえば、白い文字に白い背景では見えなくなってしまいます。文字が見やすいように、背景とのコントラスト（差）を意識しましょう。
下の例では、白い背景に黒い文字を使って、読みやすくしています。
<style>
body {
background-color: white;
color: black;
}
</style>
<body>とても読みやすい配色です</body>
見やすさを優先しながらデザインしていくことが、良いウェブページを作るコツです。
9. 背景色でアクセントをつけるテクニック
背景色を使えば、ページの中で目立たせたい部分を強調することもできます。
たとえば、注意文やボタン、重要なお知らせなどを目立たせたいときに背景色を工夫しましょう。
<style>
.notice {
background-color: #ffcccc;
padding: 10px;
border: 1px solid red;
}
</style>
<div class="notice">※これは重要なお知らせです</div>
このように、背景色と一緒に余白や枠線をつけると、視覚的に分かりやすくなります。
この記事を読んだ人からの質問
