カスタムスクロールバー
::-webkit-scrollbar でスクロールバーをスタイリング。幅・トラック色・つまみ色・角丸・ホバー色をライブプレビューで調整し、実用的なCSSをワンクリックでコピー。
このボックスを上下にスクロールして、カスタムスクロールバーの動作を確認してください。
上のコントロール（幅・トラック色・つまみ色・ホバー色・角丸・枠線）を調整すると、プレビューが即座に更新されます。
Webkitベースのブラウザ（Chrome、Safari、Edge、Opera）は ::-webkit-scrollbar を完全サポート。Firefoxは新しい scrollbar-color と scrollbar-width プロパティをサポートし、生成CSSに含まれています。
ヒント：太いスクロールバーはタッチデバイスで掴みやすく、細いスクロールバーはデスクトップでミニマルに見えます。
ホバーを試してみてください — つまみにホバーすると色が変わります。生成CSSに :hover ルールが自動的に含まれます。
「フローティング」風にするには、トラック色をページ背景と同じにし、つまみに細い枠線を追加します。
スクロールバーの全長をテストするためにスクロールを続けてください。
プレビューコンテンツ終わり。
カスタムスクロールバーについて
カスタムスクロールバーは、ChromiumベースのブラウザとSafariでは ::-webkit-scrollbar 系の擬似要素で、Firefoxでは scrollbar-color / scrollbar-width プロパティでスタイリングします。本ツールは両方を出力し、すべての主要ブラウザで動作します。
制御できるプロパティ
- 幅 — スクロールバー全体の太さ。
- トラック色 — 溝の背景色。
- つまみ色 — ドラッグ可能なハンドル。
- つまみホバー色 —
:hover時に適用。 - 角丸 — つまみの角の丸み。
- つまみ枠線 — 「フローティング」感のための枠線の太さと色。
使い方
- スクロールバー幅 を希望の太さに設定。
- トラック色 と つまみ色 を選択。
- つまみホバー色 でインタラクティブ性を追加。
- 角丸とオプションの枠線を調整。
- プレビューボックスをスクロールしてテストし、CSSをコピー をクリック。
よくある質問
Firefoxで動作しますか？ はい — 生成CSSにはFirefox用の scrollbar-color と scrollbar-width、およびChromium/Safari用の完全な ::-webkit-scrollbar ルールが含まれています。
一部のブラウザで色が表示されないのはなぜですか？ 一部のブラウザ（特に旧Firefox）は2色・固定幅モデルのみサポート。生成CSSは段階的にフォールバックします。
スクロールバーを非表示にしつつスクロール機能を維持できますか？ はい — scrollbar-width: none と ::-webkit-scrollbar { display: none; } を設定します。本ツールは可視スクロールバーに焦点を当てていますが、コピーしたCSSを編集して非表示にできます。