CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

RGBAとHSLAを使った色指定

課題

rgba()や hsla()を使って、CSSで半透明色を試してみたことがある

読者も多いでしょう。これらは 2009 年に定義され、大きな変革をもたら

しました。以前も半透明色は不可能ではありませんでしたが、一時しのぎ

の代替案やシム（shim）あるいはIE のフィルターを使った格好悪いハック

などが必要でした。なお、半透明色は背景色として指定されることがほと

んどでした。これにはいくつか理由があります。

半透明なボーダー

1

いち 早 く半 透 明 色を 利 用し た 開発 者 は 、そ の 形式 が

#ff0066や

orangeなどの通常の色と同じだことを認識していませんでした。その

ため、半透明色を画像と同様に扱い、もっぱら背景に利用していました。

他のプロパティと比べて、背景色は代替案を用意するのがとても簡単でし

た。例えば、大きさが1pxの半透明の画像を用意すれば、半透明の背景色

を代替できます。他のプロパティでは、不透明な色で塗りつぶすくらいし

か代替案がありませんでした。

他のプロパティ（ボーダーなど）で半透明色を指定するのが困難な場合が

ありました。詳しくは後ほど解説します。

62

2章：背景とボーダー

■

■

■

白の背景色が設定されたコンテナ ...