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

CSSでスクロールバーを非表示にする方法をわかりやすく解説

CSSでスクロールバーを非表示にする基本の方法

Webページや特定の要素からスクロールバーを非表示にしたい場合、CSSのoverflowプロパティを使うのが最もシンプルな方法です。overflow: hidden;を指定すると、コンテンツが領域からあふれてもスクロールバーが表示されなくなります。

実装例

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        height: 150vh;
        width: 200vw;
        overflow: hidden;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    p {
        font-size: 40px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>スクロールバー非表示のサンプル</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia expedita magnam enim culpa eum veniam obcaecati odit aperiam dolorem, libero nisi magni similique eveniet sequi? Laudantium ipsam dolorum recusandae ab molestiae animi saepe cumque delectus libero quaerat? Assumenda asperiores ea incidunt totam ipsa aperiam! Ex quo cupiditate incidunt vel accusamus!
</p>
</body>
</html>

コードのポイント

  • height: 150vh / width: 200vw … ビューポートより大きなサイズをbodyに設定し、意図的にコンテンツをあふれさせています。
  • overflow: hidden … あふれた部分をクリップし、縦横どちらのスクロールバーも非表示にします。

出力結果

上記のコードを実行すると、次のようにスクロールバーが表示されないページが出力されます。

CSSでスクロールバーを非表示にする方法をわかりやすく解説

補足：スクロール操作を維持したままバーだけ隠す方法

overflow: hiddenはスクロール自体も無効化してしまう点に注意が必要です。「スクロールはできる状態を保ちながら、スクロールバーだけを見えなくしたい」場合は、ブラウザごとに以下の指定が有効です。

Chrome・SafariなどWebKit系ブラウザの場合

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

Firefoxの場合

* {
    scrollbar-width: none;
}

この2つを組み合わせれば、主要ブラウザのほぼすべてでスクロールバーを非表示にしつつ、スクロール操作そのものは維持できます。デザイン性を重視したサイトや、独自のスクロールUIを実装したい場合にぜひ活用してください。

  1. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>