スマートフォン最適化ノウハウコラム

CSS3で知っておきたい基礎知識「RGBa」の徹底解説!


ページ内目次

  1. RGBaとは
  2. 書式
  3. ガイドライン
  4. RGBa用のカラーコードはどうやって取得するのか
  5. サンプル

RGBaとは

今までカラーコードは16進数(ff9966など)で指定するものでしたが、CSS3ではRGBaという値を指定する書式を使うことにより、色の透明度(alpha値)まで指定することが可能になりました。

これにより、今まではベタ塗りでも透明度が設定されている背景色などは画像を作成する必要がありましたが、CSSで記述出来るようになりました。
このRGBaはCSSプロパティではなく、値を指定する書式であるため、color, background-color, border-color などCSS2のプロパティにも組み合わせることが可能です(CSS3対応のブラウザのみ)。

書式

書式は今まで16進数カラーコード(ff9966など)を指定していた箇所に、
rgba(R赤,G緑,B青,Aアルファ値);
と色別にカンマ(,)で区切り指定をします。
各色には0~255までの色の濃さを示す数値を入力し、最後には0~1(小数点で0.5など)でアルファ値を指定します。

書式サンプル

.rgba1 { color: rgba(0,0,0,0.5); }
.rgba2 { background-color: rgba(255,0,0,0.7); }
.rgba3 { border-color: rgba(0,255,0,0.3); }

アルファ値が100%で透過指定が必要ない場合は以下のようにrgbだけの指定も可能です。

.rgb1 { color: rgb(0,255,0); }

アルファ値を指定しても透過されないときはrgbになっていないか(aが抜けていないか)確認しましょう。

ガイドライン

色の指定方法はアルファ値の指定がある場合のみRGBaの書式で記述して下さい。アルファ値の指定が不要な場合はRGBではなく今まで通りの16進数カラーコード(#ff0000)で記述して下さい。
この「RGBa」はCSS2のスタイルと組み合わせて使われますが、CSS3対応のブラウザでしかレンダリングされないという点に気をつけて下さい。

RGBa用のカラーコードはどうやって取得するのか

FireworksやPhotoshopなどのグラフィックソフトでRGBa用のカラーコードを取得する方法は以下の通りです。

Fireworks

Photoshop

それでは実際に書式とサンプルを見てみましょう。

テキスト色を半透明にする

サンプル

テキスト色を半透明にする。RGBで真っ白にしていますが、アルファ値を80%(0.8)にしているため背景色の赤が混じっています

サンプルコード

.sample01403 {
	background: rgba(255,0,0,1);
	color: rgba(255,255,255,0.8);
}

背景色を半透明にする

サンプル

背景色を真っ赤にしていますが、アルファ値を50%(0.5)にしているため、下地の白が混じりピンクになっています。

サンプルコード

.sample02403 {
	background: rgba(255,0,0,0.5);
	color: rgba(255,255,255,1);
}

グラデーションで透明→黒を表現する

サンプル

グラデーションで透明→黒を表現する

サンプルコード

.sample03403 {
	padding: 10px;
	width: 300px;
	background: rgba(0,255,0,1);
}

.sample03403 p {
	height: 200px;
	background: -moz-linear-gradient(
		top,
		rgba(255,255,255,0) 0%,
		rgba(0,0,0,0.8));
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(rgba(255,255,255,0)),
		to(rgba(0,0,0,0.8)));
}

  • カテゴリ/スマートフォンコーディング
  • ↑このページの上部へ