こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
普段のWeb制作で、デフォルトのスクロールバーに物足りなさを感じたことはありませんか？
特にダークテーマやブランドカラーを活かしたUIを作る際、スクロールバーが浮いてしまうと全体のデザイン統一感が損なわれます。
実は、CSSでスクロールバーの見た目を自由に整える方法があり、ChromeやSafariでは ::-webkit-scrollbar 系の疑似要素、Firefoxでは scrollbar-width や scrollbar-color を活用します。
この記事では、クロスブラウザを意識したスクロールバーカスタマイズを、
実用例を交えてわかりやすく解説します。
基本のHTML構造
まずはスクロールバーを適用する要素を用意します。
WebKit系ブラウザ（Chrome/Safari）のスタイル指定
::-webkit-scrollbar とその子要素で、スクロールバー全体・トラック・つまみを個別にデザインできます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
Firefox向けのスタイル指定
Firefoxでは scrollbar-width と scrollbar-color を使用します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
クロスブラウザ対応のポイント
- WebKit系とFirefoxで書き分ける
- WindowsとMacで見た目が異なる点を考慮する
- ユーザビリティを損なわない配色・太さにする
応用例：ダークテーマに合わせたデザイン
ダークテーマサイトでは、背景と馴染むスクロールバー配色を設定します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ
スクロールバー装飾のコツ
Chrome・Safariは ::-webkit-scrollbarを使用。
Firefoxは scrollbar-color / scrollbar-width を活用するのが基本です。
サイトのテーマカラーに合わせるだけでUIの統一感が向上し、デザインの完成度も高まります。
Firefoxは scrollbar-color / scrollbar-width を活用するのが基本です。
サイトのテーマカラーに合わせるだけでUIの統一感が向上し、デザインの完成度も高まります。