ZenovayTools

CSSスクロールバースタイラー

CSSを使ってカスタムスクロールバーをデザインします。幅、トラック色、サムの色、角の丸さ、ホバーエフェクトを調整でき、ライブプレビューとコピー可能なCSSが得られます。

Scrollbar

Width10px
Thumb Border Radius5px
Track Border Radius0px
Thumb Border0px

Colors

Track Color
#f1f1f1
Thumb Color
#888888
Thumb Hover
#555555
Thumb Border Color
#ffffff

Preview

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

11. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

14. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

19. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

20. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

23. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

24. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

25. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

26. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

27. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

28. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

30. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

CSS Code
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #888888 #f1f1f1;
}

CSSスクロールバースタイラーの使い方

  1. 1スクロールバーの幅、トラック色、サムの色を調整します。
  2. 2角の丸さとホバーエフェクトをカスタマイズします。
  3. 3サンプルコンテンツでスクロールバーをプレビューします。
  4. 4プロジェクト用のCSSコードをコピーします。
Zenovayアナリティクス

訪問者の本当の行動を知る。

  • リアルタイムの訪問者トラッキング
  • プライバシーファースト、クッキーバナーなし
  • 2分でセットアップ
Zenovayを見る

関連ツール

CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。
CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。
CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。
CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。

よくある質問

CSSでスクロールバーをスタイルするにはどうすればよいですか？▾
Chrome/Safari/Edgeの場合は::-webkit-scrollbar疑似要素を使用し、Firefoxの場合はscrollbar-widthおよびscrollbar-colorプロパティを使用します。このジェネレータは両方の構文に対応しています。
どのブラウザがカスタムスクロールバーをサポートしていますか？▾
Chrome、Edge、Safariは::-webkit-scrollbarに対応しています（ユーザーの85%以上）。Firefox 64以降はscrollbar-widthおよびscrollbar-colorに対応しています。合わせるとほぼ97%のカバレッジになります。
スクロールバーを透明にできますか？▾
はい。WebKitの場合はスクロールバーの幅を0に設定して背景を透明にするか、Firefoxの場合はscrollbar-width: noneを使用します。コンテンツはスクロール可能なままです。
カスタムスクロールバーCSSはパフォーマンスに影響しますか？▾
無視できるほどです。スクロールバーのスタイリングは要素ごとに1回適用され、フレームごとではありません。複雑なスタイルでも測定可能なパフォーマンス低下はありません。
JavaScriptスクロールバーライブラリを使用すべきですか？▾
CSSのみのスクロールバーが推奨されます。JSライブラリはファイルサイズを増やし、アクセシビリティの問題を引き起こす可能性があります。CSSで実現できない場合にのみJSを使用してください。