スタイルシートでは、光の三原色(赤・緑・青)の量で色を表す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つの値は具体的には以下の仕様で記述します。
- R: 赤色の度合い(0～255) ：上記の例では255
- G: 緑色の度合い(0～255) ：上記の例では165
- B: 青色の度合い(0～255) ：上記の例では0
- A: 不透明な割合(0～1) ：上記の例では0.5
アルファチャンネルは0～1の間で指定し、0が完全に透明・1が完全に不透明です。上記の例では0.5を指定しているので、ちょうど半透明(＝50％透過)になります。
オレンジ色で半透明の文字色
オレンジ色で半透明の背景色
先程のRGBA値を文字色に指定してみると、上記の上側のように見えます。
背景色をRGBA値にすれば、上記の下側のように背景を透過できます。この例では文字色には白色(不透明)を指定しています。
RGBAカラーモデルを使って透明度を加えた表示例
以下は、透明度を付加した文字の表示例です。文字の背後に背景画像が透けて見える点を確認してみて下さい。
Red 透過25%Red 透過50%Red 透過75%
Blue 透過25%Blue 透過50%Blue 透過75%
Yellow 透過25%Yellow 透過50%Yellow 透過75%
Green 透過25%Green 透過50%Green 透過75%
このように、自由自在に透明度を変化させられます。
ここで「透過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ずつ連続的に減らした結果です。(JavaScriptがONでないと表示されません。)
1％ずつ不透明度を減らしているので、つまり、少しずつ透明度が高くなっていきます。
このように、自由な透明度で文字や背景など様々な配色を透過させられます。
■関連記事：
《2016/05/04 10:27 初版公開》