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

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

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

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

数値の色

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

16 進数色コード

h1 {
  color: #b71540;
}

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

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

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

16 進数のスケールは 0 ~ 9A ~ 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%)は青の範囲です。 これが色の原点です。

各角度の値が何を表しているかがわかるように、60 度単位の角度値のラベルが付いたカラーホイール

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

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

視覚的に分類された HSL カラー関数。色相には色相環が使用されます。彩度は灰色が青緑色に混じり合っていることを示します。明るさは黒から白に変わります。

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-colorcurrentColor に設定すると、それも赤になります。 currentColor を定義する要素に color の値が定義されていない場合、 currentColor はカスケードによって計算されます。
で確認できます。

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

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

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

最後に、border-coloroutline-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
🎉

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

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 値です。

リソース