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

CSSのRGBAモデル（Red-Green-Blue-Alpha）で色を定義する方法

RGBAモデルとは

CSSのrgb()関数を使用すると、RGBモデル（Red・Green・Blueの3原色）に基づいて色を定義できます。各色の値は0〜255の範囲で指定します。

さらに、rgba()関数を使用すると、RGBカラーに透明度（アルファ値）を加えた色を設定できます。アルファ値は0（完全に透明）〜1（完全に不透明）の間の数値で指定します。

記述例

以下のコードを実行すると、rgba()関数を使って色を設定する方法を実際に確認できます。

<!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>

コードの解説

このサンプルコードでは、3つの異なる色指定方法を紹介しています。

  • h1要素：hsl()関数を使って、色相0度（赤）・彩度100%・輝度50%の背景色を指定しています。
  • h2要素：rgb()関数で青（0,0,255）の背景色を指定し、文字色には白（255,255,255）を設定しています。
  • p要素：rgba()関数で赤（255,0,0）の背景色に、アルファ値0.9の透明度を加えて指定しています。

rgba()の第4引数であるアルファ値を小さくするほど、背景が透けて表示されます。半透明のオーバーレイやカードデザインなど、モダンなWebデザインで幅広く活用できるテクニックです。


  1. CSSで放射状グラデーションの形状を設定する方法

    CSSで放射状グラデーションの形状を設定するには、radial-gradient()関数を使用します。この関数は、背景画像として放射状グラデーションを指定するためのもので、第1引数に希望する形状を指定します。指定できる形状は「ellipse」（楕円）と「circle」（円）の2種類です。以下のように記述します。background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで

  2. CSSでグラデーションのカラーストップ位置を設定する方法

    CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に