色

CSS ポッドキャスト - 006: カラー パート 1

色はどのウェブサイトでも重要な要素です。CSS には、色の種類、 扱いません。

使用する色のタイプはどのように決定するのですか？ 色を半透明にするにはどうすればよいですか？ このレッスンでは プロジェクトやチームにとって適切な意思決定を行うために役立つ選択肢を学びます。

CSS にはさまざまなデータ型がありますが、 文字列や数値などです。 色はこれらのタイプのいずれかで、他のタイプ、 数値などの要素を定義します。

数値の色

多くの場合、CSS で初めて色を確認するのは、数値色を使用することです。 数値の色値は、いくつかの異なる形式で処理できます。

16 進数色コード

h1 {
  color: #b71540;
}

16 進数表記（多くの場合、16 進数に短縮される）は、RGB の省略形です。 赤、緑、青に数値を割り当て、 3 つの原色です。

16 進数の範囲は 0 ～ 9 と A ～ F です。 6 桁の数字シーケンスで使用する場合 0 ～ 255 の RGB 数値範囲に変換される それぞれ赤、緑、青のカラーチャネルに対応しています。

アルファ値を任意の数値色で定義することもできます。 アルファ値は透明度の割合です。 16 進数コードでは、6 桁のシーケンスにさらに 2 桁を追加します。 8 桁の数字列を作ります たとえば、16 進数コードで黒を設定するには、#000000 と記述します。 50% の透明度を追加するには、#00000080 に変更します。

16 進数のスケールは 0 ～ 9 と A ～ F であるため、透明度の値はおそらく期待する値と異なります。 以下は、黒い 16 進数コード #000000 に追加されたキーである共通値です。

• 0% のアルファ（完全に透明）は 00（#00000000）です。
• 50% のアルファは 80 です: #00000080
• 75% アルファは BF: #000000BF

2 桁の 16 進数を 10 進数に変換するには、 最初の数字に 16 を掛けます（16 進数は 16 を底とするので）。 2 番目の数字を追加しますBF を例として 75% アルファ版の場合:

1. B は 11 で、16 を掛けると 176 になります。
2. F = 15
3. 176 + 15 = 191 となります。
4. アルファ値は 191 ～ 255 の 75% です

RGB（赤、緑、青）

h1 {
  color: rgb(183, 21, 64);
}

RGB カラーは、 rgb() 色関数、 数値または割合を指定できます 数値は 0 ～ 255 の範囲内、割合は 0% ～ 100% の範囲内である必要があります。 RGB は 0 ～ 255 のスケールで機能しますが 255 は 100%、0 は 0% に相当します。

RGB で黒を設定するには、rgb(0 0 0) と定義します。 赤 0、緑、青 0 です。 黒は rgb(0%, 0%, 0%) と定義することもできます。 白は正反対の rgb(255, 255, 255) または rgb(100%, 100%, 100%) です。

アルファ版は、次の 2 つの方法のいずれかで rgb() に設定されます。 赤、緑、青のパラメータの後に / を追加します。 または rgba() 関数を使用します。 アルファは、0 ～ 1 のパーセンテージまたは小数で定義できます。 たとえば、最新のブラウザで 50% のアルファ ブラックを設定するには、rgb(0 0 0 / 50%) または rgb(0 0 0 / 0.5) と記述します。 より広範なサポートのために、rgba() 関数を使用すると、 書き込み: rgba(0, 0, 0, 50%) または rgba(0, 0, 0, 0.5)。

HSL（色相、彩度、明度）

h1 {
  color: hsl(344, 79%, 40%);
}

HSL は、色相、彩度、明度の略です。 色相は、カラーホイール上の値を 0 度から 360 度までの赤色（0 と 360 の両方）で表します。 色相 180（50%）は青の範囲です。 これが色の原点です。

彩度は、選択した色相の鮮やかさです。 完全に彩度の低い色（彩度 0%）はグレースケールで表示されます。 そして最後に、明るさは追加された光の白から黒までのスケールを表すパラメータです。 明るさが 100% の場合は、常に白になります。

hsl() カラー関数を使用すると、 トゥルーブラックを定義するには、hsl(0 0% 0%) または hsl(0deg 0% 0%) と記述します。 これは、hue パラメータが色相環の次数を定義するためです。 数値型を使用する場合は 0 ～ 360 になります。 角度の型（0deg）または (0turn) を使用することもできます。 彩度と明度はどちらもパーセンテージで定義します。

alpha は hsl() で定義されます。 rgb() と同じように、hue、saturation、lightness の各パラメータの後に / を追加するか、 hsla() 関数を使用します。 アルファは、0 ～ 1 のパーセンテージまたは小数で定義できます。 たとえば、50% のアルファ ブラックを設定するには、hsl(0 0% 0% / 50%) または hsl(0 0% 0% / 0.5) を使用します。 hsla() 関数を使用して、hsla(0, 0%, 0%, 50%) または hsla(0, 0%, 0%, 0.5) を記述します。

色のキーワード

CSS には 148 色の名前があります。 これらは、紫色、トマト、アキノキリンソウなどのシンプルな英語名です。 最も人気のある名前は Web Almanac によると、 黒、白、赤、青、グレーの 3 種類があります。 ゴールデンロッド、アリスブルー、ホットピンクなどが人気です。

標準の色のほかに、特別なキーワードも使用できます。

• transparent は完全に透明な色です。 これは background-color の初期値でもあります。
• currentColor は、color プロパティのコンテキストに基づいて計算された動的値です。 テキストの色が red の場合に、border-color を currentColor に設定すると、それも赤になります。 currentColor を定義する要素に color の値が定義されていない場合、 currentColor はカスケードによって計算されます。

CSS ルールで色を使用する場所

CSS プロパティが 値として <color> データ型を使用します。 上記の色表現方法のいずれも使用できます。 テキストのスタイル設定には、color、text-shadow、text-decoration-color プロパティを使用する 値には色を指定するか、値の一部として色を指定します。

背景については、background または background-color の値として色を設定できます。 色は、linear-gradient などのグラデーションでも使用できます。 グラデーションは、CSS でプログラムで定義できる画像の一種です。 グラデーションでは、16 進数、RGB、hsl など、任意の組み合わせのカラー形式で 2 つ以上の色を使用できます。

最後に、border-color と outline-color で、ボックスの枠線と枠線の色を設定します。 box-shadow プロパティは、値の 1 つとして色も指定できます。

理解度をチェックする

色に関する知識をテストする

リソース

• HSL で角度を使用する方法を示す便利なデモ
• カラーに関する総合ガイド
• 広色域に関する総合ガイド
• [動画] 16 進数コードの読み方の説明
• 16 進数コードの仕組み