Web制作をしていると、「スクロールはさせたいけれど、スクロールバーは消したい」という場面がありますよね。
2026年現在のブラウザ環境では、CSSでシンプルに実装できるようになっています。今回はスクロールバーを非表示にする方法を解説します。
【結論】これだけ書けばOK！
現在、主要なブラウザをカバーするコードがこちらです。
.no-scrollbar {
/* Firefox 用 */
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
/* Safari, Chrome, Edge 用 (WebKit系) */
display: none;
}注意点
IE /や旧Edge用の -ms-overflow-style: none; この記述はもう不要です。削除してコードを軽量化しましょう。
また、スクロールバーを消す際に、
「見た目は消えても、スクロールできることがユーザーに伝わるか？」
スクロールバーがないと、ユーザーはそこがスクロールできないエリアだと勘違いしてしまいます。スクロールができることを示す工夫が必要です。
まとめ
スクロールバーの非表示は、シンプルな記述だけで実装できます。
デザインの細部にまでこだわって、スッキリとした美しいUIを目指しましょう！
