スクロールバーカラープロパティ

最終更新：2026-09-13

scrollbar-color スクロールバーカラープロパティ

scrollbar-color プロパティは、ブラウザのスクロールバーの色（つまみ thumb とトラック track の両方）をカスタマイズします。CSS Scrollbars 仕様の一部であり、JavaScript プラグインを使わずにスクロールバーをページ全体の配色に合わせるシンプルな方法を提供します。

カテゴリ
初期値	auto
継承	はい
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

scrollbar-color: auto | dark | light | <color> <color>;

⚙️ 値

値	タイプ	説明
`auto \| dark \| light`	キーワード	プリセットの配色
`<color> <color>`	値	つまみとトラックの色

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
scrollbar-color	✓ v79	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： scrollbar-color は現在、主に Chromium 系ブラウザと Firefox で対応しています。Safari や古いブラウザでは ::-webkit-scrollbar 疑似要素が必要です。

ヒント： 2 つの色の値はつまみとトラックに対応します。1 つの値のみ指定した場合、もう一方はブラウザが自動計算します。

❓ よくある質問

Qscrollbar-color と ::-webkit-scrollbar の違いは何ですか？

Ascrollbar-color は W3C 標準プロパティです。2 つの色でつまみとトラックを指定します。シンプルですが、変更できるのは色と太さだけです。::-webkit-scrollbar は WebKit/Chromium 独自の疑似要素で、幅や角丸、境界線もカスタマイズでき、より高機能ですが非標準です。Firefox は標準プロパティを使用し、Chromium と Safari は疑似要素を使用します。

Qscrollbar-color の dark と light の値は何をしますか？

Adark はブラウザにスクロールバーをダークテーマで描画するよう指示します（濃いつまみに淡いトラック）。light はその逆です（淡いつまみに濃いトラック）。正確な色はブラウザがプラットフォームとテーマに基づいて決定し、ダークモードへの合わせに一般的に使われます。正確な色が必要な場合は、2 つの色の値を直接指定してください。最初がつまみ、2 番目がトラックです。

Qscrollbar-color が Chrome や Safari で効かないのはなぜですか？

AChrome はバージョン 121 から正式に対応しました（それ以前は Chromium は ::-webkit-scrollbar のみ使用）。Safari は現在も標準プロパティを認識しません。統一されたスクロールバーを実現する単一のクロスブラウザ解決策はなく、標準プロパティは Firefox と新しい Chrome を、疑似要素は Safari と古い Chrome をカバーします。

QCSS で全ブラウザに対応するスクロールバーの色を設定するには？

A「二本立て」の方法を使います。まず標準の scrollbar-color で Firefox（および新しい Chrome）のつまみとトラックの色を設定し、次に ::-webkit-scrollbar と ::-webkit-scrollbar-thumb で WebKit のスクロールバーをスタイリングします。さらに高度な制御が必要なら、JavaScript のスクロールバーライブラリに頼ります。