HEXカラー

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

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

コード内の各2桁の数字の組み合わせは、これらの原色のいずれか1色の強度を表し、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 colorに使用することです。以下の手順に従ってください：

<h1>要素のCSSルールを記述します。16進数カラー#BF00FFを使用して、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>