Lesson 09 表現の幅が広がるRGBaプロパティ・バリュー - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

Webデザイン 表現&技法の 新・スタンダード

Lesson 9

表現の幅が広がる RGBaプロパティ・バリュー

	制作・文			比留間和也（面白法人カヤック）
＞	To Use			CSS
＞	Browser			IE 9over | Firefox 3over | Safari 5over

InternetExplorer9から対応するRGBaプロパティ・バリュー。これまでは半透明の色を表現したい場合は透過PNGを使用するしかなかったが、これを使えば色を利用するシーンすべてに半透明の色を指定できる。

RGBaは透明色を指定する新しいプロパティ・バリューだ。RGBはもちろんRed・Green・Blueの頭文字で、それぞれ0〜255の数字で色の度合いを指定する。最後の「a」はアルファの a だ。つまり透過度を指定する値になる。値は0.0 〜1.0の小 数を指定する。1が透過なし、0が透明だ【1-1】。


【1-1】左から順にR(200)、G(100)、B(50)、a(0.5)となる

RGBaの簡単なサンプルを作ってみよう。まずは簡単なマークアップを施す。色の指定だけなので特に目立ったマークアップではないのがわかる【2-1】【2-2】。サンプルでは背景に透過色を指定するため、ひとつのdiv要素とコンテンツ部分のみだ。


【2-1】コンテンツ全体をグルーピングするdivとsection、見出しと文章という最小限の構成だ


【2-2】まだなにもスタイルをあてていない状態

マークアップした要素にスタイルをあてていく。といっても、background-colorにRGBaを指定するだけだ。これだけで、いままでは画像を用意するなどの手間のかかっていた表現を手軽に再現できる【3-1】【3-2】。


【3-1】普通に背景に色を指定するのと同様、background-colorにRGBaプロパティ・バリューを指定するだけだ（サンプルに直接関係ない指定は若干割愛している）


【3-2】ブラウザで表示した状態（透過具合がわかりやすいように、サンプルでは背景画像を敷いている）

ただし、このRGBaプロパティ・バリューはIEでは対応しておらず（2010年12月現在）、表示しても背景がまったくない状態になってしまう【4-1】。


【4-1】サンプルではかろうじて文字が読めるが、色によってはまったく読めなくなってしまう可能性があるため注意が必要だ

そこで、RGBaに対応していないIEでは通常の背景色を指定しつつ、RGBaに対応しているブラウザ向けに半透明の色を反映させる。これは一般的にフォールバックと呼ばれる手法だ。ソース自体はかなりシンプルに記述できる【5-1】【5-2】。


【5-1】前のサンプルで「background-color: rgba(0,0,0,0.6);」と書かれていた箇所をショートハンドのbackgroundを用いて記述する。ショートハンドでないと効果がないので注意しよう


【5-2】実際に表示した様子。IEでは通常の背景色が反映していることが分かる

背景であれば、透過PNGを使うという手もある。【6-1】のように色を指定していた部分で背景画像として透過PNGを指定する。しかし、透過PNGはIE6で対応していないため、「07」の内容をあわせて指定することで対応可能だ。


【6-1】工程「05」の方法と組み合わせて、背景に透過PNGの画像を指定している

IE6向けには独自拡張のfilterを用いる。【7-1】のように指定を追加することで透過PNGに対応していないIE6でも透過色を指定することができる。filterの機能である透過度を持ったグラデーションを、あえて始点と終点の色を同一にし、透過度だけ利用することで背景の透過を実現している。この機能はIE6以降のIEでは対応しているが【7-2】 、IE7などではアンチエイリアスの効いたフォント（メイリオなど）のアンチエイリアスがオフになる問題があるため注意が必要だ。

このように、IEのシェアを考えると、結局元の手法と併用せざるを得ないのが実情だ。しかし、コラムで紹介するような表現や、プログレッシブ・エンハンスメントの概念を取り入れることで幅広い表現が可能になるので、ぜひ試してみてほしい。


【7-1】filterに指定している色は16進数で表し、最初の2桁（例ではB4）が透過度を表している。
IE6だけに読み込ませるため、CSSハックなどを利用して読み込ませよう。
※zoomはfilterを反映させるために必要な記述だ


【7-2】IE6で見た状態。しっかりと透過されているのがわかる