CSSでスクロールバーをデザインする方法|見た目を整える基本から非表示まで解説

CSS

Webページを作っていて、「スクロールバーの色を変えたい」「もう少し細くしたい」「そもそも見せたくない」と思ったことはありませんか？

美しいデザインのWebサイトを作っても、ブラウザデフォルトの武骨なスクロールバーがあると、一気に野暮ったい印象になってしまうことがあります。特に、ダークテーマのサイトや、ミニマルなデザインのサイトでは、スクロールバーが浮いて見えることも。

でも安心してください。実は、CSSを使ってスクロールバーの見た目を自由にカスタマイズしたり、完全に非表示にしたりすることができます。Apple、Google、Dribbbleなど、多くの有名サイトでもスクロールバーをカスタマイズして、統一感のあるデザインを実現しています。

この記事では、CSSでスクロールバーをカスタマイズする方法、スクロールバーを非表示にするテクニック、注意しておきたいブラウザ対応について、コピペで使えるコード例と共に詳しく解説します。

スポンサーリンク

スクロールバーの基本構造を理解しよう

スクロールバーの構成要素

スクロールバーをカスタマイズする前に、その構造を理解しておきましょう：

┌─────────────────────┐
│    ↑ ボタン         │ ← ::-webkit-scrollbar-button
├─────────────────────┤
│                     │
│      トラック        │ ← ::-webkit-scrollbar-track
│                     │
│  ┌───────────────┐   │
│  │               │   │
│  │    つまみ      │   │ ← ::-webkit-scrollbar-thumb
│  │               │   │
│  └───────────────┘   │
│                     │
├─────────────────────┤
│    ↓ ボタン         │ ← ::-webkit-scrollbar-button
└─────────────────────┘

各部分の役割

  • scrollbar: スクロールバー全体
  • scrollbar-track: スクロールバーの背景部分（レール）
  • scrollbar-thumb: ドラッグできる部分（つまみ）
  • scrollbar-button: 上下のスクロールボタン（通常は非表示）
  • scrollbar-corner: 縦横スクロールバーが交わる角

ブラウザによる対応の違い

スクロールバーのカスタマイズは、ブラウザによって使用できるプロパティが異なります：

ブラウザ対応方法カスタマイズ度
Chrome, Safari, Edge::-webkit-scrollbar高い（詳細制御可能）
Firefoxscrollbar-color, scrollbar-width中程度（基本的な調整）
IE11-ms-overflow-style低い（非表示のみ）

この違いを理解して、複数の方法を組み合わせることが重要です。

Webkit系ブラウザでのスクロールバーデザイン

基本的なカスタマイズ

まずは、Chrome、Safari、Edgeで使える::-webkit-scrollbarを使った基本的なカスタマイズから始めましょう：

/* スクロールバー全体の設定 */
::-webkit-scrollbar {
  width: 12px;  /* 縦スクロールバーの幅 */
  height: 12px; /* 横スクロールバーの高さ */
}

/* スクロールバーのつまみ部分 */
::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 6px;
}

/* スクロールバーのトラック（背景）部分 */
::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 6px;
}

/* つまみにマウスを乗せたときの色 */
::-webkit-scrollbar-thumb:hover {
  background: #2980b9;
}

より高度なデザイン例

モダンなフラットデザイン

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

ダークテーマ向けデザイン

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #333, #555);
  border-radius: 5px;
  border: 1px solid #444;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #444, #666);
}

カラフルなグラデーションデザイン

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 7px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  border-radius: 7px;
  border: 2px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #ff5252, #26d0ce, #2196f3);
  transform: scale(1.05);
}

特定の要素だけカスタマイズ

サイト全体ではなく、特定の要素のスクロールバーだけをカスタマイズしたい場合：

/* 特定のクラスの要素のみ */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #e74c3c;
  border-radius: 3px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #ecf0f1;
  border-radius: 3px;
}

HTML例

<div class="custom-scroll" style="height: 300px; overflow-y: auto;">
  <p>ここに長いコンテンツが入ります...</p>
  <!-- 長いコンテンツ -->
</div>

Firefox対応のスクロールバーカスタマイズ

scrollbar-colorプロパティ

Firefoxでは、scrollbar-colorプロパティを使ってスクロールバーの色を設定できます：

html {
  /* scrollbar-color: つまみの色 トラックの色; */
  scrollbar-color: #3498db #f0f0f0;
}

/* 特定の要素のみ */
.firefox-scroll {
  scrollbar-color: #e74c3c transparent;
}

scrollbar-widthプロパティ

スクロールバーの太さを調整できます：

