東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

【CSS】スクロールバーをカスタマイズする方法

2022.07.20 Posted by

こんにちは、今回はCSSでブラウザのスクロールバーをカスタマイズする方法を紹介したいと思います。

 

以前「【CSS】スクロールバーを消す方法」という記事を書きましたが、今回はそれに続いた内容となっております。

 

まず初めに注意点として、ブラウザごとにカスタマイズの記述や可能な内容が異ります。ブラウザごとに簡単にカスタイズ可能な範囲を以下にまとめてみました。

 

・IE

色(スクロールバーの各パーツごと)

・Firefox

色(つまみ部分、トラック部分のみ)、大きさ(予め用意されている大きさのみ)

・Edge、Chrome、Safariなどのwebkit系ブラウザ

色(つまみ部分、トラック部分のみ)、大きさ(px指定可)、角丸などの装飾

 

webkit系ブラウザでは細かく指定できますが、それ以外のブラウザはかなり制限がある形になります。

それらを踏まえて各ブラウザで作成したDEMOをご覧ください。使用する色などは同じにして分かりやすくしてみました。

 

DEMO

 

CSSのソースは以下をご覧ください。

 

 

指定方法自体は特に難しくも無いです。プロパティ名を見ればどこと対応しているか分かりやすいと思います。

webkit系ブラウザに関しては疑似要素で指定する形となります。どのプロパティを疑似要素で使えるのかまで詳しく調べていないので、そこは要検証ですね。少なくともホバー時に色を変えたり、border-radiusで角丸にはすることは可能でした。

 

再度DEMOのリンクを載せときます。

 

DEMO

 

調べて使用してみた感想としては、webkit系ブラウザ以外は大したカスタマイズは出来ないなって感じですね。

IE、Firefoxは気にしないのであればCSSで普通にカスタマイズしてしまっていいと思います。

どうしてもどのブラウザでも同じ見た目にしたいのであれば、javascriptなどに頼るしか無さそうです。

 

以上、今回のクリエイターブログでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278