Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

CSSでスクロールバーのデザインをカスタマイズする方法 -webkit-scrollbarの解説

CSSでスクロールバーのデザインをカスタマイズする方法 -webkit-scrollbarの解説

画像出典:W3C

コンテンツを画面にすべて表示しきれない時に、スクロールバーを表示させなくてはならない時があります。しかしブラウザデフォルトのスクロールバーはデザインがとてもダサいです。

今回はスクロールバーをCSSでカスタマイズする方法について説明します。

 

目次

スクロールバーをかっこいいデザインにできるCSS「-webkit-scrollbar」

「-webkit-scrollbar」というプロパティを使うと、スクロールバーをブラウザデフォルトのデザインより、かっこよく装飾することができます。実際に実装したデモをご覧ください。

See the Pen [-webkit-scrollbar]CSSでスクロールバーのデザインをカスタマイズする方法 by tak-kun (@tak-kun) on CodePen.

まずスクロールバーを表示させるためには、スクロールバーを表示させたい親要素にheightを指定して高さを設定します。さらに「overflow:auto」または「overflow-y: scroll」を指定すれば、設定したheightの高さよりコンテンツ量がはみ出た場合に、スクロールバーが出現します。

 

-webkit-scrollbarの解説

-webkit-scrollbarの簡単な解説をします。-webkit-scrollbarはスクロールバーのデザインを変更することができるプロパティです。

主に使うプロパティは、スクロールバーの幅を設定する「::-webkit-scrollbar」プロパティ、スクロールバーのレール部分を設定する「::-webkit-scrollbar-track」プロパティ、スクロールバーのつまみ部分を設定する「::-webkit-scrollbar-thumb」プロパティの3つです。

/*スクロールバーの幅*/
::-webkit-scrollbar {
    width: 6px;
}
/*スクロールバーのレール*/
::-webkit-scrollbar-track {
  border-radius: 30px;
  background: #eee;
}
/*スクロールバーのつまみ*/
::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: #81D4FA;
}

::-webkit-scrollbar

::-webkit-scrollbarにwidthを指定すると、スクロールバーの横幅を設定することができます。最近の海外のイケてるサイトデザインを観察すると。細めのスクロールバーが多く見受けられますので、目安としては7px以内くらいに設定するとスタイリッシュな印象になります。

::-webkit-scrollbar-track

::-webkit-scrollbar-trackはスクロールバーのレールの部分を装飾するプロパティなので、背景色やボーダーの装飾を設定します。丸みを帯びたスクロールバーを設定したい場合は、border-radiusを設定すると丸みを帯びたスクロールバーを装飾できます。

::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumbはスクロールバーのつまみの部分を装飾するプロパティです。つまみの色(background)を好きな色に設定することができます。

-webkit-scrollbarはChromeやSafariでしか対応していない

-webkit-scrollbarプロパティはwebkitベースのブラウザしか対応していません。つまり、Google ChromeやSafariで表現することは可能ですが、FireFoxやIEなどのブラウザでは-webkit-scrollbarを使用することができません。

すべてのブラウザでスクロールバーをカスタマイズできるプロパティができれば良いのですが、現状そのようなプロパティは勧告されていません。

どうしてもあのダサいスクロールバーをなんとかしたい場合は、スクロールバー自体を無理やり隠してしまう方法もあります。スクロールバーを隠したとしてもスクロール自体はできるので、最終的にはこのような荒業で対応するのが良いでしょう。