【CSS】色・グラデーションを扱う関数一覧
色関数
| 関数 | 値 | 説明 |
|---|---|---|
rgb() | rgb(255, 0, 0) | RGB色空間を使用して色を指定。 |
rgba() | rgba(255, 0, 0, 0.5) | RGB色空間を使用して透明度を持つ色を指定。 |
hsl() | hsl(120, 100%, 50%) | HSL色空間を使用して色を指定。 |
hsla() | hsla(120, 100%, 50%, 0.7) | HSL色空間を使用して透明度を持つ色を指定。 |
rgb(),rgba()
RGB関数は赤（Red）・緑（Green）・青（Blue）の各出力値を指定し、RGBA関数はアルファ（透明度）も含めて指定します。
透明度は0〜1で設定し、0は0%（透明）1は100%（不透明）0.5は50%（半透明）となります。
hsl(),hsla()
HSL関数とHSLA関数は、色を指定するためのもので、HSL関数は色相（Hue）、彩度（Saturation）、明度（Lightness）を指定し、HSLA関数はアルファ（透明度）も含めて指定します。
記述例：
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
グラデーション関数
| 関数 | 値 | 説明 |
|---|---|---|
linear-gradient() | linear-gradient(to right, red, yellow) | 線形グラデーションを指定。方向と色の範囲を指定。 |
radial-gradient() | radial-gradient(circle, red, yellow) | 放射状グラデーションを指定。中心形状と色の範囲を指定。 |
linear-gradient()
linear-gradient()は、CSSで線形のグラデーションを作成するための関数です。
この関数を使用すると、複数の色を線形に結合し、滑らかな色の変化を生成することができます。
このグラデーションは、ボーダー、背景、テキストなどのさまざまな要素に適用することができます。
左から右へのグラデーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
この例では、左から右へのグラデーションを作成しています。開始色が#3498dbで終了色が#e74c3cです。
斜めのグラデーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
この例では、45度の角度で斜めのグラデーションを作成しています。
開始色が#2ecc71で終了色が#f39c12です。
複数色のグラデーションを指定
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
この例では、左から右へのグラデーションで、3つの異なる色を指定しています。
透明度を含むグラデーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
この例では、透明度（アルファチャンネル）を含むグラデーションを作成しています。
開始色は赤で透明度が0.5、終了色は緑で透明度が0.5です。
radial-gradient()
radial-gradient()は、CSSで放射状のグラデーションを作成するための関数です。
この関数を使用すると、中心から外側に向かって色が広がるグラデーションが作成できます。
このグラデーションは、背景やボーダー、要素の任意のプロパティに適用することができます。
円形のグラデーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
この例では、中心から外側に向かって円形のグラデーションを作成しています。
開始色が#3498dbで終了色が#e74c3cです。
楕円形のグラデーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
この例では、中心から外側に向かって楕円形のグラデーションを作成しています。
開始色が#2ecc71で終了色が#f39c12です。
中心位置を指定したグラデーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
この例では、グラデーションの中心位置を30% 70%に指定しています。
開始色が#3498dbで終了色が#e74c3cです。
複数色のグラデーション
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
この例では、中心から外側に向かって円形のグラデーションで、3つの異なる色ストップを指定しています。
