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

クリエイターブログ

【CSS】スクロールバーを消す方法

2022.05.20 Posted by

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

 

コーディングの際、スクロールバーが邪魔になることがあります。そういったときに役立つ方法になります。

ただそれだけだとスクロール出来るか分からなくなってしまうので、デザイン上スクロール出来るように分かるようにするか、邪魔にならないスクロールバーを別途用意してあげる必要があります。

 

今回はスクロールバーを消すところまで説明させていただきます。

 

ではDEMOを用意したのでまずはそちらをご覧ください。

 

DEMO

 

コンテンツ内でスクロールバーが消えていることが確認出来きましたでしょうか。

該当部分のCSSのソースは以下のようになります。

 

■CSS

 

スクロールバーを表示している要素に追加で書く形ですね。

ここで重要なのはブラウザによって方法が異なる所です。それぞれのブラウザに対応した記述が必要になります。

ですが大した量ではないので忘れずに記述するようにしましょう。

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

 

DEMO

 

スクロールバーを消すだけなら簡単に出来ますが、ここからカスタマイズしたいとなると話は変わって来ます。

CSSで対応できるのか、それともjavascriptで対応するのか・・・など。

ざっと現時点で調べた感じですと、IE以外ならどうやら対応できそうですね。

今後スクロールバーのカスタイズについても紹介できればなと思います。

 

では今回はこの辺で・・・、以上クリエイターズメモでした。

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

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

PAGETOP

お問い合わせContact

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

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

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

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