スクロールバーCSS
カスタムスクロールバーのCSSを生成。幅・色・角丸を設定。
スクロールバーのプレビューテキスト 1
スクロールバーのプレビューテキスト 2
スクロールバーのプレビューテキスト 3
スクロールバーのプレビューテキスト 4
スクロールバーのプレビューテキスト 5
スクロールバーのプレビューテキスト 6
スクロールバーのプレビューテキスト 7
スクロールバーのプレビューテキスト 8
スクロールバーのプレビューテキスト 9
スクロールバーのプレビューテキスト 10
スクロールバーのプレビューテキスト 11
スクロールバーのプレビューテキスト 12
スクロールバーのプレビューテキスト 13
スクロールバーのプレビューテキスト 14
スクロールバーのプレビューテキスト 15
スクロールバーのプレビューテキスト 16
スクロールバーのプレビューテキスト 17
スクロールバーのプレビューテキスト 18
スクロールバーのプレビューテキスト 19
スクロールバーのプレビューテキスト 20
スクロールバーのプレビューテキスト 21
スクロールバーのプレビューテキスト 22
スクロールバーのプレビューテキスト 23
スクロールバーのプレビューテキスト 24
スクロールバーのプレビューテキスト 25
スクロールバーのプレビューテキスト 26
スクロールバーのプレビューテキスト 27
スクロールバーのプレビューテキスト 28
スクロールバーのプレビューテキスト 29
スクロールバーのプレビューテキスト 30
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #888888cc;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}使い方
スクロールバーの幅、色、角丸を調整してプレビューで確認します。
WebKit系ブラウザとFirefox対応のCSSコードを生成します。コピーしてお使いください。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます