スクロールバーをCSSでカスタム！自分好みのデザインに変更する方法

のようにし、スクロールの発生する領域のみに CSS を適用することで過剰なデザインを避けられます。

アクセシビリティを考慮したデザイン

見た目重視で細すぎたり、コントラストが低い色を使うと視認性が下がり、操作が困難になります。最低限の幅を確保し、サム部分と背景との色差を十分に取ることが重要です。ホバーやアクティブ時に拡大・変色させる工夫も有効です。また、タッチ操作の環境ではそもそもスクロールバーが薄く表示されるケースがあるため、指操作のしやすさも考慮しましょう。

標準プロパティと疑似要素を併用する戦略

前述のとおり、Chrome 121 以降では標準プロパティが疑似要素を上書きすることがあります。そのため、疑似要素で豊かなデザインを施す場合、標準プロパティを使う環境（主に Firefox や古いブラウザ）にだけ適用させるための条件付き CSS が必要です。@supports を使って疑似要素をサポートするブラウザでは疑似要素中心、それ以外では標準プロパティ中心という分岐を設けるのが効果的です。

実践：スクロールバー CSS カスタム の具体的な書き方とサンプルコード

ここからは実際に CSS を使ってどのようにスクロールバーをカスタムするか、具体的なコード例を交えて解説します。実践的なサンプルを真似ることで、自分のサイトにも導入しやすくなります。

最小限のカスタマイズ：色と幅だけ変更する例

まずは標準プロパティを使ったシンプルな例を示します。Firefox や標準仕様対応ブラウザで動作します。ページ全体または特定要素に対して適用可能です。
例：

このコードでサムの色は青系、トラックはグレー、幅は細めというデザインが実現できます。標準仕様のみを使っているため、見た目は多少シンプルになりますが、互換性は非常に高いです。

高度なカスタマイズ：疑似要素で細部を調整する例

WebKit系ブラウザで使う疑似要素を併用して、幅・丸み・ホバー時の色変化などを含む詳細な調整を行う例です。標準プロパティだけではできないデザインが可能です。

このように WebKit 用の疑似要素でまず詳細なデザインを定義し、次に Firefox や標準プロパティを使って代替を設ける構成にすると、デザイン崩れを防げます。

条件分岐を使ってブラウザによる違いに対応する方法

新しい仕様の導入により、標準プロパティが疑似要素を上書きするブラウザがあります。そのため、条件付き CSS を活用してブラウザごとの対応を分けることが望ましいです。以下のサンプルコードでは @supports を使って、疑似要素をサポートするブラウザにのみ詳細なスタイルを適用する例です。

このように記述することで、疑似要素に対応するブラウザでは高い自由度のデザインを表示し、対応しないブラウザでも最低限のスタイルを保証できます。

スクロールバー CSS カスタム の応用テクニックとデザインアイデア

基本を押さえたら、さらにデザインに遊びを加える応用テクニックもあります。見た目だけでなく使い勝手・パフォーマンスも考慮しながら、サイトの個性をより引き立てましょう。

ホバーやアクティブ状態での動きや変化

スクロールバーのサム部分にホバー時の色変化やアクティブ時の押下状態でのスタイルを設定すれば、ユーザー操作時のフィードバックが高まります。たとえば、サムの色を明るくしたり、影を付けたりすることで操作されたことが視覚的に分かります。モーションを使う場合は transition プロパティを使って滑らかな変化を実装しましょう。ただし、アニメーションを過剰にすると描画コストや視認性に影響があるため、適度にすることが理想です。

テーマ切り替え：ライト／ダークモード対応

多くのサイトではライトモードとダークモードを切り替えるスタイルがあります。スクロールバーもテーマに応じて色を切り替えるべき要素です。デザイン変数（CSSカスタムプロパティ）を使い、テーマ毎に変数を定義して適用する方法が便利です。たとえば :root.light と :root.dark のようにテーマクラスを付けておき、スクロールバー色を変える CSS を容易に切り替えられるように設計しておくと保守性が高まります。

モバイルとタッチ操作の配慮

