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 */
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。