CSSの文字色と背景色をやさしく解説！初心者でもわかる基本の設定方法
生徒
「CSSで文字に色を指定したり、背景に色をつけたりすることってできますか？」
先生
「はい、できますよ。文字の色にはcolor、背景の色にはbackground-colorを使います。」
生徒
「どうやって書けばいいのか、具体的に教えてください！」
先生
「それでは、CSSを使った色の指定方法を順番に見ていきましょう！」
1. CSSで文字色を指定する方法
文字の色を変えるには、CSSのcolorというプロパティ（設定項目）を使います。例えば、見出しタグの<h1>に青色を設定したい場合、次のように書きます。
<style>
h1 {
color: blue;
}
</style>
<h1>これは青い見出しです</h1>
colorは英語で「色」という意味です。色の名前は「blue（青）」「red（赤）」「green（緑）」など、英語で書くのが基本です。
2. 背景色をつけるにはbackground-colorを使う
文字の後ろの背景に色をつけたい場合は、CSSのbackground-colorを使います。これで、まるで色のついた紙の上に文字がのっているように見せることができます。
<style>
p {
background-color: yellow;
}
</style>
<p>この段落の背景は黄色です。</p>
background-colorは、「背景に色をつける」という意味の英語です。黄色にしたいときは「yellow」、灰色なら「gray」など、英語の色名を使います。
3. 文字色と背景色を同時に設定する
文字の色と背景色は、同時に設定することもできます。たとえば、白い文字で黒い背景にしたいときは次のようにします。
<style>
div {
color: white;
background-color: black;
}
</style>
<div>この文字は白、背景は黒です</div>
このようにcolorとbackground-colorをセットで使うと、コントラスト（文字と背景の見やすさ）を調整することができます。
4. よく使う色の名前一覧
CSSでは多くの色が名前で指定できます。以下は初心者でもよく使う代表的な色名です：
- red（赤）
- blue（青）
- green（緑）
- yellow（黄色）
- black（黒）
- white（白）
- gray（灰色）
- orange（オレンジ）
- pink（ピンク）
- purple（紫）
これらの色名はそのままCSSに書けば使えるので、覚えておくと便利です。
5. カラーピッカーで好きな色を選ぶ方法
もっと細かい色を使いたいときは、色の番号（カラーコード）を使う方法があります。たとえば、赤っぽい色でもたくさん種類があり、HTMLカラーコード「#ff0000」は鮮やかな赤色になります。
<style>
h2 {
color: #ff0000;
}
</style>
<h2>これはカラーコードで設定した赤です</h2>
色の番号は「16進数（じゅうろくしんすう）」と呼ばれる表現方法で、「#」のあとに数字と英字を6桁書いて表します。色見本サイトやカラーピッカーを使うと簡単に好みの色を探せます。
6. パソコン初心者でもCSSの色指定は簡単にできる
HTMLとCSSが初めての方でも、色を指定するのは難しくありません。覚えるのはたった2つのキーワード「color」と「background-color」だけ。色名も英語で書くだけなので、カンタンです。
たとえば、こんな使い方もあります：
<style>
span {
color: red;
background-color: lightgray;
}
</style>
<p>この文章の中に<span>赤い文字＋グレー背景</span>を使っています。</p>
このように、文字の色と背景色を使い分けることで、読んでもらいたい場所を目立たせたり、注目を集めたりすることができます。
7. よくある間違いと注意点
初心者の方がCSSで色を設定する際によくある間違いは、スペルミスです。たとえば「backgroud-color」と「n」が抜けていたり、「clor」と「e」が抜けていたりすることがあります。
もうひとつの注意点は、背景色と文字色の組み合わせです。たとえば、白い背景に黄色の文字にすると、とても見づらくなります。
読みやすさを意識して、はっきり見える色の組み合わせを選びましょう。黒＋白、白＋青、紺＋オレンジなど、コントラストの強い色がオススメです。
まとめ
CSSの文字色と背景色の基本をしっかり振り返ろう
この記事では、CSSを使って文字色と背景色を指定する基本的な方法について、初心者の方でも理解できるように順番に解説してきました。Webページの見た目を整えるうえで、「文字の色」と「背景の色」は最も基本でありながら、とても重要な要素です。色を変えるだけで、ページの印象や読みやすさ、伝わりやすさが大きく変わります。
文字色を指定するには color プロパティを使い、背景色を指定するには background-color プロパティを使う、というのがCSSにおける基本ルールでした。この二つを覚えるだけでも、見出しを目立たせたり、重要な文章を強調したりといった表現ができるようになります。CSS初心者にとって、まず最初に身につけたい知識のひとつと言えるでしょう。
色の指定方法としては、英語の色名を使う方法と、カラーコードを使う方法がありました。英語の色名は直感的で分かりやすく、最初の練習に最適です。一方、カラーコードを使えば、より細かい色の調整が可能になり、デザインの幅が一気に広がります。どちらも状況に応じて使い分けられるようになると、CSSの理解がさらに深まります。
また、文字色と背景色を同時に設定することで、コントラストを意識したデザインができる点も重要でした。読みやすい配色を意識することは、Webデザインにおいて欠かせない考え方です。背景と文字の色が近すぎると読みにくくなってしまうため、「誰が見ても読みやすいか」という視点を常に持つことが大切です。
まとめとして確認する色指定のサンプル
ここで、この記事で学んだ「文字色」と「背景色」の指定をまとめて確認できるサンプルコードを見てみましょう。基本的なCSSの書き方を復習するのに最適な例です。
<style>
.notice {
color: white;
background-color: #ff5722;
padding: 15px;
}
</style>
<p class="notice">これは文字色と背景色を組み合わせた注意メッセージです。</p>
このように、文字色と背景色を組み合わせることで、ユーザーの目に自然と入るデザインを作ることができます。色の指定はシンプルですが、使い方次第でWebページ全体の印象を大きく左右します。まずは基本を大切にしながら、少しずつ色の組み合わせを試してみましょう。
生徒
「CSSで文字色と背景色を変えるだけで、こんなに見た目が変わるんですね。思っていたより簡単でした。」
先生
「そうですね。color と background-color を覚えるだけで、できることが一気に増えます。」
生徒
「英語の色名も使いやすいし、カラーコードを使うとデザインっぽくなるのが面白いです。」
先生
「その感覚はとても大切です。最初は色名、慣れてきたらカラーコード、という流れで十分ですよ。」
生徒
「背景色と文字色の組み合わせを考えるのが、ちょっと楽しくなってきました。」
先生
「それがWebデザインの第一歩です。読みやすさを意識しながら、いろいろ試してみてください。」
CSSの文字色と背景色の設定は、Web制作の基礎中の基礎ですが、非常に奥が深い分野でもあります。今回学んだ内容をベースに、見出しや本文、強調したい部分などに色を使い分けながら、読みやすく魅力的なWebページ作りに挑戦してみてください。
この記事を読んだ人からの質問
