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>
このように、背景色と一緒に余白や枠線をつけると、視覚的に分かりやすくなります。
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
CSSのbackground-colorとは何ですか？初心者でも簡単に使えるプロパティですか？
CSSのbackground-colorとは、HTML要素の背景色を指定するための基本的なプロパティです。段落や見出し、ボックス要素など、あらゆるタグに背景色をつけることができるため、初心者でも簡単に使えるCSSの基本機能です。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
