CSSでスクロールバーを非表示にする方法｜横・縦どちらも消せる簡単テクニック

CSS

Webページを作っていると、

「デザイン上スクロールはさせたいけど、スクロールバーだけは見せたくない」

そんなケースがあります。

モバイルっぽいすっきりしたデザインにしたい時や、カスタムスクロールバーを作りたい時など、標準のスクロールバーが邪魔になることは珍しくありません。

CSSを使えば、スクロールの動きはそのままに、スクロールバーだけを非表示にすることができます。

この記事では、縦・横スクロールバーの消し方から、ブラウザごとの対応方法、そしてよくある落とし穴まで、実例とともにわかりやすく解説します。

スポンサーリンク

まず理解しよう：スクロールとスクロールバーは別物

スクロールバー非表示の基本概念

重要なポイント：

  • スクロール機能：マウスホイールやタッチで内容をスクロールできる機能
  • スクロールバー：画面右側や下側に表示される棒状のUI

この2つは別々に制御できます。つまり、スクロール機能は残しつつ、スクロールバーだけを非表示にできるということです。

よくある間違い

/* ❌ 間違い：スクロール自体ができなくなる */
.box {
  overflow: hidden;
}

/* ✅ 正解：スクロールはできるがバーが見えない */
.box {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

1. CSSでスクロールバーを非表示にする基本

overflowの基本理解

まず、スクロールがどのように制御されるかを確認しましょう。

HTML：

<div class="scroll-box basic-scroll">
  <p>これは長いテキストです。これは長いテキストです。これは長いテキストです。</p>
  <p>スクロールバーが表示されます。</p>
  <p>さらに長いテキストを追加して、確実にスクロールが必要になるようにします。</p>
  <p>もう少し追加します。</p>
  <p>最後の行です。</p>
</div>

CSS（通常のスクロール）：

.scroll-box {
  width: 300px;
  height: 150px;
  border: 2px solid #ddd;
  padding: 10px;
  margin: 20px 0;
}

.basic-scroll {
  overflow: auto; /* 内容が多い時だけスクロールバーを表示 */
}

これだと、内容が多い時にスクロールバーが表示されます。

スクロールバーを非表示にする完全版

CSS（スクロールバー非表示）：

.hidden-scrollbar {
  overflow: auto;
  
  /* Firefox対応 */
  scrollbar-width: none;
  
  /* IE対応（必要に応じて） */
  -ms-overflow-style: none;
}

/* Chrome, Safari, Edge対応 */
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

HTML：

<div class="scroll-box hidden-scrollbar">
  <p>これは長いテキストです。スクロールバーは見えませんが、マウスホイールやタッチでスクロールできます。</p>
  <p>デザインがすっきりしますね。</p>
  <p>さらに長いテキストを追加して、確実にスクロールが必要になるようにします。</p>
  <p>モバイルっぽい見た目になります。</p>
  <p>最後の行です。</p>
</div>

ブラウザ別の対応方法詳細

Firefox対応

.element {
  scrollbar-width: none;
}

Chrome・Safari・Edge対応

.element::-webkit-scrollbar {
  display: none;
}

Internet Explorer対応（レガシー）

.element {
  -ms-overflow-style: none;
}

全ブラウザ対応の完全版

.no-scrollbar {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.no-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

2. 横スクロールバーを非表示にする方法

横スクロールが必要な場面

  • 画像ギャラリーのスライダー
  • タブメニューが多い時の横スクロール
  • テーブルの横スクロール
  • カードレイアウトの横並び

横スクロールバーを消すCSS

HTML：

<div class="horizontal-scroll-container">
  <div class="horizontal-content">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
    <div class="card">カード3</div>
    <div class="card">カード4</div>
    <div class="card">カード5</div>
    <div class="card">カード6</div>
  </div>
</div>

CSS：

.horizontal-scroll-container {
  width: 100%;
  max-width: 400px;
  border: 2px solid #ddd;
  margin: 20px 0;
}

.horizontal-content {
  display: flex;
  overflow-x: auto; /* 横スクロールを有効 */
  overflow-y: hidden; /* 縦スクロールを無効 */
  
  /* 横スクロールバーを非表示 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}

.horizontal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.card {
  min-width: 150px;
  height: 100px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

実用例：画像ギャラリー

HTML：

<div class="image-gallery">
  <img src="image1.jpg" alt="画像1" class="gallery-image">
  <img src="image2.jpg" alt="画像2" class="gallery-image">
  <img src="image3.jpg" alt="画像3" class="gallery-image">
  <img src="image4.jpg" alt="画像4" class="gallery-image">
</div>

CSS：

.image-gallery {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f5f5f5;
  
  /* 横スクロールバーを非表示 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.image-gallery::-webkit-scrollbar {
  display: none;
}

.gallery-image {
  min-width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

3. 縦スクロールバーを非表示にする方法

縦スクロールが必要な場面

  • チャットボックスの会話履歴
  • サイドバーのメニュー
  • コメント欄の表示
  • 長い記事のプレビュー

縦スクロールバーを消すCSS

HTML：

<div class="chat-container">
  <div class="message">ユーザー1: こんにちは！</div>
  <div class="message">ユーザー2: お疲れ様です</div>
  <div class="message">ユーザー1: 今日はいい天気ですね</div>
  <div class="message">ユーザー2: そうですね！</div>
  <div class="message">ユーザー1: また明日</div>
  <div class="message">ユーザー2: お疲れ様でした</div>
  <div class="message">ユーザー1: ありがとうございました</div>
</div>

CSS：

.chat-container {
  width: 300px;
  height: 200px;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background: #f9f9f9;
  
  overflow-y: auto; /* 縦スクロールを有効 */
  overflow-x: hidden; /* 横スクロールを無効 */
  
  /* 縦スクロールバーを非表示 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}

.chat-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.message {
  padding: 8px 12px;
  margin-bottom: 5px;
  background: white;
  border-radius: 4px;
  border-left: 3px solid #007bff;
}

実用例：記事プレビュー

HTML：

<div class="article-preview">
  <h3>記事タイトル</h3>
  <p>これは記事のプレビューです。長い文章が続きます...</p>
  <p>さらに続く文章です。スクロールして全体を確認できます。</p>
  <p>もう少し長い文章を追加します。</p>
  <p>最後の段落です。</p>
</div>

CSS：

.article-preview {
  width: 300px;
  height: 150px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  overflow-y: auto;
  overflow-x: hidden;
  
  /* 縦スクロールバーを非表示 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.article-preview::-webkit-scrollbar {
  display: none;
}

.article-preview h3 {
  margin-top: 0;
  color: #333;
}

.article-preview p {
  line-height: 1.6;
  color: #666;
}

4. よくある注意点とトラブル解決

注意点1：スクロール自体ができなくなってしまう

問題： overflow: hidden を使うとスクロールそのものが無効になります。

/* ❌ 間違い：スクロールが完全に無効 */
.box {
  overflow: hidden;
}

解決策： スクロールを維持したままバーだけを消すには、必ず overflow: auto や scroll と組み合わせます。

/* ✅ 正解：スクロールは動くがバーは見えない */
.box {
  overflow: auto; /* または scroll */
  scrollbar-width: none;
}
.box::-webkit-scrollbar {
  display: none;
}

注意点2：Windowsでのレイアウトずれ

問題： Windowsではスクロールバーが領域を占有するため、非表示にするとレイアウトがずれることがあります。

対策：

.container {
  /* パディングで調整 */
  padding-right: 15px; /* スクロールバー分の余白 */
  margin-right: -15px; /* 余白をキャンセル */
  
  overflow-y: auto;
  scrollbar-width: none;
}

.container::-webkit-scrollbar {
  display: none;
}

注意点3：アクセシビリティの考慮

問題： スクロールバーが見えないと、スクロール可能であることがわからない場合があります。

対策：

/* ホバー時にスクロールバーを表示 */
.box {
  overflow: auto;
  scrollbar-width: none;
}

.box::-webkit-scrollbar {
  display: none;
}

/* フォーカス時やホバー時にバーを表示 */
.box:hover,
.box:focus {
  scrollbar-width: thin;
}

.box:hover::-webkit-scrollbar,
.box:focus::-webkit-scrollbar {
  display: block;
  width: 8px;
}

.box:hover::-webkit-scrollbar-thumb,
.box:focus::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

注意点4：モバイルデバイスでの動作

モバイルでの確認ポイント：

  • iOS Safari：スクロールバーは通常表示されない
  • Android Chrome：設定によってはスクロールバーが表示される
  • タッチスクロールが正常に動作するか確認
/* モバイル対応の改善 */
.mobile-scroll {
  overflow: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch; /* iOS でのスムーズスクロール */
}

.mobile-scroll::-webkit-scrollbar {
  display: none;
}

5. 実用的なスクロールバー非表示パターン

パターン1：カスタムスクロールインジケーター

HTML：

<div class="custom-scroll-container">
  <div class="scroll-content" id="scrollContent">
    <p>長いコンテンツ...</p>
    <!-- 複数の段落 -->
  </div>
  <div class="scroll-indicator">
    <div class="scroll-bar" id="scrollBar"></div>
  </div>
</div>

CSS：

.custom-scroll-container {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #ddd;
}

.scroll-content {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding-right: 20px;
}

.scroll-content::-webkit-scrollbar {
  display: none;
}

.scroll-indicator {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 4px;
  height: calc(100% - 10px);
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
}

.scroll-bar {
  width: 100%;
  background: #007bff;
  border-radius: 2px;
  transition: all 0.2s ease;
}

パターン2：モーダル内のスクロール

HTML：

<div class="modal-overlay">
  <div class="modal">
    <div class="modal-header">
      <h2>利用規約</h2>
    </div>
    <div class="modal-content">
      <p>第1条 基本事項...</p>
      <!-- 長い利用規約テキスト -->
    </div>
    <div class="modal-footer">
      <button>同意する</button>
    </div>
  </div>
</div>

CSS：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.modal-header,
.modal-footer {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 20px;
}

.modal-content::-webkit-scrollbar {
  display: none;
}

パターン3：サイドバーナビゲーション

HTML：

<div class="sidebar">
  <div class="sidebar-header">
    <h3>メニュー</h3>
  </div>
  <nav class="sidebar-nav">
    <a href="#" class="nav-item">ホーム</a>
    <a href="#" class="nav-item">プロフィール</a>
    <a href="#" class="nav-item">設定</a>
    <!-- 多数のメニュー項目 -->
  </nav>
</div>

CSS：

.sidebar {
  width: 250px;
  height: 100vh;
  background: #2c3e50;
  color: white;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #34495e;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 10px 0;
}

.sidebar-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  display: block;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  transition: background-color 0.2s;
}

.nav-item:hover {
  background-color: #34495e;
}

6. ブラウザ対応状況と注意点

対応状況一覧

ブラウザ対応プロパティ対応状況
Chrome::-webkit-scrollbar✅ 完全対応
Safari::-webkit-scrollbar✅ 完全対応
Firefoxscrollbar-width: none✅ 完全対応
Edge::-webkit-scrollbar✅ 完全対応
IE11-ms-overflow-style: none⚠️ 限定的

ベストプラクティス

/* 全ブラウザ対応の推奨設定 */
.no-scrollbar {
  overflow: auto;
  
  /* Firefox */
  scrollbar-width: none;
  
  /* IE (必要に応じて) */
  -ms-overflow-style: none;
}

/* Webkit系ブラウザ (Chrome, Safari, Edge) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

まとめ：スクロールバー非表示で美しいUIを作ろう

CSSでスクロールバーを非表示にする方法をマスターすれば、モダンで美しいWebサイトが作れます。

基本の覚え方

全ブラウザ対応の基本形：

.element {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}

.element::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

用途別のポイント

横スクロール非表示：

.horizontal {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.horizontal::-webkit-scrollbar {
  display: none;
}

縦スクロール非表示：

.vertical {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.vertical::-webkit-scrollbar {
  display: none;
}

重要な注意点

  • overflow: hidden は使わない（スクロール自体ができなくなる）
  • アクセシビリティを考慮する（ホバー時の表示など）
  • Windowsでのレイアウトずれに注意
  • モバイルでの動作確認を忘れずに

こんな場面で活用しよう

  • 画像ギャラリーのスライダー
  • チャットボックスの会話表示
  • モーダルウィンドウの内容スクロール
  • サイドバーのナビゲーション
  • カード型レイアウトの横スクロール

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました