CSSには、RGBに透明度を加えたRGBAで色を指定する方法もある

スタイルシートでは、光の三原色(赤・緑・青)の量で色を表すRGB値のほかに、透明度の指定を加えたRGBA値で色を指定することもできます。このRGBA値での色指定を使えば、特定の文字を半透明で表示させたり、背景を塗りつぶしている色を半透明にして背後を透過させたり、枠線の色を半透明にして背後を透けさせたりできます。RGBとRGBAの違いは、下記の通りA(＝Alpha channel)があるかないかです。

• RGB＝Red(赤), Green(緑), Blue(青)
• RGBA＝Red(赤), Green(緑), Blue(青), Alpha(透明度)

従来のように赤・緑・青の3色の割合を指定するのに加えて、透明度(正確には不透明度ですが)を加えて色を指定します。使い方は簡単で、単に今までRGB値を使っていた場所で、記述をRGBA値に変えれば良いだけです。

従来のRGB値での色指定方法

CSSで色を指定する方法としては、色名を書く、16進数で指定する、RGB値を個別に書くなどの方法があります。これらの場合、多く使われているのは前者の2つでしょう。RGBの値を1つずつ10進数(0～255)で指定する方法は記述量が多くて面倒ですし。

color: orange;         /* 色名で指定   */
color: #FFA500;        /* 16進数で指定 */
color: rgb(255,165,0); /* RGB値で指定  */

しかし、これらのうち透明度を付加して色を指定できるのは、3つ目のRGB値(RGBA値)を個別に書く方法だけです。

透明度(不透明度)を加えたRGBA値での色指定方法

透明度(アルファチャンネル)を指定して記述する場合は、下記のように記述します。

color: rgba(255,165,0, 0.5);  /* RGBA値で指定 */

上記のようにrgba(～)の丸括弧の中に4つの数値を記述します。前3つの値はRGB(赤緑青)の指定で、最後の「0.5」の部分が不透明度です。4つの値は具体的には以下の仕様で記述します。

1. R: 赤色の度合い(0～255) ：上記の例では255
2. G: 緑色の度合い(0～255) ：上記の例では165
3. B: 青色の度合い(0～255) ：上記の例では0
4. A: 不透明な割合(0～1) ：上記の例では0.5

アルファチャンネルは0～1の間で指定し、0が完全に透明・1が完全に不透明です。上記の例では0.5を指定しているので、ちょうど半透明(＝50％透過)になります。

先程のRGBA値を文字色に指定してみると、上記の上側のように見えます。
背景色をRGBA値にすれば、上記の下側のように背景を透過できます。この例では文字色には白色(不透明)を指定しています。

RGBAカラーモデルを使って透明度を加えた表示例

以下は、透明度を付加した文字の表示例です。文字の背後に背景画像が透けて見える点を確認してみて下さい。

このように、自由自在に透明度を変化させられます。
ここで「透過25％」というのは「アルファチャンネル：0.75」のこと、「透過75％」というのは「アルファチャンネル：0.25」のことです。実際には「透明度」ではなく「不透明度」なので、このようになります。

上記の半透明表示を実現するCSSソースは以下の通りです。

.red25 { color: rgba( 255, 0, 0, 0.75 ); }      /* 赤色:透明度25% */
.red50 { color: rgba( 255, 0, 0, 0.5 ); }       /* 赤色:透明度50% */
.red75 { color: rgba( 255, 0, 0, 0.25 ); }      /* 赤色:透明度75% */
.blue25 { color: rgba( 0, 0, 255, 0.75 ); }     /* 青色:透明度25% */
.blue50 { color: rgba( 0, 0, 255, 0.5 ); }      /* 青色:透明度50% */
.blue75 { color: rgba( 0, 0, 255, 0.25 ); }     /* 青色:透明度75% */
.yellow25 { color: rgba( 255, 255, 0, 0.75 ); } /* 黄色:透明度25% */
.yellow50 { color: rgba( 255, 255, 0, 0.5 ); }  /* 黄色:透明度50% */
.yellow75 { color: rgba( 255, 255, 0, 0.25 ); } /* 黄色:透明度75% */
.green25 { color: rgba( 0, 204, 0, 0.75 ); }    /* 緑色:透明度25% */
.green50 { color: rgba( 0, 204, 0, 0.5 ); }     /* 緑色:透明度50% */
.green75 { color: rgba( 0, 204, 0, 0.25 ); }    /* 緑色:透明度75% */

以下は、透明度を15％～90％まで1％単位で変化させた表示例です。

上記は、アルファチャンネル(不透明度)の値を0.85～0.1まで0.01ずつ連続的に減らした結果です。1％ずつ不透明度を減らしているので、つまり、少しずつ透明度が高くなっていきます。(※JavaScriptが動作する環境で閲覧した場合しか表示されません。)

このように、自由な透明度で文字や背景など様々な配色を透過させられます。
この方法を使ったり応用したりすると、マウスが載ったときだけ画像を半透明にするとか、テキストの背景色を半透明にしつつ、文字色は不透明にするといったデザインも簡単に作れます。

(更新日：2017年07月12日)