概要

scrollbar-colorは、CSSでスクロールバーの色をカスタマイズするためのプロパティです。このプロパティを使うことで、スクロールバーのサム（つまみ）とトラック（背景）の色を簡単に変更でき、Webページのデザインに合わせてスクロールバーを調整することが可能です。ただし、このプロパティは主にFirefoxでサポートされており、他のブラウザ（特にWebkit系）では異なる方法が必要です。

scrollbar-colorの基本構文

scrollbar-color: <thumb-color> <track-color>;

  • thumb-color
    スクロールバーのつまみ部分の色を指定します。

  • track-color
    スクロールバーの背景（トラック）部分の色を指定します。

キーワード

  • auto
    デフォルトのスクロールバーの色に戻します。

  • dark / light
    ブラウザのテーマに応じて暗い色や明るい色のスクロールバーを適用します。

使用例

基本的な使用例 - スクロールバーの色を変更

以下のコードは、スクロールバーのつまみをダークグレー、背景をライトグレーに変更する例です。

.element {
    scrollbar-color: darkgray lightgray;
}

この設定により、.elementのスクロールバーのつまみ部分はダークグレー、背景はライトグレーにカスタマイズされます。

キーワードを使ったスクロールバーの色設定

スクロールバーの色を自動設定に戻したい場合や、ダークモードと連動させたい場合、autoやdarkを使用します。

.auto-scrollbar {
    scrollbar-color: auto; /* デフォルトの色に戻す */
}
.dark-scrollbar {
    scrollbar-color: dark; /* ダークテーマに対応したスクロールバー */
}

このコードでは、スクロールバーの色が自動的にデフォルトに戻されるか、テーマに応じて暗い色になります。

背景とつまみのカラフルなカスタマイズ

より大胆なデザインにしたい場合、カラフルな色を使用してスクロールバーをカスタマイズすることが可能です。

.custom-scrollbar {
    scrollbar-color: rebeccapurple gold;
}

この設定により、つまみがパープル、背景がゴールドのスクロールバーになります。視覚的なインパクトが強く、デザインの一部としてスクロールバーを活用できます。

Webkitブラウザでの対応方法

scrollbar-colorはFirefoxのみでサポートされているため、ChromeやSafariなどのWebkit系ブラウザでは、::-webkit-scrollbar関連のプロパティを使用してスクロールバーのスタイルをカスタマイズします。

/* スクロールバーの全体のスタイル */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
/* スクロールバーの背景 */
::-webkit-scrollbar-track {
    background: lightgray;
}
/* スクロールバーのつまみ */
::-webkit-scrollbar-thumb {
    background-color: darkgray;
    border-radius: 6px;
}

このコードにより、Webkit系ブラウザでもスクロールバーの色をカスタマイズできます。特に細かいデザイン調整が必要な場合は、こちらの方法が推奨されます。

注意点

  • scrollbar-colorは、主にFirefoxでしかサポートされていないため、他のブラウザでは同様のデザインが適用されません。Webkit系ブラウザ（Chrome、Safariなど）では::-webkit-scrollbarを使用してください。
  • カスタマイズされたスクロールバーが、ユーザーの視認性や操作性に悪影響を与えないように、デザインの際には注意が必要です。
  • スクロールバーのサイズや形状を変更したい場合は、scrollbar-widthや::-webkit-scrollbar関連のプロパティも併用すると効果的です。

まとめ

scrollbar-colorは、CSSでスクロールバーのつまみとトラックの色をカスタマイズする便利なプロパティです。主にFirefoxでのサポートが中心ですが、Webkit系ブラウザでも別途対応することで、統一感のあるデザインを実現できます。スクロールバーの色を変更して、Webページの見た目をより魅力的にカスタマイズしてみましょう。

参照:

scrollbar-color（`CSS`） | MDN Web Docs