【2026年版】CSSだけでスクロールバーを非表示にする方法。

Web制作をしていると、「スクロールはさせたいけれど、デザインを損なうスクロールバーは消したい」という場面がありますよね。

2026年現在のブラウザ環境では、標準的なCSSでシンプルに実装できるようになっています。今回は、最新のスクロールバーを非表示にする方法を解説します。

①【結論】これだけ書けばOK！

現在、主要なブラウザ（Chrome, Edge, Safari, Firefox）をすべてカバーする最小のコードがこちらです。

.no-scrollbar {
  /* Firefox 用 */
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  /* Safari, Chrome, Edge 用 (WebKit系) */
  display: none;
}

②これまでの手法との違い

数年前までの記事では、以下のような記述をよく見かけました。

• -ms-overflow-style: none;（IE / 旧Edge用）
  → 2026年現在、IEや旧Edge用のこの記述はもう不要です。削除してコードを軽量化しましょう。

⚠️注意点：ユーザビリティを忘れない

スクロールバーを消す際に、絶対に忘れてはいけないポイントが1つあります。

「見た目は消えても、スクロールできることがユーザーに伝わるか？」

スクロールバーがないと、ユーザーはそこがスクロールできないエリアだと勘違いしてしまいます。スクロールができることを示す工夫が必要です。

まとめ

スクロールバーの非表示対応は、ベンダープレフィックス不要でシンプルな記述だけで実装できるようになりました。
デザインの細部にまでこだわって、スッキリとした美しいUIを目指しましょう！