【CSS】スクロールバーのデザインを変更する方法

ウェブサイトやアプリケーションのデザインにおいて、スクロールバーは頻繁に使用されますが、多くの場合、デフォルトの外観ではデザインに適合しないことがあります。この記事では、CSSを使用してスクロールバーのデザインをカスタマイズする方法を紹介します。

基本的なスタイリング

まず、スクロールバーの基本的なスタイリングを行います。以下のCSSを使用して、スクロールバーの幅や色を変更します。

/* スクロールバーのトラック */
::-webkit-scrollbar {
  width: 10px; /* スクロールバーの幅 */
}

/* スクロールバーのトラックの背景色 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* スクロールバーのスクロール部分（サム） */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* マウスオーバー時のスクロールバーのスクロール部分（サム） */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

これにより、WebKitベースのブラウザでスクロールバーのデザインが変更されます。

Firefoxでの対応

Firefoxでは、scrollbar-width プロパティと scrollbar-color プロパティを使用してスクロールバーをスタイリングします。以下のように記述します。

/* スクロールバーの幅 */
* {
  scrollbar-width: thin;
}

/* スクロールバーの色 */
* {
  scrollbar-color: #888 #f1f1f1;
}

まとめ

スクロールバーのデザインをカスタマイズすることで、ウェブサイトやアプリケーションのユーザーエクスペリエンスを向上させることができます。この記事を参考にして、さまざまなブラウザで動作するクロスブラウザ対応のスクロールバーを作成してみてください。