色

CSS ポッドキャスト - 006: Color Part One

色はウェブサイトの重要な要素であり、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 番目の数字を加算します。例として 75% のアルファ版 BF を使用する:

  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-255 の範囲で指定する必要があります。 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 は色相（hue）、彩度（saturation）、明度（lightness）の略です。色相はカラーホイール上の値で、0 ～ 360 度の範囲で赤から始まります（0 と 360 の両方）。 180（50%）の色相は青の範囲です。 ここが、私たちが目にする色の原点です。

角度の値が 60 度単位で表されるカラーホイールで、それぞれの角度の値が表すものを簡単に確認できる

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

hsl() カラー関数を使用して、hsl(0 0% 0%) または hsl(0deg 0% 0%) を記述して真の黒を定義します。これは、hue パラメータがカラーホイールでの度数（数値タイプを使用する場合、0 ～ 360）を定義するためです。角度のタイプ（0deg）または (0turn) を使用することもできます。彩度と明度はどちらもパーセンテージで定義されます。

HSL カラー関数を視覚的に分けた図。hue にはカラーホイールを使用します。彩度はグレーが青緑色に調和しています。明度が黒から白へと変化します。

アルファは hsl() 内で定義されます。これは rgb() と同様に、色相、彩度、明度のパラメータの後に / を追加するか、または 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 の名前付き色があります。これらは、紫、トマト、ゴールデンロッドなどのプレーンな英語名です。ウェブ アルゴリズムによると、最も一般的な名称には黒、白、赤、青、グレーがあります。おすすめのゲームには、Goldenrod、aliceblue、hotpink があります。

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

  • 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 つとして色も指定できます。

理解度チェック

色についての知識をチェック

有効な色は次のうちどれですか。

rbga(400 0 1)
rbga は rgba のタイプミスで、400 は許容される値よりも大きいため、無効です。
#0f08
🎉
#OOFZ2
これは 16 進数値ではなく、5 つの数字のみで、Z が含まれているため無効になります。
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

無効な HLS 色を見つけます。

hsl(5, 0%, 90%)
これは有効な hsl 値です。
hsl(.5turn 40% 60%)
これは有効な hsl 値です。
hsl(0, 0, 0)
🎉? 見つけました。2 番目と 3 番目の値はパーセンテージにする必要があります。
hsl(2rad 50% 50%)
これは有効な hsl 値です。
hsl(0 0% 0% / 20%)
これは有効な hsl 値です。

関連情報