スタイルシート　アルファチャンネルを使った透明度の設定

4月26日、「Internet Explorer 9」（以下、IE9）の日本語正式版が公開されました。（残念ながらワタクシのＰＣは Windows XP なのでサポート外のためダウンロードできませんが。）
IE9は、HTML5/CSS3といった次世代Web標準技術への対応も拡充されたということで、久しぶりにマニアックな（笑）スタイルシートねたでもしようと思います。

以前、｢背景の透かし｣テクニックについてお話したことがありましたが、今回は背景色や文字の色などを半透明表示させるプロパティーをご紹介します。
まずは前回の復習です。
上の例のように背景を透かす方法には、透過形式の背景画像をもちいる方法とスタイルシートだけで透過させる方法があります。 ある調査によれば国内の『 Internet Explorer 6 』のブラウザシェアも１割を切っている状況なので透明度を指定したＰＮＧ画像をもちいるのが今のところベストかもしれませんが、任意の色や透明度にするにはそのたびに専用ソフトで画像を作らなくてはならないため手間が掛かります。
かと言って、Ａｌｐｈａフィルタや opacity などで透過させようとすると簡単ではありますが、内包する画像や文字まで半透明になり見難くなってしまいます。
そこで登場したのがHTML5/CSS3といった次世代Web標準技術の一つでRGBaプロパティバリューです。OpacityプロパティとRGBaプロパティバリューは、どちらも透明度を指定し背景やテキストを透けさせることが可能なプロパティです。
Ａｌｐｈａフィルタや Opacityプロパティは背景色や文字だけでなく画像も透過させることができるのがメリットなのですが、指定した要素に含まれるすべてに適用されてしまいます。
対してRGBaプロパティバリューは画像を半透明にすることができないかわりにbackground-color（背景色）/ color（テキストカラー）/ border-color（外枠線色）といった要素ごとに色と透明度を細かく指定をできるのがメリットです。
ディメリットとしては新しい技術ゆえに下記表のように古いブラウザに対応していないことです。

RGBaプロパティバリュー ブラウザ対応表
Internet Explorer 9	○	Internet Explorer 8 以下	×
Firefox 3 以上	○	Firefox 2	×
Safari 3.1 以上	○	Safari 2 以下	×
Opera 10 以上	○	Opera 9 以下	×
Google Chrome 2 以上	○
Mobile Safari ( iPhone / iPod Touch / iPad )	○
BlackBerry Storm Browser	○

下の例をご覧下さい。
写真上にある３つのブロックはテキストカラーと外枠線を白色に指定していますが、上のブロックには背景色を指定していないのでバックの写真がそのまま背景となっています。
真ん中のブロックは背景色をRGBaプロパティバリューで透明度50％の黒色で指定しているので対応ブラウザではそのように見えているはずですが、Internet Explorer 8 以下のように対応していないブラウザでは上のブロックのように背景色が表示されてないと思います。（Safari 5 でのスクリーンショット）
下のブロックではテキストカラーと背景の色が似ていると見難くなるので、対応ブラウザには透明度50％の黒色の背景色に、未対応ブラウザには普通の黒色に表示するように指定しています。

以前にもお話したことがありましましたがWebサイトで色を表現する方法には、ある一つの同じ色を表すにもカラーネイムで指定する方法と色情報を数値化した16進数表記カラーコードや10進数表記カラーコード（RGBカラーモデル）など、様々な指定方法があります。
RGBカラーモデルとは、光の3原色とも呼ばれる赤（Red），緑（Green），青（Blue）の3色を組み合わせて色彩を表現する方法のことです（加法混色）。
スタイルシートで背景色をRGBカラーモデルで指定するには下記のように記入します。
例えば黒色はrgb(0,0,0)、赤色はrgb(255,0,0)、白色はrgb(255,255,255)です。

関連情報ホームページURL：

Web Safe Color一覧表/カラーチャート
ウェブカラーコード

RGBカラーの３色にアルファ（Alpha）と呼ばれる透過度の情報を加えたものが「 RGBaプロパティバリュー 」です。
RGBAカラーモデルで色を指定する際には、カンマ（ , ）区切りにした３つの数値でRGBの色を指定した後に、数値で透明度を指定します。
スタイルシートで背景色をRGBaカラーモデルで指定するには下記のように記入します。
例えば透明度50%の黒色はrgba(0,0,0,0.5)と表記します。

なお、CSS 3ではRGBと同じようにHSLでも色を指定することができます。HSLは、色相（Hue）、彩度（Saturation）、輝度（Lightness）で色を指定するものです。アルファチャンネルを加えたHSLAで色を指定することもでき、RGBaと同じようにH（色相）、S（彩度）、L（輝度）、A（アルファチャンネル）の値を「,（カンマ）」で区切って指定します。
例えば透明度70%の白色はhsla(0,100%,100%,0.7)と表記します。

マニアックな内容でしたので、興味のない方には何のことかさっぱり解からないと思いますが、次回は 【みんカラ】ブログで透過形式の背景画像を使わないで背景を透かす スタイルシートのカスタマイズ例を解説したいと思います。