【CSS】スクロールバーをカスタマイズする方法
2022.07.20 Posted by Coding_team
こんにちは、今回はCSSでブラウザのスクロールバーをカスタマイズする方法を紹介したいと思います。
以前「【CSS】スクロールバーを消す方法」という記事を書きましたが、今回はそれに続いた内容となっております。
まず初めに注意点として、ブラウザごとにカスタマイズの記述や可能な内容が異ります。ブラウザごとに簡単にカスタイズ可能な範囲を以下にまとめてみました。
・IE
色(スクロールバーの各パーツごと)
・Firefox
色(つまみ部分、トラック部分のみ)、大きさ(予め用意されている大きさのみ)
・Edge、Chrome、Safariなどのwebkit系ブラウザ
色(つまみ部分、トラック部分のみ)、大きさ(px指定可)、角丸などの装飾
webkit系ブラウザでは細かく指定できますが、それ以外のブラウザはかなり制限がある形になります。
それらを踏まえて各ブラウザで作成したDEMOをご覧ください。使用する色などは同じにして分かりやすくしてみました。
→DEMO
CSSのソースは以下をご覧ください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.conetnts { height: 400px; overflow: auto; scrollbar-track-color: #eee; /* IE */ scrollbar-face-color: #aaa; /* IE */ scrollbar-color: #aaa #eee; /* Firefox */ scrollbar-width: thin; /* Firefox */ } .conetnts::-webkit-scrollbar { /* webkit系ブラウザ */ width: 10px; } .conetnts::-webkit-scrollbar-track { /* webkit系ブラウザ */ background: #eee; } .conetnts::-webkit-scrollbar-thumb { /* webkit系ブラウザ */ background: #aaa; border-radius: 5px; } .conetnts::-webkit-scrollbar-thumb:hover { /* webkit系ブラウザ */ background: #999; } |
指定方法自体は特に難しくも無いです。プロパティ名を見ればどこと対応しているか分かりやすいと思います。
webkit系ブラウザに関しては疑似要素で指定する形となります。どのプロパティを疑似要素で使えるのかまで詳しく調べていないので、そこは要検証ですね。少なくともホバー時に色を変えたり、border-radiusで角丸にはすることは可能でした。
再度DEMOのリンクを載せときます。
→DEMO
調べて使用してみた感想としては、webkit系ブラウザ以外は大したカスタマイズは出来ないなって感じですね。
IE、Firefoxは気にしないのであればCSSで普通にカスタマイズしてしまっていいと思います。
どうしてもどのブラウザでも同じ見た目にしたいのであれば、javascriptなどに頼るしか無さそうです。
以上、今回のクリエイターブログでした。
関連記事こちらの記事も合わせてどうぞ。
ノーコードツールとは?Web制作の新常識と活用事例について徹底解説!
2024.08.23
2022.07.28
Webサイト更新時に修正が反映されない時は?キャッシュ削除での解決方法
2022.05.19