RGBカラー

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

CSSでは、RGBカラーはrgb()関数記法を使用して色を指定する方法です。RGBはRed（赤）、Green（緑）、Blue（青）の略で、各色は0から255の範囲の値で表されます。これら3つの原色の異なる強度を組み合わせることで、幅広い色を作成できます。

CSSでRGBカラーを使用するための基本構文は次のとおりです：

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

例えば：

p {
    color: rgb(255, 0, 0); /* 赤 */
    background-color: rgb(0, 255, 0); /* 緑 */
}

h1 {
    color: rgb(0, 0, 255); /* 青 */
}

.highlight {
    background-color: rgb(255, 255, 0); /* 黄色 */
}

チャレンジ

簡単

見出し（<h1>）、段落（<p>）、およびディビジョン（<div>）が含まれるHTMLドキュメントが与えられています。ページ上のすべての要素に、好きな背景色とテキストの色を指定してください。その際、rgb()を使用してください。

デフォルトの色は受け付けられません！

チートシート

RGBカラーは、赤、緑、青に0から255の値を使用する rgb() 関数記法を使用します：

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

例：

p {
    color: rgb(255, 0, 0); /* 赤 */
    background-color: rgb(0, 255, 0); /* 緑 */
}

h1 {
    color: rgb(0, 0, 255); /* 青 */
}

.highlight {
    background-color: rgb(255, 255, 0); /* 黄色 */
}

自分で試してみよう

<html>
<head>
    <title>RGB Colors</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>