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

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

rgba()関数とは

CSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。

アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。

基本的な構文は以下のとおりです。

rgba(red, green, blue, alpha)
  • red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。
  • alpha：不透明度を0.0（完全に透明）〜1.0（完全に不透明）の数値で指定します。

使用例1：背景色への適用

それでは、rgba()関数を実装した具体的な例を見てみましょう。複数の要素に対して異なる透明度の背景色を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
   background-color:rgba(108,111,35,0.6);
   font-size:30px;
   color:yellow;
   transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>

出力結果

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

この例では、#demo6に対してrgba(108,111,35,0.6)を指定することで、60%の不透明度を持つオリーブ系の背景色が適用されています。また、回転（rotate）や文字色なども組み合わせてスタイリングされています。

使用例2：テキスト装飾との組み合わせ

次の例では、span要素の背景色にrgba()を適用し、半透明の背景を実現しています。

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: rgba(100, 150, 50, 0.6);
   text-decoration: line-through;
   text-decoration-color: blue;
}
.demo2 {
   text-decoration: underline;
   text-decoration-color: yellow;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

出力結果

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

このように、rgba()関数を使えば背景だけでなく、テキスト装飾と組み合わせたデザインにも柔軟に対応できます。透過効果を活かすことで、モダンで洗練されたWebページの表現が可能になります。

  1. CSSのtranslate()関数とは？要素を移動させる方法を実例付きで解説

    CSSのtranslate()関数は、要素を水平方向・垂直方向に移動（再配置）するために使用される変換関数です。transformプロパティと組み合わせて使うことで、HTML要素を元の位置から任意の距離だけずらして表示できます。translate()関数の基本構文transform: translate(x軸の移動量, y軸の移動量);第1引数が水平方向（X軸）、第2引数が垂直方向（Y軸）の移動量を表します。値にはpxなどの絶対単位や、%（要素自身のサイズに対する割合）を指定できます。第2引数を省略した場合は、Y方向の移動量は0として扱われます。サンプルコード1：画像を右に50px移動するまず

  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() を使えば背景色だけを半透明にで