CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント

スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。

ページ全体のスクロールバー(ブラウザに表示されるやつ)はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。

スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。

CSSでスクロールバーをカスタマイズする方法を徹底解説

Custom Scrollbars In CSS
by Ahmad Shadeed

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

最近、スクロールバーのカスタマイズの人気が高まっており、この記事で掘り下げてみたいと思います。スクロールバーをカスタマイズする理由はいくつかあります。例えば、実装したUIがデフォルトのスクロールバーだと異なるOSで一貫されていないように見えます。一貫したスタイルを使用できるというメリットがあります。

私は以前からCSSでスクロールバーをカスタマイズする方法に興味を持っていましたが、向き合う機会がありませんでした。この記事では、この機会を利用して学び、この旅を記録していきたいと思います。

スクロールバーのカスタマイズ

スクロールバーのカスタマイズ

スクロールバーの構成要素

最初に説明したいのは、スクロールバーの構成要素と部品についてです。スクロールバーには、トラック(Track)サム(Thumb)があります。

スクロールバーの構成要素

スクロールバーの構成要素

トラックはスクロールバーのベースとなる部分で、サムはユーザーがスクロールするためにドラッグする部分です。

一つ重要なことがあります。スクロールバーはデザインによって水平方向にも垂直方向にも機能するということです。また、左から右(LTR)と右から左(RTL)の両方向で機能する多言語Webサイトで作業しているときに状況が変わることもあります。

水平と垂直方向のスクロールバー

スクロールバーは水平方向にも垂直方向にも機能する

スクロールバーのデザインをカスタマイズする

スクロールバーをカスタマイズするには、これまではWebkitのみだったため、FirefoxとIEはこのゲームに参加できませんでした。しかし現在では、Firefoxで機能する新しい構文が追加され、完全にサポートされるようになれば、より簡単になります。この記事では、古いWebkitの構文と新しい構文を紹介します。

CSSの古い構文

スクロールバーの幅
まず、スクロールバーのサイズを定義する必要があります。垂直方向のスクロールバーの場合は幅を、水平方向のスクロールバーの場合は高さを定義します。

スクロールバーのトラック
これは、スクロールバーのベースとなる部分です。背景色、シャドウ、ボーダー、ボーダーの半径を追加してスタイルを定義できます。

スクロールバーのサム
スクロールバーのベースの準備ができたら、スクロールバーのサムのスタイルを定義します。ユーザーがこのサムをドラッグしてスクロールバーを操作するので、これは重要です。

以上で、CSSでスクロールバーをカスタマイズする古い構文について説明しました。続いて、新しい構文を解説します。

CSSの新しい構文

スクロールバーの幅
スクロールバーの幅を定義するときに、最も気にする値はautothinです。残念ながら、Webkitの構文のように特定の数値を定義することはできません。

スクロールバーのカラー
このプロパティでは、スクロールバーのトラックとサムの両方のカラーをペア値として定義できます。

この新しい構文はシンプルですが、制限があります。適用できるのはソリッドカラー(単色)だけです。シャドウをつけたり、グラデーションをかけたり、角丸にしたりはできません。カスタマイズできるのは、カラーだけです。

カスタムスクロールバーのスコープを指定する

スクロールバーをカスタマイズするときに重要なことは、どこのスクロールバーをカスタマイズするかということです。Webサイトのすべてのスクロールバーですか? それとも特定のセクションのみですか?

CSSの古い構文では、セレクタを要素に付与せずに定義することができ、スクロール可能なすべての要素に適用できます。

特定のセクションのみに適用したい場合は、セレクタの前に要素を追加します。

CSSの新しい構文もほとんど同じです。注意点は、一般的なスタイルにしたい場合は、bodyではなくhtml要素に定義する必要があるということです。

試しに、bodyに上記を定義してみましたが、期待どおりに機能しませんでした。

新旧の構文がどのように機能するかが分かったと思いますので、スクロールバーのデザインをカスタマイズしてみましょう。

スクロールバーのデザインをカスタマイズ: 実装編

実装編 1

スクロールバーのデザインをカスタマイズ

左: macOSのデフォルト、右: カスタマイズしたスクロールバー

スクロールバーのカスタマイズに入る前に、macOSのデフォルトについて解説します。macOSのスクロールバーがどのように見えるかです。

  • スクロールバーのトラックは、左右にボーダーがあり、背景色は無地です。
  • スクロールバーのサムは、丸みを帯びており、左右にスペースがあります。

Windowsの場合は少し異なります。

スクロールバーのデザインをカスタマイズ

