アルファチャンネルを使った透明度の設定：FirefoxとSafariのCSS対応

透明度を設定する

　スタイルシートで透明度を指定することができれば、半透明にした文字を画像に重ねるといったデザインも簡単に作れるようになる。CSS 3では、アルファチャンネルまたはopacityプロパティで透明度を指定する方法が提案されており、Firefox 3とSafari 3は両方の指定方法に対応している。

　今回は、色に関する定義をまとめたCSS 3の勧告候補、CSS3 Color Moduleを参考にしながら、アルファチャンネルを使った透明度の設定について見ていきたい。

RGBAによるアルファチャンネルの指定

　CSS3では、RGBによる色指定にアルファチャンネルを加えて、RGBAによる色指定ができるようになっている。RGBAでは次のように、R（赤）、G（緑）、B（青）、A（アルファチャンネル）の値を「,（カンマ）」で区切って記述する。ただし、RGBの値は16進数で指定することが認められていないので、0〜255の整数か、0〜100％の割合で指定しなければならない。一方、アルファチャンネルの値は0〜1.0で指定することができ、完全に透明にする場合は「0」、不透明にする場合は「1.0」と指定する。

background-color: rgba(255,255,255,0.5)

　次のサンプルは<div>の背景を白色に指定したものだ。上の<div>の背景はアルファチャンネルを指定していないので透明にはならない。一方、下の<div>の背景はアルファチャンネルを「0.5」と指定したので半透明になり、青い横縞のページの背景が透けて見えるようになる。

Firefox 3の表示

Safari 3の表示

body	{
	background-image: url(back.gif);
	}

div.samp1	{
	background-color: rgb(255,255,255); 
	}

div.samp2	{
	background-color: rgba(255,255,255,0.5); 
	}

<div class="samp1">HELLO</div>

<div class="samp2">HELLO</div>

※ブラウザで表示を確認する

　なお、RGBAの指定に関しては、これまでもSafariでは対応しており、Firefoxではバージョン3で利用できるようになっている。

　Internet ExplorerなどRGBAの色指定に対応していないブラウザでは、次のようにRGBAの指定は無視して表示される。CSS 3においても「未対応のブラウザではRGBAをRGBとしては処理せず、RGBAの指定は無視すること」とされているので、正しく処理されていると言えるだろう。

Internet Explorerの表示