html {
  scrollbar-width: thin; /* auto | thin | none */
}

/* 値の説明 */
.auto-width { scrollbar-width: auto; }   /* デフォルト */
.thin-width { scrollbar-width: thin; }   /* 細い */
.none-width { scrollbar-width: none; }   /* 非表示 */

Firefox用の完全なカスタマイズ例

/* Firefoxでのスクロールバーカスタマイズ */
.firefox-custom {
  scrollbar-color: #667eea #f7fafc;
  scrollbar-width: thin;
}

/* ダークテーマ */
.firefox-dark {
  scrollbar-color: #4a5568 #1a202c;
  scrollbar-width: auto;
}

クロスブラウザ対応の統合設定

基本的な統合パターン

すべてのブラウザで一貫したスクロールバーデザインを提供するため、複数のプロパティを組み合わせます：

/* 全ブラウザ対応のスクロールバーカスタマイズ */
html {
  /* Firefox */
  scrollbar-color: #3498db #f0f0f0;
  scrollbar-width: thin;
}

/* Webkit系ブラウザ（Chrome, Safari, Edge） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #2980b9;
}

/* IE/Edge（古いバージョン） */
body {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

レスポンシブ対応

デバイスサイズに応じてスクロールバーのサイズを調整：

/* デスクトップ */
@media (min-width: 1024px) {
  ::-webkit-scrollbar {
    width: 12px;
  }
  
  html {
    scrollbar-width: auto;
  }
}

/* タブレット */
@media (max-width: 1023px) and (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  html {
    scrollbar-width: thin;
  }
}

/* モバイル */
@media (max-width: 767px) {
  ::-webkit-scrollbar {
    width: 4px;
  }
  
  html {
    scrollbar-width: thin;
  }
}

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

完全に非表示にする

コンテンツをスクロール可能にしながら、スクロールバーだけを非表示にする方法：

/* 全ブラウザ対応のスクロールバー非表示 */
.hide-scrollbar {
  /* Firefox */
  scrollbar-width: none;
  
  /* IE and Edge */
  -ms-overflow-style: none;
  
  /* Safari and Chrome */
  overflow: auto;
}

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

HTML例

<div class="hide-scrollbar" style="height: 300px; overflow-y: auto;">
  <div style="height: 1000px;">
    長いコンテンツがここに入ります...
  </div>
</div>

一定時間後に自動で非表示

スクロール時のみスクロールバーを表示し、一定時間後に自動で非表示にする：

.auto-hide-scrollbar {
  overflow: auto;
  transition: all 0.3s ease;
}

/* 通常時は非表示 */
.auto-hide-scrollbar::-webkit-scrollbar {
  width: 0px;
  transition: width 0.3s ease;
}

/* ホバー時に表示 */
.auto-hide-scrollbar:hover::-webkit-scrollbar {
  width: 8px;
}

.auto-hide-scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

JavaScript連動の高度な制御

スクロール開始時に表示、停止後に非表示にする：

.js-scrollbar {
  overflow: auto;
}

.js-scrollbar::-webkit-scrollbar {
  width: 0px;
  transition: width 0.3s ease;
}

.js-scrollbar.scrolling::-webkit-scrollbar {
  width: 8px;
}

.js-scrollbar.scrolling::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

JavaScript例

let scrollTimer = null;

document.querySelectorAll('.js-scrollbar').forEach(element => {
  element.addEventListener('scroll', () => {
    element.classList.add('scrolling');
    
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(() => {
      element.classList.remove('scrolling');
    }, 1000);
  });
});

実用的なスクロールバーデザインパターン

パターン1: ミニマルデザイン

/* シンプルで控えめなスクロールバー */
.minimal-scrollbar {
  scrollbar-color: rgba(0,0,0,0.2) transparent;
  scrollbar-width: thin;
}

.minimal-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.minimal-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.minimal-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

.minimal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}

パターン2: カラフルなアクセント

/* ブランドカラーを活かしたスクロールバー */
.brand-scrollbar {
  scrollbar-color: #ff6b6b #f8f9fa;
  scrollbar-width: auto;
}

.brand-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.brand-scrollbar::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 5px;
}

.brand-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff6b6b 0%, #ee5a52 100%);
  border-radius: 5px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.brand-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff5252 0%, #e53e3e 100%);
}

パターン3: ダークモード対応

/* ライト/ダークモード自動切替 */
@media (prefers-color-scheme: light) {
  .adaptive-scrollbar {
    scrollbar-color: #cbd5e0 #f7fafc;
  }
  
  .adaptive-scrollbar::-webkit-scrollbar-track {
    background: #f7fafc;
  }
  
  .adaptive-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e0;
  }
}

