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

エ・ビスコム・テック・ラボ
2008-02-15 19:23:01
Internet Explorerの例も交えながら、Firefox 3とSafari 3が対応しているアルファチャンネルによる透明度の指定をみていこう。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

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

　CSS 3では、RGBと同じようにHSLでも色を指定することができる。HSLは、色相（Hue）、彩度（Saturation）、輝度（Lightness）で色を指定するものだ。アルファチャンネルを加えたHSLAで色を指定することもでき、H（色相）、S（彩度）、L（輝度）、A（アルファチャンネル）の値を「,（カンマ）」で区切って指定する。

　たとえば、次のサンプルでは

の背景を緑色に、文字の色を白色に指定している。上の
の背景にはアルファチャンネルを指定していないので、透明にはならない。下の
の背景にはアルファチャンネルを「0.5」と指定したので、緑色が半透明になり、青い横縞の背景が透けて表示されることがわかる。

Firefox 3の表示 Firefox 3の表示
Safari 3の表示 Safari 3の表示 
div.samp1{
background-color: hsl(120,100%,50%); 
color: hsl(0,100%,100%); 
}

div.samp2{
background-color: hsla(120,100%,50%,0.5); 
color: hsla(0,100%,100%,0.5); 
}
※ブラウザで表示を確認する

　なお、HSLによる色指定にはFirefoxは対応済みだったが、バージョン 3からHSLAにも対応した。また、SafariはHSLとHSLAのどちらにも未対応だったが、バージョン 3から利用できるようになっている。

　次回は、アルファチャンネルとopacityプロパティの違いなどを見ていきたい。

  • 新着記事
  • 特集
  • ブログ