CSS3で新たに追加されるプロパティと各ブラウザの対応状況まとめ

2011年03月09日

CSS3で新たに追加されるプロパティは多岐に渡りますが、今回はそれらのうちから色に関するプロパティの説明とサンプル、そして各ブラウザの対応状況をご紹介します。

RGBaプロパティ

RGBaプロパティはRed Green Blue alphaTransparencyの略で、要素に対して透明度を持った色を指定することができるプロパティです。適用できる要素は、border-color、background-color、colorの以上3つです。

記述方法

以下のように記述します。

1.sample {  
2  background-color: rgba (赤, 緑, 青, 透明度);  
3}  
4.sample {  
5  border-color: rgba (赤, 緑, 青, 透明度);  
6}  
7.sample {  
8  color: rgba (赤, 緑, 青, 透明度);  
9}

赤・青・緑の各要素は0～255、あるいは0%～100%の間で、透明度は0～1の間で指定します。透明度は0が完全に透明で、数値が大きくなるほど不透明度が上がります。色については#FFFFFFのような16進数で指定することはできません。

サンプルコード

1<p class="sampleText">サンプルテキストです。</p>
2 
3.sampleText {
4    background-color: rgba(255, 0, 0, 0.5);
5}

Opacityプロパティとの違い

同じく透明度を指定するプロパティにOpacityプロパティがありますが、これとRGBaプロパティの違いは、子要素にも透明度が適用されるか否か、という点です。Opacityプロパティは指定した要素の子要素にも透明度が適用されますが、RGBaプロパティは指定した要素にのみ透明度が適用されます。また、RGBaプロパティは色に関する要素にのみ適用が可能であり、画像などに透明度を指定したい場合は、Opacityプロパティを使用しなければなりません。

対応ブラウザ（いずれも最新版で動作確認済みです）

Opera 11
Firefox 3.6
Safari 5
IE 9
Google Chrome 9

HSLAプロパティ

HSLAプロパティは透明度を持った色を、色相・彩度・輝度で指定することのできるプロパティです。

記述方法

以下のように記述します。

1.sample {
2    background-color: hsla(色相, 彩度, 輝度, 透明度);
3}
4.sample {
5    border: 1px solid hsla(色相, 彩度, 輝度, 透明度);
6}

色相は0～360の間で指定し、0あるいは360が赤、120が緑、240が青となります。彩度と輝度は0%～100%の間で指定し、0%が黒、100%が白となります。透明度は先ほどのRGBaプロパティと同じで、0～1の間で指定します。

サンプルコード

1<p class="sampleText">サンプルテキストです。</p>
2 
3.sampleText {
4    border: 2px solid hsla(240, 100%, 50%, 0.5);
5}

対応ブラウザ（いずれも最新版で動作確認済みです）：

Opera 11
Firefox 3.6
Safari 5
IE 9
Google Chrome 9

Opacityプロパティ

Opacityプロパティは、要素に対して透明度を指定するプロパティです。

記述方法

以下のように記述します。

1.sample {
2    opacity: (透明度);
3}

透明度は0～1の間で指定します。数値については前述の2つと同じです。

サンプルコード

1<img src="./sample01.jpg" class="sampleImg" />
2 
3.sampleImg {
4    opacity: 0.5;
5}

Opacityプロパティのメリットとして、透明度を指定できる要素が色に限らない点です。画像やテキストなど、様々な要素に適用することが可能です。

対応ブラウザ（いずれも最新版で動作確認済みです）：

Opera 11
Firefox 3.6
Safari 5
IE 9
Google Chrome 9

また、Opacityプロパティは、IE独自のプロパティであるFilterプロパティを使うことによって、非対応のIE6～8でも同様の機能を再現することができます。

サンプルコード

1<img src="./sample01.jpg" class="sampleImg" />
2 
3.sampleImg {
4    filter: alpha(opacity=0.5);
5}

デモページ：

デモページ
※対応ブラウザで閲覧してください。

このプロパティを使ったテクニックについては、以前にもご紹介しているので、そちらもどうぞご覧ください。

画像を用意しなくてもCSSだけでロールオーバー効果を表現するテクニック

https://html-coding.co.jp/knowhow/tips/000275/

CSS3では、これまでよりもさらに詳細に色を指定したり、透明度を指定することが可能であり、新たなデザインの可能性が広がっています。ぜひ活用してみてください。