【PR】を含みます。

Webデザイン

【CSS】スクロールバーのデザインをカスタマイズする方法

CSS スクロールバーのデザインをカスタマイズする方法

Webサイトを作成するとき、デフォルトのスクロールバーはブラウザごとにデザインが異なり、サイト全体の雰囲気と合わないことがあります。

そんなときに役立つのがスクロールバーのデザインをCSSでカスタマイズする方法です。

本記事では、スクロールバーの色を変更する方法やスクロールバーを細くする方法、さらにクロスブラウザ対応のポイントまで、わかりやすく解説します。

スクロールバーをカスタマイズできるブラウザ

スクロールバーのカスタマイズはブラウザごとに書き方が異なります。

Chrome / Edge / Safari::-webkit-scrollbar系の疑似要素でカスタマイズ可能
Firefoxscrollbar-colorとscrollbar-widthを使用
IE非対応（既にサポート終了）

クロスブラウザ対応をするには、両方の書き方を組み合わせる必要があります。

基本的なカスタマイズ方法（Chrome / Edge / Safari）

Webkit系ブラウザでは::-webkit-scrollbarを使います。

CSS
Copy
/* Chrome / Safari / Edge 用 */
::-webkit-scrollbar {
  width: 8px; /* スクロールバーを細く */
}
::-webkit-scrollbar-thumb {
  background-color: #666; /* スクロールバー 色 変更 */
  border-radius: 4px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

このコードは、スクロールバーを細くして、つまみ部分の色を変更しています。

Firefoxでのカスタマイズ方法

Firefoxではscrollbar-widthとscrollbar-colorを使用します。

CSS
Copy
/* Firefox 用 */
html {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: #666 #f1f1f1; /* thumb track */
}
  • scrollbar-width: thin; → スクロールバーを細く
  • scrollbar-color: #666 #f1f1f1; → 前者がつまみ（thumb）、後者が背景（track）の色

クロスブラウザ対応の書き方

上記2つを組み合わせれば、主要ブラウザでほぼ同じ見た目を再現できます。

ただし、最新バージョンのChromeなどのWebkit系ブラウザでは、::-webkit-scrollbar系のスタイルより、scrollbar-colorの方が優先されます。

そのため、スクロールバーのデザインを細かく調整したい場合は、まず::-webkit-scrollbarを使ってWebkit系ブラウザ向けにスタイルを指定し、Firefoxには@supports (-moz-appearance: none)などを使って専用のスタイルを適用する必要があります。

CSS
Copy
/* Chrome / Safari / Edge 用 */
::-webkit-scrollbar {
  width: 8px; /* スクロールバーを細く */
}
::-webkit-scrollbar-thumb {
  background-color: #666; /* スクロールバー 色 変更 */
  border-radius: 4px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Firefox 用 */
@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #666 #f1f1f1;
  }
}
  • Chrome / Safari / Edge
    ::-webkit-scrollbar系の疑似要素で自由にデザイン可能。丸みや影など細かい調整もできます。
  • Firefox
    scrollbar-widthとscrollbar-colorのみ対応。細かい装飾（角丸や影）はできませんが、色と幅を変更できます。
  • @supports (-moz-appearance: none)
    Firefox 特有の CSS 機能を利用した条件分岐。これによりFirefoxだけに標準プロパティを適用できます。

ダークモード＋ホバー対応スクロールバー

CSS
Copy
/* --- ライトモード（デフォルト） --- */
/* Chrome / Safari / Edge */
::-webkit-scrollbar {
  width: 8px; /* スクロールバーを細く */
}
::-webkit-scrollbar-thumb {
  background-color: #888; /* スクロールバー 色 変更 */
  border-radius: 4px;
  transition: background-color 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* ホバー時に濃く */
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Firefox */
@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin; /* スクロールバーを細く */
    scrollbar-color: #888 #f1f1f1; /* thumb track */
  }
}
/* --- ダークモード --- */
@media (prefers-color-scheme: dark) {
  /* Chrome / Safari / Edge */
  ::-webkit-scrollbar-thumb {
    background-color: #444;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #666; /* ダークモード時のホバー色 */
  }
  ::-webkit-scrollbar-track {
    background: #222;
  }
  /* Firefox */
  @supports (-moz-appearance: none) {
    html {
      scrollbar-color: #444 #222;
    }
  }
}

実装時の注意点

  • 非標準仕様
    ::-webkit-scrollbarは非標準のため将来的な変更の可能性があります。
  • アクセシビリティ
    細すぎるスクロールバーは操作性が悪くなるため、バランスを考慮しましょう。
  • モバイルブラウザ
    iOS Safari や Android Chrome はスクロールバーが自動的に非表示になることが多く、CSSによるカスタマイズが効かない場合があります。

まとめ

  • スクロールバーのカスタマイズは、Webkit系（Chrome/Edge/Safari）とFirefoxで書き方が異なるため、両方の記述が必要です。
  • ::-webkit-scrollbar系の疑似要素で、色や幅、角丸など細かいデザイン調整が可能です。
  • Firefoxではscrollbar-widthとscrollbar-colorで色と幅のみ変更できます。
  • クロスブラウザ対応には、@supports (-moz-appearance: none)でFirefox専用の分岐を使うのがポイントです。
  • ::-webkit-scrollbar系に対応しているブラウザであれば、ダークモードやホバー時の色変化もCSSで対応できます。
    ※ただし、モバイルブラウザやアクセシビリティには注意し、細すぎるデザインや非標準仕様の将来変更リスクも考慮しましょう。

本記事を参考に、サイトの雰囲気に合ったスクロールバーをデザインしてみてください。

-Webデザイン
-