CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のRGBAカラープロパティとは？基本と使い方を実例付きで解説

RGBAカラーとは

RGBAとは、Red（赤）・Green（緑）・Blue（青）・Alpha（アルファ）の頭文字を取った略称です。これはCSS2で採用されていたRGBカラーモデルを拡張したもので、Alphaの値によって色の不透明度（透過度）を指定できる点が大きな特徴です。

Alphaパラメータには 0.0〜1.0 の範囲の数値 を指定します。値の意味は以下の通りです。

  • 0.0 … 完全に透明（見えない状態）
  • 1.0 … 完全に不透明（通常のRGBと同じ表示）
  • 0.5 … 半透明（背景が透けて見える状態）

記述形式

rgba()関数は次のように記述します。最初の3つの値は0〜255の整数またはパーセンテージで色を指定し、4つ目の値が透明度です。

rgba(赤, 緑, 青, アルファ)

使用例

次のサンプルコードでは、rgbaカラープロパティを使って、3つの段落それぞれに透明度0.3（30%）の赤・緑・青の背景色を設定しています。

<html>
   <head>
      <style>
         #p1 {background-color:rgba(255,0,0,0.3);}
         #p2 {background-color:rgba(0,255,0,0.3);}
         #p3 {background-color:rgba(0,0,255,0.3);}
      </style>
   </head>
   <body>
      <p>RGBA colors:</p>
      <p id = "p1">Red</p>
      <p id = "p2">Green</p>
      <p id = "p3">Blue</p>
   </body>
</html>

実行結果のポイント

このコードをブラウザで表示すると、「Red」「Green」「Blue」の各段落に、それぞれ薄く透けた赤・緑・青の背景色が適用されます。Alpha値が0.3のため、背景色の下にあるテキストやページ全体の背景がうっすらと透けて見えるのが確認できるでしょう。

このようにRGBAを使えば、半透明のオーバーレイやモダンなデザイン表現を簡単に実現できます。ボタンのホバー効果や画像上のキャプション背景など、透明度を活かしたUIデザインにも幅広く活用されています。

  1. CSS3のRGBA・HSL・HSLAカラー値の使い方を徹底解説

    CSS3では、従来のカラーネームや16進数（HEX）に加えて、より柔軟な色指定の方法が複数導入されました。その代表が RGBA、HSL、HSLA の3つのカラー値です。それぞれの特徴と使い方を、実際のコード例とともに詳しく見ていきましょう。RGBAカラー値とはRGBA は「Red（赤）」「Green（緑）」「Blue（青）」「Alpha（アルファ）」の4つの要素で構成される色指定方法です。RGBはそれぞれ0〜255の数値で色の強さを表し、Alphaは色の不透明度（透明度）を指定します。Alphaの値は 0.0〜1.0 の範囲で指定します。1.0が完全な不透明（透過なし）、0.0が完全な透明を意

  2. CSS3のRGBAカラー値とは？透明度の指定方法を実例付きで解説

    RGBAカラー値とは RGBAは、Red（赤）・Green（緑）・Blue（青）・Alpha（アルファ）の頭文字を組み合わせたCSS3の色指定形式です。従来のRGBカラーモデルに加えて、Alphaパラメータで色の不透明度（透過度）を細かく制御できるのが最大の特徴です。 アルファ値は0.0〜1.0の範囲の数値で指定します。 ・1.0 … 完全に不透明（通常のRGBと同じ見え方） ・0.5 … 半透明 ・0.0 … 完全に透明（見えなくなる） このように、同じ色でもアルファ値を変えるだけで、背後にある要素や背景が透けて見えるエフェクトを簡単に実現できます。 アルファ値による透明度の違い 下の画像