色はウェブサイトの重要な要素であり、CSS には色の種類、機能、処理に関する多くのオプションがあります。

使用する色の種類をどのように決定しますか?色を半透明にする方法を教えてください。 このレッスンでは、プロジェクトとチームにとって適切な判断を行うために利用できるオプションについて説明します。

CSS には、文字列や数値など、さまざまなデータ型があります。色はこれらのタイプの 1 つであり、独自の定義に数値などの他のタイプを使用します。

CSS で色を初めて扱う場合は、数値の色を使用する可能性が高いでしょう。数値の色値は、いくつかの形式で扱うことができます。

16 進数色

h1 {
  color: #b71540;
}

16 進数表記(「16 進数」と略されることもあります)は、RGB の省略形の構文です。3 つの原色である赤、緑、青に数値を割り当てます。

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

任意の数値の色を使用してアルファ値を定義することもできます。アルファ値は透明度の割合です。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 番目の桁を加算します。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 ~ 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%)は青色の範囲内です。これが、目に見える色の起源です。

各角度の値を視覚的に把握できるように、60 度刻みの角度値のラベルが付いたカラーホイール

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

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

HSL カラー関数を視覚的に分解したものです。色相は色相環を使用します。彩度はグレーがターコイズにブレンドされていることを示しています。明るさは黒から白を示します。

アルファは 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-colorcurrentColor に設定すると、border-color も赤になります。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 プロパティでは、値として色も指定できます。

理解度を確認する

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

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

hotpink
rgb(255, 0, 0)
rbga(400 0 1)
hsl(180deg 50% 50%)
#OOFZ2
#0f08

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

hsl(0 0% 0% / 20%)
hsl(2rad 50% 50%)
hsl(0, 0, 0)
hsl(.5turn 40% 60%)
hsl(5, 0%, 90%)

リソース