CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
Post on:2021年7月29日
sponsors
スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。
ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。
スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。
Custom Scrollbars In CSS
by Ahmad Shadeed
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- スクロールバーの構成要素
- スクロールバーのデザインをカスタマイズする
- カスタムスクロールバーのスコープを指定する
- スクロールバーのデザインをカスタマイズ: 実装編
- ホバーエフェクトを追加できるか？
- 必要なときにスクロールバーを表示する
- アクセシビリティの懸念
- おわりに
はじめに
最近、スクロールバーのカスタマイズの人気が高まっており、この記事で掘り下げてみたいと思います。スクロールバーをカスタマイズする理由はいくつかあります。例えば、実装したUIがデフォルトのスクロールバーだと異なるOSで一貫されていないように見えます。一貫したスタイルを使用できるというメリットがあります。
私は以前からCSSでスクロールバーをカスタマイズする方法に興味を持っていましたが、向き合う機会がありませんでした。この記事では、この機会を利用して学び、この旅を記録していきたいと思います。
スクロールバーのカスタマイズ
スクロールバーの構成要素
最初に説明したいのは、スクロールバーの構成要素と部品についてです。スクロールバーには、トラック（Track）とサム（Thumb）があります。
スクロールバーの構成要素
トラックはスクロールバーのベースとなる部分で、サムはユーザーがスクロールするためにドラッグする部分です。
一つ重要なことがあります。スクロールバーはデザインによって水平方向にも垂直方向にも機能するということです。また、左から右（LTR）と右から左（RTL）の両方向で機能する多言語Webサイトで作業しているときに状況が変わることもあります。
スクロールバーは水平方向にも垂直方向にも機能する
スクロールバーのデザインをカスタマイズする
スクロールバーをカスタマイズするには、これまではWebkitのみだったため、FirefoxとIEはこのゲームに参加できませんでした。しかし現在では、Firefoxで機能する新しい構文が追加され、完全にサポートされるようになれば、より簡単になります。この記事では、古いWebkitの構文と新しい構文を紹介します。
CSSの古い構文
スクロールバーの幅
まず、スクロールバーのサイズを定義する必要があります。垂直方向のスクロールバーの場合は幅を、水平方向のスクロールバーの場合は高さを定義します。
|
1 2 3 |
.section::-webkit-scrollbar { width: 10px; } |
スクロールバーのトラック
これは、スクロールバーのベースとなる部分です。背景色、シャドウ、ボーダー、ボーダーの半径を追加してスタイルを定義できます。
|
1 2 3 |
.section::-webkit-scrollbar-track { background-color: darkgrey; } |
スクロールバーのサム
スクロールバーのベースの準備ができたら、スクロールバーのサムのスタイルを定義します。ユーザーがこのサムをドラッグしてスクロールバーを操作するので、これは重要です。
|
1 2 3 |
.section::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } |
以上で、CSSでスクロールバーをカスタマイズする古い構文について説明しました。続いて、新しい構文を解説します。
CSSの新しい構文
スクロールバーの幅
スクロールバーの幅を定義するときに、最も気にする値はautoとthinです。残念ながら、Webkitの構文のように特定の数値を定義することはできません。
|
1 2 3 |
.section { scrollbar-width: thin; } |
スクロールバーのカラー
このプロパティでは、スクロールバーのトラックとサムの両方のカラーをペア値として定義できます。
|
1 2 3 4 |
.section { scrollbar-color: #6969dd #e0e0e0; scrollbar-width: thin; } |
この新しい構文はシンプルですが、制限があります。適用できるのはソリッドカラー（単色）だけです。シャドウをつけたり、グラデーションをかけたり、角丸にしたりはできません。カスタマイズできるのは、カラーだけです。
カスタムスクロールバーのスコープを指定する
スクロールバーをカスタマイズするときに重要なことは、どこのスクロールバーをカスタマイズするかということです。Webサイトのすべてのスクロールバーですか？ それとも特定のセクションのみですか？
CSSの古い構文では、セレクタを要素に付与せずに定義することができ、スクロール可能なすべての要素に適用できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: darkgrey; } ::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } |
特定のセクションのみに適用したい場合は、セレクタの前に要素を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
.section::-webkit-scrollbar { width: 10px; } .section::-webkit-scrollbar-track { background-color: darkgrey; } .section::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } |
CSSの新しい構文もほとんど同じです。注意点は、一般的なスタイルにしたい場合は、bodyではなくhtml要素に定義する必要があるということです。
|
1 2 3 4 |
html { scrollbar-color: #6969dd #e0e0e0; scrollbar-width: thin; } |
試しに、bodyに上記を定義してみましたが、期待どおりに機能しませんでした。
新旧の構文がどのように機能するかが分かったと思いますので、スクロールバーのデザインをカスタマイズしてみましょう。
スクロールバーのデザインをカスタマイズ: 実装編
実装編 1
左: macOSのデフォルト、右: カスタマイズしたスクロールバー
スクロールバーのカスタマイズに入る前に、macOSのデフォルトについて解説します。macOSのスクロールバーがどのように見えるかです。
- スクロールバーのトラックは、左右にボーダーがあり、背景色は無地です。
- スクロールバーのサムは、丸みを帯びており、左右にスペースがあります。
Windowsの場合は少し異なります。
左: Windowsのデフォルト、右: カスタマイズしたスクロールバー
上記のモックアップに基づいてスクロールバーをカスタマイズする方法は下記のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.section::-webkit-scrollbar { width: 16px; } .section::-webkit-scrollbar-track { background-color: #e4e4e4; border-radius: 100px; } .section::-webkit-scrollbar-thumb { background-color: #d4aa70; border-radius: 100px; } |
トラックとサムの両方にborder-radiusを追加する必要がありますが、これは::webkit-scrollbarでは機能しないためです。
新しい構文では、スクロールバーのwidthを調整することはできません。可能なのは、トラックとサムの背景色を変更することだけです。
|
1 2 3 |
.section { scrollbar-color: #D4AA70 #e4e4e4; } |
注: 次の例は、webkitの構文でのみ機能します。プロジェクトで実際に使用する場合は、webkitと新しい構文の両方を記述してください。
実装編 2
このスクロールバーはグラデーションとシャドウを含むため、デザインが少し重くなっています。これは実装可能ですか？ はい、インナーシャドウとグラデーションでそのエフェクトを模倣できます。ではその実装を見てましょう。
グラデーションとシャドウを含むスクロールバー
|
1 2 3 4 5 |
.section::-webkit-scrollbar-thumb { background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%); box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5); border-radius: 100px; } |
実際のデモは下記をご覧ください。
See the Pen
Custom Scrollbar - 2 by Ahmad Shadeed (@shadeed)
on CodePen.
実装編 3
サムとトラックにボーダーを追加することもできるので、トリッキーなデザインにも対応できます。
スクロールバーのサムとトラックにボーダーを追加
|
1 2 3 4 5 |
.section::-webkit-scrollbar-thumb { border-radius: 100px; background: #8070D4; border: 6px solid rgba(0,0,0,0.2); } |
これをもとに、上下のボーダーをゼロにリセットすると、サムに面白い効果を与えることができます。サムの上部と下部にある小さな要素に注目してください。
スクロールバーのサムの上下に注目
実際のデモは下記をご覧ください。
See the Pen
Custom Scrollbar - 3 by Ahmad Shadeed (@shadeed)
on CodePen.
実装編 4
この例では、スクロールバーのサムがすべての側面からオフセットされるようにします。スクロールバーのプロパティでpaddingを使用することはできないため、CSSのborderとbackground-clipを使用して回避する必要があります。このアイデアは、Gabriel Romualdoの記事で学びました。
スクロールバーのサムがすべての側面からオフセット
デフォルトでは要素に背景とボーダーがある場合、ブラウザはborder-boxをクリップします。
以下の例を考えてみてください。
|
1 2 3 4 5 6 |
.button { min-width: 100px; border: solid 6px #000; box-sizing: border-box; background-color: #5749d2; } |
6pxのブラックのボーダーがあるボタンがあります。コンセプトを説明するために、paddingはありません。box-sizingがborder-boxに設定されていたとすると、ボーダーはボタンのサイズに含まれます。その結果、ボーダーは背景よりも上に表示されます。
傾けると、その構造がよく分かります。
ボーダーは背景よりも上に表示されている
これにbackground-clip: content-box;を適用すると、背景はコンテンツの周りにだけ表示されるようになります。
|
1 2 3 4 5 6 7 |
.button { min-width: 100px; border: solid 6px #000; box-sizing: border-box; background-color: #5749d2; background-clip: content-box; } |
background-clip: content-box;を適用すると、背景はコンテンツの周りにだけ表示される
この説明でこのアイデアが明確になることを願います。
それでは、スクロールバーのサムに戻りましょう。このエフェクトを模倣するには、下記を追加する必要があります。
|
1 2 3 4 5 6 |
.section::-webkit-scrollbar-thumb { border: 5px solid transparent; border-radius: 100px; background-color: #8070d4; background-clip: content-box; } |
これで完了です！
See the Pen
Custom Scrollbar - 4 by Ahmad Shadeed (@shadeed)
on CodePen.
スクロールバーのデザインをカスタマイズするさまざまな方法を解説しました。Firefoxでは、新しい構文を使用できますが、やはり太さとソリッドカラーのみに制限されていることを忘れないでください。
ホバーエフェクトを追加できるか？
はい、できます。
新旧の構文のスクロールバーのサムにホバーエフェクトを加えることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 古い構文 */ .section::-webkit-scrollbar-thumb:hover { background-color: #5749d2; } /* 新しい構文 */ .section { scrollbar-color: #d4aa70 #e4e4e4; transition: scrollbar-color 0.3s ease-out; } .section:hover { scrollbar-color: #5749d2; } |
新しい構文ではトランジションを追加できますが、古い構文では追加できません。しかし、これは私にとっては大きな問題ではありません。
必要なときにスクロールバーを表示する
スクロール可能な要素を作成するには、overflowプロパティにvisible以外の値を追加します。コンテンツがコンテナを超えた場合にのみスクロールバーが表示されるので、autoキーワードを使用することをお勧めします。
overflow: auto;にすれば、必要な時にスクロールバーが表示されます。
|
1 2 3 |
.section { overflow-y: auto; } |
アクセシビリティの懸念
スクロールバーのデザインをカスタマイズする際には、ユーザーの目に留まりやすいように、サムとトラック間のコントラストに注意してください。コントラストを充分にすることで、ユーザーが気づきやすくなります。
スクロールバーのカスタマイズで、「悪い」例を見てみましょう。
「悪い」例
サムのカラーはほとんど目立ちません。これは、サムでスクロールすることに慣れているユーザーにとっては、操作しづらくなるので適していません。
おわりに
その他のリソース。
コメントや提案があれば、@shadeed9までお願いします。
sponsors
