序章

CSSでは、使用できる色の形式がいくつかあります。 一般的なものには、16進数（16進数）コード、RGB（赤、緑、青）、RGBA（赤、緑、青、アルファ）、およびHSL（色相、彩度、明るさ）が含まれます。

この記事では、16進カラーコードを確認し、透明度にアルファ値を使用する方法について説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

  • CSSにある程度精通している必要があります。 復習が必要な場合は、CSSを使用してWebサイトを構築する方法チュートリアルシリーズの恩恵を受けることができます。
  • #rrggbbaaの16進色表記をサポートする最新のWebブラウザー。

カラーキーワードの使用

まず、CSSはカラーキーワードをサポートしています。 ほとんどのブラウザとデバイスは、これらの名前付きの色を色の値にレンダリングできます。

CSSには約140という名前の色があります（red、blue、lavenderなど）。

たとえば、テキストの色を赤にしたい場合は、キーワードredを使用できます。

div {
 color: red;
}

16進コードなどのさまざまな値の形式を使用すると、140色を超えてカスタマイズできます。

16進値を理解する

あなたはおそらく10進値（または10進数）で数えることに最も慣れています：

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

つまり、1桁の値は10個（0から9）のみで、その後は2桁（10）に増やす必要があります。

16進数の値は、基数10ではなく基数16です。

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

A、B、C、D、E、およびFの文字を使用して追加を表します値。

たとえば、これらはすべて有効な16進値です。

00, 01, 99, 9D, 1D, CC, E4, F5

次に、CSSスタイルで16進値を使用する方法を学びます。

CSSでの16進値の使用

CSSを使用して要素をスタイリングする場合、フォントcolor、background-color、border-colorなどのプロパティの色の値を変更することがよくあります。

カスタムカラーを作成するには、上記の16進数の組み合わせを使用して、特定の色を表す16進コードを作成できます。

CSSの16進コードは、「番号記号」（＃）（ポンド記号またはハッシュ記号とも呼ばれます）で始まる必要があります。 次に、6桁の16進値。 2桁の各ペアは、赤、緑、および青を表します。 パターンは#RRGGBBのようになります（ここで、赤はR、緑はG、青はBです）。

色は、赤、緑、青の値の組み合わせで表されます。 最小値（00）は、色の最も暗いバージョン（黒に最も近い）になり、最大値（FF）は、色の最も明るいバージョン（白に最も近い）になります。 。

3つのペアすべてを最小値（00）に設定すると、黒一色になります。

div {
  color: #000000;
}

3つのペアすべてを最高値（FF）に設定すると、白一色になります。

div {
  color: #FFFFFF;
}

見出しのテキストの色を明るい赤にしたいとします。 これを実現するには、赤（RR）の値を可能な限り高い値（FF）に設定します。 緑や青は必要ないので、緑（GG）と青（BB）の値をそれぞれ可能な限り低い値（00）に設定できます。

div {
  color: #FF0000;
}

このコードは次のようにレンダリングされます。

赤いテキスト

赤、青、緑の量を変えることで、さまざまな色を作り出すことができます。 #DC143Cには大量の赤（DC）があります。これにより、「深紅色」の色が生成されます。 #EE82EEには、大量の赤（EE）と青（EE）があります。これにより、「紫」の色が生成されます。 #40E0D0には、大量の緑（E0）と青（D0）があります。これにより、「ターコイズ」色が生成されます。

注：CSSの16進コードでは大文字と小文字は区別されません。 つまり、英字は大文字でも小文字でもかまいません。#ff0000は#FF0000と同等です。 CSSは省略形の値もサポートしています。 これは、#F00が#FF0000と同等であることを意味します。

採用するアプローチは、プロジェクトで使用されるコーディング標準に準拠している必要があります。

次に、CSSの16進コードでアルファ値を使用する方法を学びます。

CSS16進コードへのアルファ値の追加

アルファ値を使用して色の透明度を更新すると、16進コード形式が#RRGGBBから#RRGGBBAAに変更されます（アルファはA）。 最初の6つの値（赤、緑、青の値）は同じままです。

#RRGGBBAAのAA値は、可能な最小値（00）から可能な最大値（FF）までの範囲になります。 値を下げると、透明になるまで視界が暗くなります。 値を上げると、可視性がますます不透明になります。

かなり透明な青色が必要だとします。

まず、青色の16進コードから始めます。

div {
  background-color: #0080FF;
}

このコードは次のようにレンダリングされます。

背景色#0080FF

次に、16進コードにさらに2つの値を追加して、透明度を変更できます。 この例では、アルファ値は80に設定されています。

div {
  background-color: #0080FF80;
}

このコードは次のようにレンダリングされます。

背景色#0080FF80

16進形式のアルファ値は、透明度の基数16の値が実際にどのように見えるかを概念化するのが難しいため、少し混乱する可能性があります。 ただし、コードベースですでに16進コードを使用している場合は、それらを更新して透明度を変更できるという利点があります。 カラーフォーマットの変更は必要ありません。

色を選択するためのChromeDevToolsのヒントの使用

さまざまな形式で色を確認するための簡単なヒントの1つは、ChromeDevToolsを使用することです。

DevToolsパネルが開いたら、スタイルセクションでチェックする色を探します。 見つけたら、色の左側にあるボックスをクリックして、値を直接調整できます。 SHIFTを押したままボックスをクリックして、値が正しく変換されたさまざまなフォーマットオプションを切り替えることもできます。

Animated gif of interacting with the Chrome DevTools to adjust CSS colors.

この例では、アルファ値とカラー値を調整します。 次に、16進コード形式、RGBA形式、およびHSLA形式を切り替えます。

ChromeDevToolsカラーピッカーの詳細をご覧ください。

結論

この記事では、16進カラーコードを確認し、透明度にアルファ値を使用する方法を検討しました。

#RRGGBBAA 16進コードのブラウザーサポートには、最新のブラウザーが必要です。 古いバージョンのInternetExplorerでは使用できません。 リファレンス#rrggbbaaの16進色表記を使用して、この形式がプロジェクトの対象読者に適しているかどうかを確認できますか。

CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。