【ご案内】このページの内容は、AI（GPT）が作成したテキストをもとに構成されています。必ずしも完全に正確とは限らないため、学習や制作に利用する際は、公式ドキュメントや信頼できる資料とあわせて確認することをおすすめします。

background-color で背景色をつけてみよう

このページでは、CSS の background-color プロパティを使って、要素に背景色をつける方法を説明します。

background-color とは？

background-color は、「要素の背景色」を指定するための CSS プロパティです。

指定した色で、文字の後ろの部分（背景）が塗りつぶされます。

色の指定方法は color と同じで、色名（red など）や 16 進数（#ff0000 など）、rgb() などが使えます。

インラインスタイルで background-color を指定する

HTML タグの中の style 属性で、background-color を指定することができます。

書き方の例は次のとおりです。

<p style="background-color: yellow;">背景が黄色の段落</p>

実際の表示例：

これは background-color: yellow; を指定した p 要素です。

h1〜h5 と background-color の例

見出しタグにも background-color を指定できます。

以下は、h1〜h5 に背景色と文字色、文字サイズを組み合わせた例です。

h1 の見出し（薄い緑の背景・40px）

ページ全体のタイトルなど、最も重要な見出しに使われます。

h2 の見出し（薄い青の背景・32px）

大きな章やセクションのタイトルとして使われます。

h3 の見出し（薄い黄色の背景・26px）

h2 の中に含まれる小さな項目のタイトルとして使われます。

h4 の見出し（薄い赤の背景・22px）

さらに細かく内容を分けたいときに使います。

h5 の見出し（薄いグレーの背景・18px）

必要に応じて、より細かい階層構造を表したいときに使います。

p 要素での background-color の例

p 要素（段落）にも背景色をつけることができます。

background-color と color, font-size の組み合わせ

background-color は、color（文字色）や font-size（文字の大きさ）と一緒に使われることが多いです。

文字色と背景色のコントラストを十分に強くすることで、読みやすいデザインになります。

例：背景色が濃いグレー（#333333）、文字色が白（#ffffff）、文字サイズが 20px のテキストです。

まとめ

background-color プロパティを使うと、要素の背景色を指定できます。

p や h1〜h5 など、ほとんどの要素に背景色をつけることができます。

color（文字色）や font-size（文字の大きさ）と組み合わせて、読みやすくメリハリのあるデザインを作りましょう。