モバイル／タッチ画面の場合、スクロールバーの描画や操作がデスクトップと異なります。ここでは幾つかの注意点があります：スクロールバーがデフォルトで非表示またはオーバーレイ表示されることが多く、CSSで見た目を変えられないものも存在します。タッチ操作でバーをタップするのは一般的でないので、バーの幅を広めに設定する、色のコントラストを上げるなどの配慮が重要です。

パフォーマンスと描画の最適化

カスタムスクロールバーを使うときは、描画コストにも気を配る必要があります。複雑なグラデーションや影、大きなボーダーなどはレンダリング負荷を高める可能性があります。特に低性能なデバイスではスクロールがカクついたり表示が遅れたりすることがあります。CSS のプロパティは簡潔に、レンダリングに適した形式で記述し、必要以上のデザインを避けることが望ましいです。

よくある問題とトラブルシューティング

実際にスクロールバーをカスタムしていると、思い通りに表示されない・反映されないという問題が出ることがあります。ここで典型的な問題とその解決策を紹介します。

Chrome 121 以降で疑似要素が反映されない

Chrome のバージョン 121 以降では、標準仕様のプロパティ（scrollbar-color, scrollbar-width）が疑似要素でのスタイルを上書きする仕様変更があります。疑似要素で色や幅を制御していた場合、意図したデザインが効かないことがあります。この問題を避けるには、標準仕様を使うブラウザだけにその指定を限定する @supports を使った条件分岐を入れる とよいでしょう。仕様の変化に敏感な最新のブラウザ事情を意識することが大切です。

Firefox での幅が思ったように変わらない

Firefox では scrollbar-width プロパティで「thin／auto／none」の指定が可能ですが、数値の px 指定が完全には反映されないことがあります。特に OS のテーマ設定や Firefox の環境設定に依存することが多いため、極端に細い・太い幅を求めるよりも「thin」指定で程よく見えるように設計するほうが無難です。

iOS Safari やモバイルでカスタマイズが無視されるケース

iOS Safari や一部のモバイルブラウザはスクロールバーのスタイル制御を制限しており、ユーザー操作時またはスクロール中のみスクロールバーが短時間表示されるなど、CSS が無視されることがあります。完全に同じ見た目をモバイルで再現することは難しいため、モバイルでは最低限のデザイン調整と、表示タイミングや可視性の配慮を優先しましょう。

おすすめデザインパターン集：スタイリッシュなスクロールバー例

デザインのヒントとして、実際によく使われるスタイルパターンを紹介します。色合いや形状の組み合わせを参考に、自分のサイトに合うものを選んでカスタマイズしてください。

ミニマルタイプ：細め・透明感のあるデザイン

背景が白系や淡色のデザインでは、スクロールバーを細め（thin）にして、サムを淡いグレーまたは半透明にすることで主張を抑えたミニマルな印象になります。マウスホバーで少し濃く変化させるだけで、使い勝手も損なわず洗練されたデザインが実現できます。

テーマにマッチするアクセントカラータイプ

サイトのテーマカラーに合わせてスクロールバーをアクセントに使うパターンです。サムにビビッドな色を使い、トラックを落ち着いたグレー系にすることで視線を誘導できます。ライト／ダークモード切り替えにも対応しやすいスタイルです。

丸み・影・グラデーションで立体感を演出するタイプ

サムの角を丸め、トラックとの間に境界線（ボーダー）や内側の影（インセットシャドウ）を加えることで、立体感や奥行きが出ます。グラデーションを使えばよりリッチな表現が可能です。ただし影やグラデーションはレンダリング負荷や可読性に注意して、「重すぎない」デザインを選びましょう。

まとめ

スクロールバーを CSS でカスタムするには、標準仕様と WebKit 疑似要素の両方を知り、ブラウザごとのサポートを確認しながら設計することが鍵です。標準プロパティ（scrollbar-color／scrollbar-width）は互換性が高く、疑似要素は自由度を高めますが、最新ブラウザでは標準仕様が優先される挙動もあるため、条件分岐を活用して対応するのが最適です。

デザインにこだわるほど細部への工夫が求められますが、アクセシビリティやモバイル環境での操作性にも配慮することで、見た目と使いやすさを両立できます。この記事で紹介したサンプルやパターンを元に、スクロールバーまでサイトのデザインを完成させてみてください。