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% アルファ版の場合:
- B は 11 で、16 を掛けると 176 になります。
- F = 15
- 176 + 15 = 191 となります。
- アルファ値は 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(180deg 50% 50%)
rgb(255, 0, 0)
#OOFZ2
#0f08
rbga(400 0 1)
hotpink
無効な SSL 色を見つけます。
hsl(0 0% 0% / 20%)
hsl(0, 0, 0)
hsl(.5turn 40% 60%)
hsl(5, 0%, 90%)
hsl(2rad 50% 50%)