背景色

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 25/76。

CSSにおいて、background-colorプロパティは、HTML要素の背景色を設定するために使用されます。このプロパティを使用すると、色の値を指定できます。

background-colorプロパティを使用するための基本的な構文は次のとおりです：

selector {
    background-color: color-value;
}

CSSで色を指定するための一般的な方法をいくつか紹介します：

カラーネーム: red、blue、green、black、whiteなどの、あらかじめ定義された色の名前です。

16進数値: ハッシュ記号（#）で始まる6桁のカラーコードで、赤を表す #FF0000 などがあります。

RGB値: rgb()関数を使用して、色の赤、緑、青の成分を指定します。値の範囲は0から255までで、赤の場合はrgb(255, 0, 0)のようになります。

例えば：

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

この例では、<body>要素の背景色はlightblueに設定されており、すべての<h1>見出しは赤色の背景（#FF0000）を持ち、すべての<p>（段落）要素は青色の背景（rgb(0, 0, 255)）を持ちます。

チャレンジ

簡単

見出し（<h1>）、段落（<p>）、およびディビジョン（<div>）を含むHTMLドキュメントが与えられます。あなたのタスクは、background-colorプロパティを使用してこれらの要素をスタイリングすることです。以下の手順に従ってください：

<h1>要素をターゲットにするCSSルールを記述してください。background-colorをyellowに設定します。
<p>要素をターゲットにするCSSルールを記述してください。background-colorを#00FF00（緑）に設定します。
<div>要素をターゲットにするCSSルールを記述してください。background-colorをrgb(255, 0, 255)（マゼンタ）に設定します。

チートシート

background-color プロパティは、HTML要素の背景色を設定します：

selector {
    background-color: color-value;
}

色の値は、以下を使用して指定できます：

カラー名: red, blue, green, black, white
16進数値: #FF0000 (赤)
RGB値: rgb(255, 0, 0) (赤)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

自分で試してみよう

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>