HEXカラー
CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 26/76。
16進数カラーは、16進数の値を使って色を指定する方法です。16進数のカラーコードは、色を構成する赤、緑、青の光の量を表す、6桁のコードの前にハッシュ記号 (#)を付けたものです。
コード内の数字の各ペアは、これらの原色のいずれかの強度を表し、00（強度なし）からFF（最大強度）までの範囲です。16進数カラーは幅広い色の選択肢を提供し、Webデザインで広く使われています。
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>）と段落（<p>）があるHTML文書が与えられます。背景色に16進数のカラーコードを使うのが課題です。以下の手順に従ってください。
<h1>要素のCSSルールを記述します。16進数カラーコード#BF00FFを使って、背景色をエレクトリックパープルに設定します。<h2>要素のCSSルールを記述します。#39FF14を使って、背景色をネオングリーンに設定します。- すべての
<p>要素に適用するCSSルールを記述します。#D3D3D3を使って、背景色をライトグレーに設定します。
自分で試してみよう
<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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
CSSによるスタイリングのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド