HEXカラー

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

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

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

CSSで16進数カラーを使用するための基本的な構文は次のとおりです：

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

例えば：

p {
    color: #FF0000; /* 赤 */
    background-color: #00FF00; /* 緑 */
}

各ペアの2つの数字が同じである場合、16進数カラーの短縮表記を使用することもできます。例えば：

p {
    color: #F00; /* 赤（#FF0000と同等） */
    background-color: #0F0; /* 緑（#00FF00と同等） */
}

チャレンジ

簡単

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

<h1>要素のCSSルールを記述してください。16進数カラーコード#BF00FFを使用して、背景色をエレクトリックパープルに設定します。
<h2>要素のCSSルールを記述してください。#39FF14を使用して、背景色をネオングリーンに設定します。
すべての<p>要素のCSSルールを記述してください。#D3D3D3を使用して、背景色をライトグレーに設定します。

チートシート

16進数カラーは、色の指定にハッシュ記号（#）で始まる6桁の16進コードを使用します。各桁のペアは、赤、緑、青の光の強度を表し、00（強度なし）からFF（最大強度）までの範囲で指定します。

基本的な構文：

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

例：

p {
    color: #FF0000; /* 赤 */
    background-color: #00FF00; /* 緑 */
}

各ペアの2つの桁が同じ場合は、短縮記法を使用できます：

p {
    color: #F00; /* 赤（#FF0000と同等） */
    background-color: #0F0; /* 緑（#00FF00と同等） */
}

自分で試してみよう

<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>