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

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() を使えば背景色だけを半透明にできるため、背景画像や下層コンテンツを透かして見せたい場面で非常に便利です。

実装例

以下は、RGBAを使ってCSSの透明度を実装するコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    width: 200px;
    height: 200px;
    background-color: rgb(0, 0, 255);
    color: white;
    display: inline-block;
}
.transparent {
    background-color: rgba(0, 0, 255, 0.582);
}
</style>
</head>
<body>
<h1>Transparency using RGBA example</h1>
<div class="transparent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, accusantium.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, nisi!
</div>
</body>
</html>

コードのポイント

上記のコードでは、同じ青色（0, 0, 255）を背景に持つ2つのボックスを並べています。

  • .transparent クラス：rgba(0, 0, 255, 0.582) を指定しており、アルファ値が約0.58のため、約58%の不透明度（＝42%の透明度）で表示されます。
  • クラスなしの div：通常の rgb(0, 0, 255) のため、完全な不透明の青として表示され、両者の違いを視覚的に比較できます。

表示結果

上記のコードを実行すると、左側に半透明の青いボックス、右側に不透明の青いボックスが表示されます。アルファ値を 0〜1.0 の間で調整することで、好みの透明度に自由に変更可能です。

まとめ

CSSで透明度を制御したい場合は、rgba() のアルファチャンネルを活用しましょう。なお、モダンブラウザでは rgb(0 0 255 / 0.58) のような新しい構文（スペース区切り＋スラッシュ記法）もサポートされており、より簡潔に書くこともできます。

  1. CSSで透明度を指定する方法｜opacityプロパティの基本と使い方

    CSSで要素の不透明度（透明度）を設定するには、opacity プロパティを使用します。値は 0（完全に透明）から 1（完全に不透明）までの数値で指定します。 例えば、要素を30%の濃さで表示したい場合は次のように記述します。 opacity: 0.3; なお、背景色だけを半透明にしたい場合は、rgba() 関数を使う方法もあります。rgba(0, 0, 255, 0.582) のように、最後の引数がアルファ値（透明度）になります。 サンプルコード 以下は、CSSを使って不透明度・透明度を表現するコード例です。 <!DOCTYPE html> <html> <he

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