The CSS Podcast - 006: Color Part One
色はウェブサイトの重要な要素であり、CSS には色の種類、機能、処理に関する多くのオプションがあります。
使用する色の種類をどのように決定しますか?色を半透明にする方法を教えてください。 このレッスンでは、プロジェクトとチームにとって適切な判断を行うために利用できるオプションについて説明します。
CSS には、文字列や数値など、さまざまなデータ型があります。色はこれらのタイプの 1 つであり、独自の定義に数値などの他のタイプを使用します。
数値の色
CSS で色を初めて扱う場合は、数値の色を使用する可能性が高いでしょう。数値の色値は、いくつかの形式で扱うことができます。
16 進数色
h1 {
color: #b71540;
}
16 進数表記(「16 進数」と略されることもあります)は、RGB の省略形の構文です。3 つの原色である赤、緑、青に数値を割り当てます。
16 進数は 0 ~ 9 と A ~ F の範囲です。6 桁のシーケンスで使用すると、RGB 数値範囲(0 ~ 255)に変換され、それぞれ赤、緑、青の色チャンネルに対応します。
任意の数値の色を使用してアルファ値を定義することもできます。アルファ値は透明度の割合です。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 を使用します。
- 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)
として定義します。これは、赤、緑、青がゼロの値です。黒は rgb(0%, 0%, 0%)
として定義することもできます。白は正反対の rgb(255, 255, 255)
または rgb(100%, 100%, 100%)
です。
アルファは、次の 2 つの方法のいずれかで rgb()
に設定されます。赤、緑、青のパラメータの後に /
を追加するか、rgba()
関数を使用します。alpha は、パーセンテージまたは 0 ~ 1 の 10 進数で定義できます。たとえば、最新のブラウザで 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 は、赤(0 と 360 の両方)から始まる、色相環上の値(0 ~ 360 度)を表します。色相 180(50%)は青色の範囲内です。これが、目に見える色の起源です。
彩度は、選択した色相の鮮やかさを表します。彩度が完全に下がった色(彩度 0%
)はグレースケールで表示されます。最後に、明るさは、追加された光の白から黒までのスケールを表すパラメータです。明るさが 100%
の場合、常に白になります。
hsl()
色関数を使用して、hsl(0 0% 0%)
または hsl(0deg 0% 0%)
を記述することで、真の黒を定義します。これは、hue パラメータが色相環上の度数を定義するためです。数値型を使用する場合、この値は 0 ~ 360 です。角度タイプ(0deg
)または (0turn)
を使用することもできます。彩度と明るさはどちらもパーセンテージで定義されます。
アルファは hsl()
で定義されます。rgb()
と同様に、色相、彩度、明るさのパラメータの後に /
を追加するか、hsla()
関数を使用します。alpha は、パーセンテージまたは 0 ~ 1 の 10 進数で定義できます。たとえば、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 個の名前付き色があります。紫、トマト、ゴールデンロッドなど、わかりやすい名前です。ウェブ アルマナックによると、最も人気のある名前には、black、white、red、blue、gray などがあります。おすすめの色は、goldenrod、aliceblue、hotpink などです。
標準の色に加えて、次の特別なキーワードも使用できます。
transparent
は完全に透明な色です。これはbackground-color
の初期値でもあります。currentColor
は、color
プロパティのコンテキストに基づいて計算された動的値です。テキストの色がred
で、border-color
をcurrentColor
に設定すると、border-color
も赤になります。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
プロパティでは、値として色も指定できます。
理解度を確認する
色に関する知識をテストする
次のうち、有効な色はどれですか。
#0f08
hotpink
#OOFZ2
hsl(180deg 50% 50%)
rbga(400 0 1)
rgb(255, 0, 0)
無効な hsl 色を見つけます。
hsl(0, 0, 0)
hsl(.5turn 40% 60%)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)
hsl(5, 0%, 90%)