左: Windowsのデフォルト、右: カスタマイズしたスクロールバー

上記のモックアップに基づいてスクロールバーをカスタマイズする方法は下記のとおりです。

トラックとサムの両方にborder-radiusを追加する必要がありますが、これは::webkit-scrollbarでは機能しないためです。

新しい構文では、スクロールバーのwidthを調整することはできません。可能なのは、トラックとサムの背景色を変更することだけです。

注: 次の例は、webkitの構文でのみ機能します。プロジェクトで実際に使用する場合は、webkitと新しい構文の両方を記述してください。

実装編 2

このスクロールバーはグラデーションとシャドウを含むため、デザインが少し重くなっています。これは実装可能ですか? はい、インナーシャドウとグラデーションでそのエフェクトを模倣できます。ではその実装を見てましょう。

スクロールバーのデザインをカスタマイズ

グラデーションとシャドウを含むスクロールバー

実際のデモは下記をご覧ください。

See the Pen
Custom Scrollbar - 2
by Ahmad Shadeed (@shadeed)
on CodePen.

実装編 3

サムとトラックにボーダーを追加することもできるので、トリッキーなデザインにも対応できます。

スクロールバーのデザインをカスタマイズ

スクロールバーのサムとトラックにボーダーを追加

これをもとに、上下のボーダーをゼロにリセットすると、サムに面白い効果を与えることができます。サムの上部と下部にある小さな要素に注目してください。

スクロールバーのデザインをカスタマイズ

スクロールバーのサムの上下に注目

実際のデモは下記をご覧ください。

See the Pen
Custom Scrollbar - 3
by Ahmad Shadeed (@shadeed)
on CodePen.

実装編 4

この例では、スクロールバーのサムがすべての側面からオフセットされるようにします。スクロールバーのプロパティでpaddingを使用することはできないため、CSSのborderbackground-clipを使用して回避する必要があります。このアイデアは、Gabriel Romualdoの記事で学びました。

スクロールバーのデザインをカスタマイズ

スクロールバーのサムがすべての側面からオフセット

デフォルトでは要素に背景とボーダーがある場合、ブラウザはborder-boxをクリップします。

以下の例を考えてみてください。

ボタンのキャプチャ

6pxのブラックのボーダーがあるボタンがあります。コンセプトを説明するために、paddingはありません。box-sizingborder-boxに設定されていたとすると、ボーダーはボタンのサイズに含まれます。その結果、ボーダーは背景よりも上に表示されます。
傾けると、その構造がよく分かります。

ボタンの構造

ボーダーは背景よりも上に表示されている

これにbackground-clip: content-box;を適用すると、背景はコンテンツの周りにだけ表示されるようになります。

ボーダーと背景の関係

background-clip: content-box;を適用すると、背景はコンテンツの周りにだけ表示される

この説明でこのアイデアが明確になることを願います。
それでは、スクロールバーのサムに戻りましょう。このエフェクトを模倣するには、下記を追加する必要があります。

これで完了です!

See the Pen
Custom Scrollbar - 4
by Ahmad Shadeed (@shadeed)
on CodePen.

スクロールバーのデザインをカスタマイズするさまざまな方法を解説しました。Firefoxでは、新しい構文を使用できますが、やはり太さとソリッドカラーのみに制限されていることを忘れないでください。

ホバーエフェクトを追加できるか?

はい、できます。
新旧の構文のスクロールバーのサムにホバーエフェクトを加えることができます。

新しい構文ではトランジションを追加できますが、古い構文では追加できません。しかし、これは私にとっては大きな問題ではありません。

必要なときにスクロールバーを表示する

スクロール可能な要素を作成するには、overflowプロパティにvisible以外の値を追加します。コンテンツがコンテナを超えた場合にのみスクロールバーが表示されるので、autoキーワードを使用することをお勧めします。

コンテンツが長い場合と短い場合

overflow: auto;にすれば、必要な時にスクロールバーが表示されます。

アクセシビリティの懸念

スクロールバーのデザインをカスタマイズする際には、ユーザーの目に留まりやすいように、サムとトラック間のコントラストに注意してください。コントラストを充分にすることで、ユーザーが気づきやすくなります。

スクロールバーのカスタマイズで、「悪い」例を見てみましょう。

スクロールバーのカスタマイズ

「悪い」例

サムのカラーはほとんど目立ちません。これは、サムでスクロールすることに慣れているユーザーにとっては、操作しづらくなるので適していません。

おわりに

その他のリソース。

コメントや提案があれば、@shadeed9までお願いします。

sponsors

top of page

©2024 coliss