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

CSSのrgb()関数の使い方を解説！RGBモデルで色を指定する方法

CSS rgb()関数とは

CSSのrgb()関数は、RGBモデル（Red-Green-Blue：赤・緑・青）に基づいて色を定義するための関数です。光の三原色である赤・緑・青の強度を組み合わせることで、Webページ上に表示する任意の色を数値で正確に指定できます。

基本構文

rgb(赤, 緑, 青)

各値には0〜255までの整数、または0%〜100%のパーセンテージを指定します。例えば、rgb(255, 0, 0)は純粋な赤、rgb(0, 0, 255)は純粋な青、rgb(255, 255, 255)は白を表します。

使用例

次のコードでは、h1要素とh2要素にhsl()関数で背景色を指定し、p要素にはrgb()関数を使って背景色と文字色を設定しています。実際にコードを実行して、RGBモデルによる色指定を確認してみましょう。

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

表示結果

このコードをブラウザで実行すると、以下のように表示されます。

  • Red Background … 鮮やかな赤い背景（hsl(0, 100%, 50%)）
  • Blue Background … 水色寄りの青い背景（hsl(192, 89%, 48%)）
  • This is demo text! … 青い背景に白い文字（rgb(0, 0, 255) ／ rgb(255, 255, 255)）

まとめ

rgb()関数を使えば、赤・緑・青の3つの数値の組み合わせだけで、直感的かつ柔軟に色を指定できます。また、色相・彩度・輝度で色を管理したい場合はhsl()関数が便利です。用途に応じて両者を使い分けることで、より効率的にスタイリングを行えます。

  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% );このように位置を明示的に指定すると、各色がその地点で完全に