CSSでスクロールバーのデザインをカスタマイズする。WEMOブログ向けWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。ホームWEMOについて人気記事一覧フロントエンドHTMLCSS/SassJavaScriptSVGバックエンドPHPサーバーWordPress基礎知識カスタマイズプラグインちょいメモ集CSSでスクロールバーのデザインをカスタマイズする。2019.08.15スクロールバーのデザインをCSSだけでカスタマイズする方法を具体例を挙げながらまとめていきます。普通にブラウザの右側に出てくるスクロールバーはまだいいですが、コンテンツの中でスクロールさせる要素のスクロールバーがダサすぎて、なんとかしたい人向けです。ちなみに、今回メモするTipsは、-webkit系でのみ有効です。Firefoxでは、スクロールバーをCSSでカスタマイズすることは現状できないようですね。目次-webkit-scrollbarでスクロールバーをカスタマイズできる-webkit-scrollbarというプロパティを指定することで、スクロールバーのデザインはカスタマイズ可能です。簡単なカスタマイズには簡単な知識だけしか必要ないと思うので、実際に私が扱った要素だけ紹介します。::-webkit-scrollbar::-webkit-scrollbar-track::-webkit-scrollbar-thumb以上の3要素だけで、ある程度スクロールバーをカスタマイズできます。-webkit-scrollbarについて、詳しくはこちらのサイト(「WebKitを使ってスクロールバーをカスタマイズ」)がすごく詳しくまとめてくれています。実際のスクロールバーカスタマイズ例では、実際にどう記述すればどうなるか。当サイト全体で使用しているスクロールバーの実装方法から紹介します。ページのスクロールバーは独特なものにしすぎても逆にわかりにくいので、Macのスクロールバーを真似て作りました。Windowではよりシンプルに。Macでは見慣れたもののままで違和感なく。#fff;}外枠の角も丸くした版スクロールで動くバー?の外にある大枠も丸くしたいなら。none;}::-webkit-scrollbar-trackと::-webkit-scrollbar-thumbが少し違いますね。どんな感じのスクロールバーになるかは以下をご覧ください。すくろ||||||||||||る。スクロールバーの枠の縁が丸くなっていますね。特定の要素(タグ)のスクロールバーをカスタマイズするもう一つ、少し特殊なスクロールバーデザインの例をご紹介しておきます。preタグに使用しているスクロールバーのカスタマイズ方法です。このコメントはスクロールさせるために書いています。*/クラス名付きのタグを指定するdiv.hogeと同様、pre::-webkit-〇〇のようにするだけです。他にも、好きなようにアレンジしてみてください。スマホでのスクロールに慣性をつけてなめらかにする方法もメモしていますので、こちらも是非参考にしてみてください。指定で慣性スクロールが可能に。@ddryo_loosホームフロントエンドCSS/SassCSSでスクロールバーのデザインをカスタマイズする。