《 12:00 公開/更新》
スタイルシート(CSS)で色を指定する際には、光の三原色(赤・緑・青)の量を指定するRGB値のほかに、透明度(アルファチャンネル)を加えたRGBA値も使えます。このRGBA値での色指定を使えば、文字を半透明で表示させたり、背景色を半透明にして背後を透過させたり、枠線の色を半透明にして背後を透けさせたりできます。
スタイルシートでは、光の三原色(赤・緑・青)の量で色を表すRGB値のほかに、透明度の指定を加えたRGBA値で色を指定することもできます。このRGBA値での色指定を使えば、特定の文字を半透明で表示させたり、背景を塗りつぶしている色を半透明にして背後を透過させたり、枠線の色を半透明にして背後を透けさせたりできます。RGBとRGBAの違いは、下記の通りA(=Alpha channel)があるかないかです。
従来のように赤・緑・青の3色の割合を指定するのに加えて、透明度(正確には不透明度ですが)を加えて色を指定します。使い方は簡単で、単に今までRGB値を使っていた場所で、記述をRGBA値に変えれば良いだけです。
CSSで色を指定する方法としては、色名を書く、16進数で指定する、RGB値を個別に書くなどの方法があります。これらの場合、多く使われているのは前者の2つでしょう。RGBの値を1つずつ10進数(0~255)で指定する方法は記述量が多くて面倒ですし。
CSSソース
1 2 3 | color : orange; /* 色名で指定 */ color : #FFA500 ; /* 16進数で指定 */ color : rgb ( 255 , 165 , 0 ); /* RGB値で指定 */ |
しかし、これらのうち透明度を付加して色を指定できるのは、3つ目のRGB値(RGBA値)を個別に書く方法だけです。
透明度(アルファチャンネル)を指定して記述する場合は、下記のように記述します。
CSSソース
1 | color : rgba( 255 , 165 , 0 , 0.5 ); /* RGBA値で指定 */ |
上記のようにrgba(~)の丸括弧の中に4つの数値を記述します。前3つの値はRGB(赤緑青)の指定で、最後の「0.5」の部分が不透明度です。4つの値は具体的には以下の仕様で記述します。
アルファチャンネルは0~1の間で指定し、0が完全に透明・1が完全に不透明です。上記の例では0.5を指定しているので、ちょうど半透明(=50%透過)になります。
オレンジ色で半透明の文字色
オレンジ色で半透明の背景色
先程の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ソースは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 | .red 25 { color : rgba( 255 , 0 , 0 , 0.75 ); } /* 赤色:透明度25% */ .red 50 { color : rgba( 255 , 0 , 0 , 0.5 ); } /* 赤色:透明度50% */ .red 75 { color : rgba( 255 , 0 , 0 , 0.25 ); } /* 赤色:透明度75% */ .blue 25 { color : rgba( 0 , 0 , 255 , 0.75 ); } /* 青色:透明度25% */ .blue 50 { color : rgba( 0 , 0 , 255 , 0.5 ); } /* 青色:透明度50% */ .blue 75 { color : rgba( 0 , 0 , 255 , 0.25 ); } /* 青色:透明度75% */ .yellow 25 { color : rgba( 255 , 255 , 0 , 0.75 ); } /* 黄色:透明度25% */ .yellow 50 { color : rgba( 255 , 255 , 0 , 0.5 ); } /* 黄色:透明度50% */ .yellow 75 { color : rgba( 255 , 255 , 0 , 0.25 ); } /* 黄色:透明度75% */ .green 25 { color : rgba( 0 , 204 , 0 , 0.75 ); } /* 緑色:透明度25% */ .green 50 { color : rgba( 0 , 204 , 0 , 0.5 ); } /* 緑色:透明度50% */ .green 75 { color : rgba( 0 , 204 , 0 , 0.25 ); } /* 緑色:透明度75% */ |
以下は、透明度を15%~90%まで1%単位で変化させた表示例です。
透過15%. 透過16%. 透過17%. 透過18%. 透過19%. 透過20%. 透過21%. 透過22%. 透過23%. 透過24%. 透過25%. 透過26%. 透過27%. 透過28%. 透過29%. 透過30%. 透過31%. 透過32%. 透過33%. 透過34%. 透過35%. 透過36%. 透過37%. 透過38%. 透過39%. 透過40%. 透過41%. 透過42%. 透過43%. 透過44%. 透過45%. 透過46%. 透過47%. 透過48%. 透過49%. 透過50%. 透過51%. 透過52%. 透過53%. 透過54%. 透過55%. 透過56%. 透過57%. 透過58%. 透過59%. 透過60%. 透過61%. 透過62%. 透過63%. 透過64%. 透過65%. 透過66%. 透過67%. 透過68%. 透過69%. 透過70%. 透過71%. 透過72%. 透過73%. 透過74%. 透過75%. 透過76%. 透過77%. 透過78%. 透過79%. 透過80%. 透過81%. 透過82%. 透過83%. 透過84%. 透過85%. 透過86%. 透過87%. 透過88%. 透過89%. 透過90%.
上記は、アルファチャンネル(不透明度)の値を0.85~0.1まで0.01ずつ連続的に減らした結果です。1%ずつ不透明度を減らしているので、つまり、少しずつ透明度が高くなっていきます。(※JavaScriptが動作する環境で閲覧した場合しか表示されません。)
このように、自由な透明度で文字や背景など様々な配色を透過させられます。
この方法を使ったり応用したりすると、マウスが載ったときだけ画像を半透明にするとか、テキストの背景色を半透明にしつつ、文字色は不透明にするといったデザインも簡単に作れます。
()※初版は2016年05月04日に公開されました。
(前の記事) « CSS3なら傍点(圏点)で文字を強調できる
前後のスタイルシート TIPS
< 旧 / 新 >
(次の記事) キャプション付き画像を縦横に等間隔で並べるHTML5+CSSの書き方 »
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)