HEXカラー

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 26/76。

HEXカラーは、16進数の値を使用して色を指定する方法です。16進数のカラーコードは、色を構成する赤、緑、青の光の量を表す6桁のコードで、先頭にハッシュ記号（#）が付きます。

コード内の数字の各ペアは、これらの原色のいずれかの強度を表し、00（強度なし）からFF（最大強度）までの範囲になります。16進数カラーは幅広い色の選択肢を提供し、Webデザインで広く使用されています。

CSSでHEXカラーを使用する基本的な構文は次のとおりです：

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

例：

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

各ペアの2桁が同じ場合は、16進数カラーに短縮記法を使用することもできます。例：

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

チャレンジ

簡単

2つの見出し（<h1>と<h2>）と段落（<p>）を含むHTMLドキュメントが与えられます。あなたの課題は、16進数のカラーコードを使用してbackground colorsを設定することです。以下の手順に従ってください：

<h1>要素のCSSルールを記述します。#BF00FFの16進数カラーを使用して、background colorをelectric purpleに設定します。
<h2>要素のCSSルールを記述します。#39FF14を使用して、background colorをneon greenに設定します。
すべての<p>要素に対するCSSルールを記述します。#D3D3D3を使用して、background colorをlight grayに設定します。

必須の出力形式： [翻訳したコンテンツ]

自分で試してみよう

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>