CSS の色
CSSは、140以上の色名、HEX 値、RGB 値、RGBA 値、HSL 値、HSLA 値、および不透明度をサポートしています。
RGBA カラー
RGBAカラー値は、RGBカラー値をアルファ チャネルで拡張したもので、色の不透明度を指定します。
RGBAカラー値は、rgba(red, green, blue, alpha)で指定します。アルファパラメータは、0.0(完全に透明)から1.0(完全に不透明)までの数値です。
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
次の例では、さまざまなRGBAカラーを定義しています。
例
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSLの色
HSLは、色相、彩度、明度の略です。
HSLカラー値は、hsl(色相、彩度、明度)で指定されます。
- 色相は、カラー ホイールの次数です(0 ～ 360)。- 0(または360)は赤
- 120は緑
- 240はブルー
- 彩度はパーセント値です。100%はフルカラーです。
- 明度もパーセンテージです。 0%は暗い(黒)、100%は白です。
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);
次の例では、さまざまな HSLカラーを定義しています。
例
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLAカラー
HSLAカラー値は、色の不透明度を指定するアルファチャネルを使用して HSLカラー値を拡張したものです。
HSLAカラー値は、hsla(色相、彩度、明度、アルファ)で指定されます。アルファパラメータは不透明度を定義します。アルファパラメータは、0.0(完全に透明)から1.0(完全に不透明)までの数値です。
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
次の例では、さまざまなHSLAカラーを定義しています。
例
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
不透明度
CSSopacityプロパティは、要素全体の不透明度を設定します(背景色とテキストの両方が不透明/透明になります)。
opacityプロパティ値は、0.0(完全に透明)から1.0(完全に不透明)までの数値でなければなりません。
rgb(255, 0, 0);不透明度:0.2;
rgb(255, 0, 0);不透明度:0.4;
rgb(255, 0, 0);不透明度:0.6;
rgb(255, 0, 0);不透明度:0.8;
上記のテキストも透明/不透明になることに注意してください!
次の例は、不透明度を持つさまざまな要素を示しています。
例
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。