CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでスクロールバーを非表示にする方法|UXを損なわない実装テクニックを徹底解説

スクロールバーは、ウィンドウの表示領域よりも大きなコンテンツを閲覧できるようにする、ブラウザの重要な構成要素です。Webデザインでは「見た目をすっきりさせたい」「レイアウトを崩したくない」といった理由から、スクロールバーを非表示にしたい場面が少なくありません。本記事では、CSSのoverflowプロパティを使ってスクロールバーを非表示にする複数のアプローチを、実際のコード例とともにわかりやすく解説します。

基本構文

selector {
  overflow-x: value;
  overflow-y: value;
}

/* ショートハンドでの指定 */
selector {
  overflow: value;
}

overflowプロパティに指定できる主な値

値説明
visibleコンテンツは切り取られず、要素の外側にはみ出して表示される
hiddenコンテンツが切り取られ、スクロールバーも表示されない
scrollコンテンツは切り取られるが、スクロールバーは常に表示される
autoコンテンツがあふれた場合にのみスクロールバーが表示される

方法1:縦方向のスクロールバーを非表示にする

横方向のスクロールは有効にしたまま、縦方向のスクロールバーだけを隠したい場合は、overflow-y: hiddenとoverflow-x: scrollを組み合わせて指定します。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    height: 150px;
    width: 300px;
    overflow-y: hidden; /* 縦スクロールバーを非表示 */
    overflow-x: scroll; /* 横スクロールバーを常に表示 */
    border: 2px solid #333;
    padding: 10px;
  }
  .content {
    white-space: nowrap;
    width: 500px;
    background-color: #f0f8ff;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="content">
      コンテナの幅を超えて伸びる非常に長いテキスト行です。全体を読むには横スクロールが必要になります。
    </div>
    <p>通常なら縦スクロールが発生する追加コンテンツです。</p>
    <p>しかし、縦のスクロールバーは表示されません。</p>
  </div>
</body>
</html>

表示結果: 枠線付きコンテナの下部に横スクロールバーだけが表示され、縦のスクロールバーは現れません。はみ出したコンテンツは左右にスクロールして確認できます。

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

逆に、縦方向のスクロールは有効にしたまま横方向のスクロールバーを隠したい場合は、overflow-x: hiddenとoverflow-y: scrollを指定します。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    height: 150px;
    width: 300px;
    overflow-x: hidden; /* 横スクロールバーを非表示 */
    overflow-y: scroll; /* 縦スクロールバーを常に表示 */
    border: 2px solid #333;
    padding: 10px;
  }
  .content {
    background-color: #fff3cd;
    line-height: 1.5;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="content">
      <p>これは1つ目の段落です。通常のテキストが含まれています。</p>
      <p>これは2つ目の段落です。さらに多くの内容が含まれています。</p>
      <p>これは3つ目の段落です。テキストをさらに追加しています。</p>
      <p>これは4つ目の段落です。あふれ(オーバーフロー)を発生させるためのものです。</p>
      <p>これは5つ目の段落です。縦スクロール用のコンテンツです。</p>
    </div>
  </div>
</body>
</html>

表示結果: コンテナの右側に縦スクロールバーだけが表示され、横スクロールバーは現れません。コンテンツは上下にスクロールして閲覧できます。

方法3:両方のスクロールバーを非表示にする

横・縦両方のスクロールバーを完全に非表示にしたい場合は、overflow-xとoverflow-yの両方にhiddenを指定します(ショートハンドのoverflow: hiddenでも同様の効果が得られます)。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    height: 150px;
    width: 300px;
    overflow: hidden; /* 両方向のスクロールバーを非表示 */
    border: 2px solid #333;
    padding: 10px;
  }
  .content {
    background-color: #d1ecf1;
    width: 500px;
    line-height: 1.5;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="content">
      <p>このコンテンツは、コンテナの境界を縦にも横にもはみ出しています。</p>
      <p>しかしスクロールバーは表示されないため、はみ出した部分は単純に切り取られます。</p>
      <p>ユーザーはスクロールして隠れたコンテンツを見ることができません。</p>
    </div>
  </div>
</body>
</html>

表示結果: スクロールバーは一切表示されず、コンテナからはみ出した部分は切り取られて見えなくなります。ユーザーはスクロールして隠れたコンテンツを確認できません。

応用:スクロール機能を残したままスクロールバーだけを隠す

overflow: hiddenはスクロール操作そのものを無効化してしまう点に注意が必要です。「スクロールはできる状態を維持しつつ、スクロールバーの見た目だけを消したい」場合は、以下のプロパティを組み合わせるのが一般的です。

.container {
  /* Firefox */
  scrollbar-width: none;

  /* Internet Explorer・従来版Edge */
  -ms-overflow-style: none;
}

/* Chrome・Safari・EdgeなどWebKit/Blink系ブラウザ */
.container::-webkit-scrollbar {
  display: none;
}

この方法であれば、マウスホイールやタッチ操作によるスクロールはそのまま機能し、スクロールバーのUIだけを非表示にできます。主要ブラウザで広くサポートされているため、モダンなWebサイトではこちらの手法が推奨されます。

まとめ

CSSのoverflow系プロパティを使えば、スクロールバーの表示・非表示を柔軟にコントロールできます。overflow: hiddenで完全に非表示にするか、overflow-xとoverflow-yで縦横を個別に制御するか、あるいはscrollbar-widthや::-webkit-scrollbarで「スクロール可能なままバーだけを隠す」か、目的に応じて最適な手法を選びましょう。ただし、スクロールバーを隠すとユーザーが「スクロールできること」に気づきにくくなるため、視覚的なヒントを添えるなど、ユーザー体験への配慮も忘れないようにしましょう。

CSSでスクロールバーを非表示にする方法|UXを損なわない実装テクニックを徹底解説

  1. CSSとJavaScriptでスクロール時にヘッダーを縮小させる方法

    CSSとJavaScriptを組み合わせることで、ページのスクロール量に応じてヘッダーのサイズを動的に変更できます。この手法は、ナビゲーションバーを画面上部に固定しながら、スクロール中はコンテンツの表示領域をできるだけ広く確保したい場合に非常に効果的です。ここでは、window.onscrollイベントとCSSのtransitionプロパティを活用し、スクロールするとヘッダーがスムーズに縮小される実装例を紹介します。実装例<!DOCTYPE html> <html> <head> <meta name="viewport" cont

  2. CSSのclearプロパティでfloat（回り込み）を解除する方法

    CSSのclearプロパティを使用すると、フロート（float）された要素のどちら側の回り込みを解除するかを指定できます。floatによるレイアウト崩れを防ぎ、後続のコンテンツを正しく配置したい場合に非常に便利なプロパティです。clearプロパティに指定できる主な値は以下のとおりです。left：左側に配置されたフロート要素の回り込みを解除しますright：右側に配置されたフロート要素の回り込みを解除しますboth：左右どちらのフロート要素の回り込みも解除しますnone：回り込みを解除しません（初期値）例1：clear: left を使ったサンプルそれでは、CSSのclearプロパティの具体的な