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

CSS rgba()関数の使い方を徹底解説！透明度付きの色指定方法

CSSで色を指定する方法のひとつに、rgb()関数があります。これはRGBモデル（赤・緑・青の3原色）に基づいて色を定義するための関数です。

さらにrgba()関数を使うと、RGBカラーに透明度（アルファ値）を加えた色指定が可能になります。半透明の背景やオーバーレイ表現など、モダンなWebデザインでよく活用される機能です。

rgba()関数の基本構文

rgba()関数は、以下のように4つの値をカンマ区切りで指定します。

background-color: rgba(255, 0, 0, 0.9);
  • 第1引数： 赤（Red）の強さ … 0〜255
  • 第2引数： 緑（Green）の強さ … 0〜255
  • 第3引数： 青（Blue）の強さ … 0〜255
  • 第4引数： 透明度（Alpha）… 0（完全に透明）〜1（完全に不透明）

例えば「rgba(255, 0, 0, 0.5)」と指定すれば、50%の透明度を持つ赤色になります。

使用例

次のコードでは、h1要素にHSL形式で赤い背景を設定し、h2要素にはrgb()で青い背景と白い文字色を指定しています。また、p要素にはrgba()を使って、透明度0.9の赤い背景を適用しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        background-color: hsl(0, 100%, 50%);
      }
      h2 {
        background-color: rgb(0, 0, 255);
        color: rgb(255, 255, 255);
      }
      p {
        background-color: rgba(255, 0, 0, 0.9);
      }
    </style>
  </head>
  <body>
    <h1>Red Background</h1>
    <h2>Blue Background</h2>
    <p>This is demo text!</p>
  </body>
</html>

まとめ

rgba()関数を使えば、透明度を含んだ柔軟な色表現が簡単に実現できます。背景を半透明にして下のコンテンツを透かせたり、ホバー時に透明度を変化させる演出など、応用範囲は非常に広いので、ぜひ使いこなせるようにしておきましょう。

  1. CSSのrgb()関数とは？RGBカラー値の指定方法を実例付きで解説

    CSSのrgb()関数は、Webページ上で色を指定するための関数の一つです。光の三原色である「赤（Red）」「緑（Green）」「青（Blue）」の3つの値を組み合わせることで、任意の色を表現できます。rgb()関数の基本構文rgb()関数の各パラメータには、0〜255までの数値、またはパーセンテージ（%）で各色の強度（明るさ）を指定します。rgb(赤, 緑, 青)赤（R）：0〜255 または 0%〜100%緑（G）：0〜255 または 0%〜100%青（B）：0〜255 または 0%〜100%例えば、rgb(255, 0, 0)は純粋な赤、rgb(0, 0, 0)は黒、rgb(255, 25

  2. RGBAを使ったCSSの透明度設定方法をわかりやすく解説

    CSSで要素の透明度を表現する場合、rgba() 関数を使うのが一般的です。RGBにアルファチャンネル（alpha）を加えたこのカラーモデルでは、第4パラメータで色の不透明度（opacity）を細かく指定できます。 RGBAカラーの基本 rgba() は次の4つの値で構成されます。 R（赤）・G（緑）・B（青）：それぞれ0〜255、または0〜100%の数値で指定します。 A（アルファ／透明度）：0.0（完全な透明）〜1.0（完全な不透明）までの小数で指定します。例えば「0.5」なら半透明になります。 通常の rgb() では透明度を扱えませんが、rgba() を使えば背景色だけを半透明にで