にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

RGBに透明度を加えて色を指定できるRGBAの書き方 [CSS3,]

スタイルシートでは、光の三原色(赤・緑・青)の量で色を表すRGB値のほかに、透明度の指定を加えたRGBA値で色を指定することもできます。このRGBA値での色指定を使えば、特定の文字を半透明で表示させたり、背景を塗りつぶしている色を半透明にして背後を透過させたり、枠線の色を半透明にして背後を透けさせたりできます。RGBとRGBAの違いは、下記の通りA(=Alpha channel)があるかないかです。

  • RGB=Red(赤), Green(緑), Blue(青)
  • RGBA=Red(赤), Green(緑), Blue(青), Alpha(透明度)

従来のように赤・緑・青の3色の割合を指定するのに加えて、透明度(正確には不透明度ですが)を加えて色を指定します。使い方は簡単で、単に今までRGB値を使っていた場所で、記述をRGBA値に変えれば良いだけです。

従来のRGB値での色指定方法

CSSで色を指定する方法としては、色名を書く、16進数で指定する、RGB値を個別に書くなどの方法があります。これらの場合、多く使われているのは前者の2つでしょう。RGBの値を1つずつ10進数(0~255)で指定する方法は記述量が多くて面倒ですし。

color: orange;         /* 色名で指定   */
color: #FFA500;        /* 16進数で指定 */
color: rgb(255,165,0); /* RGB値で指定  */

しかし、これらのうち透明度を付加して色を指定できるのは、3つ目のRGB値(RGBA値)を個別に書く方法だけです。

透明度(不透明度)を加えたRGBA値での色指定方法

透明度(アルファチャンネル)を指定して記述する場合は、下記のように記述します。

color: rgba(255,165,0, 0.5);  /* RGBA値で指定 */

上記のようにrgba(~)の丸括弧の中に4つの数値を記述します。前3つの値はRGB(赤緑青)の指定で、最後の「0.5」の部分が不透明度です。4つの値は具体的には以下の仕様で記述します。

  1. R: 赤色の度合い(0~255) :上記の例では255
  2. G: 緑色の度合い(0~255) :上記の例では165
  3. B: 青色の度合い(0~255) :上記の例では0
  4. A: 不透明な割合(0~1) :上記の例では0.5

アルファチャンネルは0~1の間で指定し、0が完全に透明・1が完全に不透明です。上記の例では0.5を指定しているので、ちょうど半透明(=50%透過)になります。

オレンジ色で半透明の文字色
オレンジ色で半透明の背景色

先程のRGBA値を文字色に指定してみると、上記の上側のように見えます。
背景色をRGBA値にすれば、上記の下側のように背景を透過できます。この例では文字色には白色(不透明)を指定しています。

RGBAカラーモデルを使って透明度を加えた表示例

以下は、透明度を付加した文字の表示例です。文字の背後に背景画像が透けて見える点を確認してみて下さい。

Red 透過25%Red 透過50%Red 透過75%

Blue 透過25%Blue 透過50%Blue 透過75%

Yellow 透過25%Yellow 透過50%Yellow 透過75%

Green 透過25%Green 透過50%Green 透過75%

このように、自由自在に透明度を変化させられます。
ここで「透過25%」というのは「アルファチャンネル:0.75」のこと、「透過75%」というのは「アルファチャンネル:0.25」のことです。実際には「透明度」ではなく「不透明度」なので、このようになります。

上記の半透明表示を実現するCSSソースは以下の通りです。

.red25 { color: rgba( 255, 0, 0, 0.75 ); }      /* 赤色:透明度25% */
.red50 { color: rgba( 255, 0, 0, 0.5 ); }       /* 赤色:透明度50% */
.red75 { color: rgba( 255, 0, 0, 0.25 ); }      /* 赤色:透明度75% */
.blue25 { color: rgba( 0, 0, 255, 0.75 ); }     /* 青色:透明度25% */
.blue50 { color: rgba( 0, 0, 255, 0.5 ); }      /* 青色:透明度50% */
.blue75 { color: rgba( 0, 0, 255, 0.25 ); }     /* 青色:透明度75% */
.yellow25 { color: rgba( 255, 255, 0, 0.75 ); } /* 黄色:透明度25% */
.yellow50 { color: rgba( 255, 255, 0, 0.5 ); }  /* 黄色:透明度50% */
.yellow75 { color: rgba( 255, 255, 0, 0.25 ); } /* 黄色:透明度75% */
.green25 { color: rgba( 0, 204, 0, 0.75 ); }    /* 緑色:透明度25% */
.green50 { color: rgba( 0, 204, 0, 0.5 ); }     /* 緑色:透明度50% */
.green75 { color: rgba( 0, 204, 0, 0.25 ); }    /* 緑色:透明度75% */

以下は、透明度を15%~90%まで1%単位で変化させた表示例です。

上記は、アルファチャンネル(不透明度)の値を0.85~0.1まで0.01ずつ連続的に減らした結果です。(JavaScriptがONでないと表示されません。)
1%ずつ不透明度を減らしているので、つまり、少しずつ透明度が高くなっていきます。

このように、自由な透明度で文字や背景など様々な配色を透過させられます。

■関連記事:

《2016/05/04 10:27 初版公開》

()

▼当サイト内外で関連しそうな記事などを自動表示:

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

--- 当サイト内を検索 ---