TECH I.S.

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(色相、彩度、明度) で指定されます。

  1. 色相は、カラー ホイールの次数です (0 ~ 360)。- 0 (または 360) は赤
  • 120は緑
  • 240はブルー
  1. 彩度はパーセント値です。100% はフルカラーです。
  2. 明度もパーセンテージです。 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 */

自分で試してみる »




プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細