![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
CSSの color-mix() とは？基本構文と実装例
markleaps.com
position: sticky; を使って table のヘッダーや列を固定する際、背景色にアルファ値付きカラー（#RRGGBBAA）を使用していると、重なった下の要素が透けて見えてしまうことがあります。
この記事では、この問題を CSS の color-mix() を使って解決する方法を紹介します。
table のセルを position: sticky; で固定した場合の透け問題
これまで、背景色の濃淡表現として、カラーコードのアルファ値（#RRGGBBAA）を使い、以下のように指定しているケースもあるかと思います。
|
1 2 3 4 5 |
:root { --color-primary: #66C7BC; --bg-color-primary: #66C7BC33; /* 透過率80% */ --bg-color-primary-light: #66C7BC1A; /* 透過率90% */ } |
しかしこの方法では、table のセルを position: sticky; で固定した場合、重なった下の要素が透けて見えてしまう という問題が発生します。
See the Pen [CSS] カラーコードでの透明度指定（#RRGGBBAA）で position: sticky 時に透けてしまうデモ by mkl may (@mkl-may) on CodePen.
color-mix() を使った解決方法
「基本のカラーをベースに薄くしたいが、透過はさせたくない」
という場合には、color-mix() で 白を混ぜて薄くする指定 がおすすめです。
|
1 2 3 4 5 |
:root { --color-primary: #66C7BC; --bg-primary: color-mix(in srgb, var(--color-primary), white 80%); --bg-primary-light: color-mix(in srgb, var(--color-primary), white 90%); } |
この指定ではアルファ値を使用していないため、position: sticky; でセルが重なっても透けることはありません。
See the Pen [CSS] color-mix() で position: sticky 時の透け対策 by mkl may (@mkl-may) on CodePen.
※ color-mix() は比較的新しい CSS 機能のため、一部の古いブラウザには対応していません。color-mix() に対応しているブラウザでご確認ください。
まとめ
position: sticky; を使用する要素では、アルファ値付きカラー（#RRGGBBAA や rgba()）を背景色に指定すると、要素が重なった際に下の内容が透けて見えることがあります。
color-mix() を使って 白などの色を混ぜて薄い色を作ることで、透過を使わずに背景色の濃淡を表現でき、position: sticky; を使用する UI でも透ける問題を避けながら安全に背景色を指定できます。
color-mix() の基本的な使い方については、以下の記事で解説しています。