CSSスクロールバージェネレーター
色と形を選んで、サンプルのボックスをスクロールしてください。コードは新しいプロパティと、古いChromeやSafari向けのバージョンを組み合わせています。
使い方サイトの色のスクロールバー
利用できる言語: 
CSSスクロールバージェネレーター: 用途
ブランドカラーのスクロールバーは、サイトの仕上がりを良くします。ただしCSSは変わりました。現在は標準のscrollbar-colorとscrollbar-widthがあり、Firefox、Chrome・Edge 121、Safari 26.2が対応していますが、古いバージョンは::-webkit-scrollbarしか理解しません。
このジェネレーターは、Chromeのドキュメントの推奨どおり、2つの方法を@supportsで分けて出力します。scrollbar-colorが定義されていると、Chromeは古いルールを無視するためです。トラックとバーの色、幅、角丸、ホバー時の色を選び、サンプルのボックスで試せます。
使い方
- トラックとバーの色を選びます。
- 幅と角丸を調整します。
- ページ全体または特定のボックス用のCSSをコピーします。
使うタイミング
- ブランドカラーのスクロールバー。
- ページ内のスクロールするボックス。
- ダークテーマのパネルやシステム。
よくある質問
すべてのブラウザーで動作しますか？
標準のscrollbar-colorとscrollbar-widthは、Firefox、Chrome、Edge（バージョン121以降）、Safari 26.2で動作します。それ以前のバージョン向けに、幅、角、ホバー時の色を変える::-webkit-scrollbarのルールもコードに含まれます。
なぜコードで@supportsを使うのですか？
Chromeでは、scrollbar-colorが定義されていると::-webkit-scrollbarのルールは無視されます。@supportsを使うと、標準のプロパティが存在する環境にだけ適用され、知らないブラウザー向けには古いルールが残ります。
スクロールバーをカスタマイズするとアクセシビリティに悪影響はありますか？
細すぎたり、トラックとのコントラストがなかったりすると、悪影響が出ることがあります。マウスでつかめる幅と、背景から目立つ色を保ってください。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。