CSSスクロールバー生成ツール
ライブプレビューを見ながらカラフルなカスタムスクロールバーをデザインし、CSSをコピー — WebKitとFirefoxの両方に対応。
739回閲覧
このエリアはカスタムスクロールバーを試すためのものです。下にスクロールすると、右側のバーがあなたのデザインに合わせて変化する様子を確認できます。色やサイズを変更すると、結果はこのボックスに即座に反映されます。
このエリアはカスタムスクロールバーを試すためのものです。下にスクロールすると、右側のバーがあなたのデザインに合わせて変化する様子を確認できます。色やサイズを変更すると、結果はこのボックスに即座に反映されます。
このエリアはカスタムスクロールバーを試すためのものです。下にスクロールすると、右側のバーがあなたのデザインに合わせて変化する様子を確認できます。色やサイズを変更すると、結果はこのボックスに即座に反映されます。
このエリアはカスタムスクロールバーを試すためのものです。下にスクロールすると、右側のバーがあなたのデザインに合わせて変化する様子を確認できます。色やサイズを変更すると、結果はこのボックスに即座に反映されます。
このエリアはカスタムスクロールバーを試すためのものです。下にスクロールすると、右側のバーがあなたのデザインに合わせて変化する様子を確認できます。色やサイズを変更すると、結果はこのボックスに即座に反映されます。
このエリアはカスタムスクロールバーを試すためのものです。下にスクロールすると、右側のバーがあなたのデザインに合わせて変化する様子を確認できます。色やサイズを変更すると、結果はこのボックスに即座に反映されます。
CSSでスクロールバーをスタイリングする方法
スクロールバーのスタイリングには2つの仕組みがあります。WebKit系ブラウザ(Chrome、Edge、Safari)は::-webkit-scrollbarという擬似要素ファミリーを使い、トラック、つまみ(サム)、幅、角丸をそれぞれ指定できます。一方Firefoxは、よりシンプルな標準プロパティであるscrollbar-colorとscrollbar-widthを使用します。生成されるコードには両方が含まれるため、どのブラウザでも見た目が一貫します。
色、幅、角丸を調整すると、右側のプレビューパネルにデザインが反映された状態でスクロールでき、CSSも即座に更新されます。
よくある質問
Firefoxだとスクロールバーの見た目が違うのはなぜですか?
Firefoxは::-webkit-scrollbarのルールを無視し、scrollbar-color(つまみとトラックの色)とscrollbar-widthのみを反映します。角丸やホバー効果はWebKit専用の機能のため、Firefoxでは簡略版が表示されます。
特定の要素だけスクロールバーをスタイリングできますか?
はい — セレクタの範囲を限定してください。例:.my-box::-webkit-scrollbar { … } と .my-box { scrollbar-color: … }。ページ全体に適用したい場合は、htmlやbody(またはこの生成ツールのそのままのセレクタ)に適用してください。
カスタムスクロールバーはモバイルでも動作しますか?
ほとんどの場合動作しません。iOSや大半のAndroidブラウザは、これらのスタイルを無視するオーバーレイ式のスクロールバーを使用しています。カスタムスクロールバーはデスクトップ向けの装飾と考えてください。
関連ツール
問題を報告
CSSスクロールバー生成ツール