HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用55. カラーの透明度の値(rgba, transparent)

      2017/07/11

rgba()

CSS3で追加されたプロパティの値です。
カラーと透明度の指定ができます。
ベンダープレフィックスは不要
※Internet Explorer 9以上から対応

rgba()の各ブラウザの対応状況
Can I use -rgba-

rgbaは()内に4つの値をカンマで区切り指定します。

各値は、Red, Green, Blue, alphaの順で指定します。
alphaは、透明度の指定でopacityプロパティと同じ、透明度を0.0〜1.0までの小数点で指定します。
0.0は透明、1.0は不透明となり、値が低くなるごとに透明度が上がります。
Red, Green, Blueは、カラーコードではなく、0〜255の10進数で指定します。
10進数を使った色の指定は、PhotoshopやIllustratorなどのグラフィックアプリケーションでよく使われます。 下記は、カラーコードとの対比の一例です。

 カラーコード10進数
#0000000, 0, 0
#FFFFFF255, 255, 255
Red#FF0000255, 0, 0
Green#00FF000, 255, 0
Blue#0000FF0, 0, 255

rgba()は、プロパティではなく値です。
カラーの指定ができるプロパティの値として使用します。
例として

下記のコードは、背景色のみ50%透明にしています。
コードで使用した画像は下記からダウンロードできます。

rgba_bg.zip

rgba()で背景色を半透明

rgb()

rgba()の他に透明度の指定がないrgb()という値もあります。
指定方法は、rgba()と同じ0〜255の10進数で指定します。
ベンダープレフィックスは不要
※Internet Explorer 9以上から対応

rgb()の各ブラウザの対応状況
Can I use -rgb-

transparent(トランスペアレント)

透明の指定です。
CSS3からでなはく、従来からあるプロパティの値です。
透明度ではなく、transparentを指定すると、カラーが透明になります。
利用方法としては、他で指定したカラーの打ち消しなどに利用します。
rgba()と同じく、カラーの指定ができるプロパティの値で利用できます。

display: none; との違いは、指定したカラーが透明になりますが、要素としては存在しているのでmarginやpaddinngなどが有効のままになります。
下記のコードは、pタグに背景色を指定し、その後でclassを指定したpタグの背景色をtransparentで透明にした例です。

transparentを指定して背景色を透明

透明を指定する場合の注意点

文字を意図的に透明にして隠すことは、検索サイトからペナルティを受ける可能性があります。
他にも、背景と同じ色で文字色を指定する。
文字が読めないサイズで指定する。
これらも検索サイトからペナルティを受ける行為です。
検索順位を操作するために、サイトに関係のないキーワードを隠して埋め込む行為は絶対しないようにしましょう。

まとめ

  • rgba()は、カラーの透明度の指定ができる値
  • rgba()は、カラーの指定ができるプロパティの値で使用できる
  • rgba()は、カラーコードではなく0〜255の10進数で指定する
  • rgb()という透明の指定がない値もある
  • transparentは、透明の指定ができる値
  • テキストを意図的に透明にして隠す行為は、検索サイトからペナルティを受ける

 - HTML・CSS