@media (prefers-color-scheme: dark) {
  .adaptive-scrollbar {
    scrollbar-color: #4a5568 #1a202c;
  }
  
  .adaptive-scrollbar::-webkit-scrollbar-track {
    background: #1a202c;
  }
  
  .adaptive-scrollbar::-webkit-scrollbar-thumb {
    background: #4a5568;
  }
}

パターン4: アニメーション付き

/* アニメーション効果のあるスクロールバー */
.animated-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.animated-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

.animated-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 6px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.animated-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #5a67d8, #6b46c1);
  transform: scale(1.1);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}

.animated-scrollbar::-webkit-scrollbar-thumb:active {
  transform: scale(0.95);
}

トラブルシューティングとベストプラクティス

よくある問題と解決方法

問題1: スクロールバーが表示されない

/* 問題: overflowが設定されていない */
.container {
  height: 300px;
  /* overflow の設定が必要 */
}

/* 解決 */
.container {
  height: 300px;
  overflow-y: auto; /* または scroll */
}

問題2: カスタマイズが効かない

/* 問題: 詳細度が不足 */
::-webkit-scrollbar-thumb {
  background: red; /* 効かない場合がある */
}

/* 解決: より具体的なセレクタを使用 */
.container::-webkit-scrollbar-thumb {
  background: red !important;
}

問題3: モバイルで動作しない

/* 注意: モバイルブラウザでは効果が限定的 */
/* 代替案: カスタムスクロール実装を検討 */
@media (max-width: 768px) {
  .mobile-scroll {
    -webkit-overflow-scrolling: touch; /* iOS向け */
    overflow: auto;
  }
}

パフォーマンスの考慮事項

効率的なスクロールバーカスタマイズ

/* 良い例: 必要最小限のスタイル */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* 避ける例: 複雑すぎるアニメーション */
::-webkit-scrollbar-thumb {
  /* 重いアニメーションは避ける */
  animation: rainbow 2s infinite;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  transform: rotate(45deg);
}

アクセシビリティの配慮

アクセシブルなスクロールバーデザイン

/* 十分なコントラストを確保 */
::-webkit-scrollbar-thumb {
  background: #666; /* 背景とのコントラスト比 4.5:1 以上 */
}

/* キーボード操作時の表示 */
.container:focus-within::-webkit-scrollbar-thumb {
  background: #333;
  outline: 2px solid #007acc;
}

/* 動きを減らしたいユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb {
    transition: none;
  }
}

高度なテクニックと応用例

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

/* プログレスバー風スクロールインジケーター */
.progress-scroll {
  position: relative;
}

.progress-scroll::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  z-index: 1000;
  transition: width 0.1s ease;
}

/* JavaScript でwidth を更新 */

JavaScript実装例

window.addEventListener('scroll', () => {
  const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrolled = (winScroll / height) * 100;
  document.querySelector('.progress-scroll::before').style.width = scrolled + '%';
});

横スクロール専用のカスタマイズ

/* 横スクロール要素のカスタマイズ */
.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px; /* スクロールバー用の余白 */
}

.horizontal-scroll::-webkit-scrollbar {
  height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

複数のスクロール領域

/* 異なるスクロール領域に異なるスタイル */
.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: #e74c3c;
}

.content-scroll::-webkit-scrollbar {
  width: 10px;
}

.content-scroll::-webkit-scrollbar-thumb {
  background: #3498db;
}

.chat-scroll::-webkit-scrollbar {
  width: 4px;
}

.chat-scroll::-webkit-scrollbar-thumb {
  background: #2ecc71;
}

まとめ

CSSを使ったスクロールバーのカスタマイズは、Webサイトの完成度を大きく向上させる重要なテクニックです。

重要なポイント

  • Webkit系ブラウザ: ::-webkit-scrollbarで詳細制御
  • Firefox: scrollbar-colorとscrollbar-widthで基本調整
  • クロスブラウザ対応: 複数の手法を組み合わせる
  • 非表示化: scrollbar-width: noneと::-webkit-scrollbar { display: none }

実装時の注意点

  • アクセシビリティを損なわないよう配慮
  • パフォーマンスを重視した軽量な実装
  • モバイルデバイスでの制限を理解
  • 十分なコントラストと視認性の確保

デザインのコツ

  • サイト全体のデザインとの統一感
  • 控えめで邪魔にならないデザイン
  • ユーザビリティを最優先
  • レスポンシブ対応の考慮

Youtube

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

スポンサーリンク

コメント

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