CSS変数で特定のクラスだけ透明度（alpha）を変更する方法

CSSの rgba() を使って背景色を設定するときに、
特定のクラスだけ透明度（alpha）を変更したい ことがあります。
しかし、CSS変数で rgba() を直接指定すると、一部の値（α値）だけを変更するのが難しくなります。

本記事では、CSS変数を工夫して α（アルファ）値だけを変更する方法 を紹介します。

問題点：rgba() に直接 CSS変数を使うと α値だけの変更が難しい

以下のように、CSS変数を rgba() の引数として定義すると、
α値だけを後から変更することが難しくなります。

:root {
  --color-primary-rgb: rgba(56, 128, 255, 1);
}

.box {
  background: var(--color-primary-rgb);
}

この場合、.box クラスの背景色は rgba(56, 128, 255, 1) になります。

しかし、特定のクラス .box-transparent だけ α値を0.9に変更 したい場合、
直接 --color-primary-rgb を書き換えることはできません。

解決策1：RGBとα値を分離する

CSS変数を分割して管理

RGB値と α値を 別々のCSS変数に分割 することで、α値だけをクラスごとに変更できるようになります。

:root {
  --color-primary-rgb: 56, 128, 255; /* RGBのみ */
  --color-primary-alpha: 1; /* デフォルトの透明度 */
}

.box {
  background: rgba(var(--color-primary-rgb), var(--color-primary-alpha));
}

特定のクラスだけ透明度を変更

.box-transparent クラスの α値を変更するには、--color-primary-alpha だけを上書きします。

.box-transparent {
  --color-primary-alpha: 0.9;
}

これにより、以下のような動作になります：

• .box → rgba(56, 128, 255, 1)（デフォルト）
• .box-transparent → rgba(56, 128, 255, 0.9)（透明度0.9）

この方法なら、--color-primary-rgb の値を変更することなく、特定のクラスだけ透明度を変えられます。

解決策2：JavaScriptを使って透明度を動的に変更

CSSだけで解決する方法が理想的ですが、 JavaScriptを使って透明度を動的に変更する 方法もあります。

document.querySelector('.box-transparent').style.background =
  `rgba(${getComputedStyle(document.documentElement).getPropertyValue('--color-primary-rgb')}, 0.9)`;

このスクリプトを実行すると、.box-transparent クラスの背景色の α値だけが 0.9 に変更されます。

応用：スライダーで透明度を動的に変更

HTMLにスライダーを設置し、リアルタイムで透明度を変更する例です。

<input type="range" min="0" max="1" step="0.1" value="1" id="alphaRange">
<p>透明度: <span id="alphaValue">1</span></p>

const alphaRange = document.getElementById("alphaRange");
const alphaValue = document.getElementById("alphaValue");

alphaRange.addEventListener("input", function() {
  let newAlpha = this.value;
  document.documentElement.style.setProperty('--color-primary-alpha', newAlpha);
  alphaValue.textContent = newAlpha;
});

このコードを実装すると、スライダーを動かすだけで透明度をリアルタイムに変更できます。

まとめ

• rgba() に CSS変数を直接適用すると α値のみ変更できない問題がある
• RGBとα値を分ける ことで、クラスごとに透明度を変更可能
• JavaScriptを使えば、動的にα値を変更することもできる
• スライダーを使えば、リアルタイムで透明度を調整可能

CSS変数を工夫することで、より柔軟なデザイン調整ができるようになります。
ぜひ活用してみてください！

Favorite