ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】ブラウザごとにスクロールバーを非表示にする最新の方法

【CSS】ブラウザごとにスクロールバーを非表示にする最新の方法

HTML/CSS

2021/12/23

2022/05/22

スクロールバー日表示サムネイル

「スクロールバーが邪魔して、コンテンツが見づらい」

Webサイトの使いやすさを向上するのが、スクロールバー本来の役割です。

しかしレイアウト崩れやコンテンツが見づらくなるケースもあり、非表示にしたい場合があるでしょう。

スクロールバーの非表示はブラウザ毎に異なり、3つの方法を使用する必要があります。

この記事では、スクロールバーを非表示にする方法ブラウザ別に3つ解説しています。

特にMicrosoft edgeでスクロールバーを非表示については、直近で実装方法が変更されているので注意が必要です。

この記事で身につく内容
  • スクロールバーを非表示にする方法

\ 完全無料のプログラミングスクール /

30日間で学びきれる
プログラミングスクールZeroPlus Gate

完全無料のプログラミングスクール 30日間でWebサイトが作れるようになる 50本以上の動画教材をいつでも視聴可能 毎週専属メンターとの面談で悩みを解決 現役エンジニアに質問し放題
ZeroPlus Gate紹介画像

公式サイトはこちら

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

まずはスクロールバーを非表示にする方法を紹介します。

.container {
    scrollbar-width: none; /*Firefox対応のスクロールバー非表示コード*/  
    -ms-overflow-style: none;/*Internet Explore対応のスクロールバー非表示コード*/   
}

.container::-webkit-scrollbar {  
  display: none; /*Google Chrome、Safari、Microsoft Edge対応のスクロールバー非表示コード*/
}

上記のように、ブラウザごとにスクロールバーを非表示にする方法は異なります。

 

【注意スクロールバーを非表示する際には、クロスブラウザ対応が必要

どのブラウザから閲覧してもスクロールバーを非表示にするため、3つのコードを書く必要があるのです。

このようにどのブラウザでWebサイトを表示しても同じく表示するようにコーディングすることを、クロスブラウザ対応と呼びます。

ZeroPlusgate50教材の動画

スクロールバーをブラウザ別に非表示にする方法を解説

スクロールバーを非表示にする方法について、ブラウザ別に詳しく解説していきます。

まずはoverflow: scroll;を指定したcontainerを用意します。

この場合containerからはみ出したテキストは、スクロール領域に隠れます。

<div class="container">
  <p>1:スクロールバーを非表示にするのはかんたん</p>
  <p>2:クロスブラウザ対応が必要です</p>
  <p>3:どのブラウザからみても同じく見えるか確認してください</p>
  <p>4:スクロールバーを非表示にするのはかんたん</p>
  <p>5:クロスブラウザ対応が必要です</p>
  <p>6:どのブラウザからみても同じく見えるか確認してください</p> 
</div> 
.container {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  white-space: nowrap;/*テキストの改行を防ぐコード*/ 
  overflow: scroll; /*親要素から子要素がはみ出した場合、スクロール領域にして隠す指定*/
}

全ブラウザスクロールバー表示

全てのブラウザでテキストのはみ出しがスクロール領域に隠れ、スクロールバーが表示されました。

次にスクロールバーを非表示にする方法を、ブラウザごとに解説します。

 

1.Firefoxのスクロールバーを非表示する方法

Firefoxでスクロールバーを非表示にする場合は、scrollbar-widthプロパティを使用します。

.container {
  scrollbar-width: none;
}

scrollbar-widthプロパティは見慣れないと感じるかもしれません。

Firefoxのスクロールバーの幅を調整するプロパティです。

scrollbar-widthの値をnoneに指定すると、Firefoxのスクロールバーを非表示にできます。

Firefoxのみスクロールバー非表示

 

2.Chrome・Safari・Microsoft Edgeのスクロールバーを非表示にする方法

Chrome・Safari・Microsoft Edgeは、同じ方法でスクロールバーを非表示にすることが可能です。

overflow: scroll;を指定している要素に、擬似要素::-webkit-scrollbarを記述します。

続けて擬似要素::-webkit-scrollbarに対しては、display:none;を値を指定します。

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

全ブラウザスクロールバー非表示

主要な4つのブラウザで、いずれもスクロールバーを非表示にできました。

ここで注意点が2つあります。

 

【注意】Microsoft Edgeは直近でスクロールバーの非表示方法が変更になったMicrosoft Edgeは以前-ms-overflow-style: none;というコードで、スクロールバーの非表示を指定できました。

しかし現行のMicrosoft Edgeでは、-ms-overflow-style: none;は対応していないため注意です。

 

【注意】::-webkit-scrollbar は将来的に使えなくなる可能性がある擬似要素::-webkit-scrollbarは現在のところ複数のブラウザに対応しています。

しかし擬似要素::-webkit-scrollbarを用いる方法は、MDN Web docsでは非標準とされています。

つまり将来的には使えなくなる可能性が高いということです。

以下、MDN Web docsにおける擬似要素::-webkit-scrollbarについての記述です。

非標準:この機能は非標準であり、標準の軌道に乗っていません。Webに面している実稼働サイトでは使用しないでください。すべてのユーザーに対して機能するとは限りません。また、実装間に大きな非互換性があり、動作が将来変更される可能性があります。
引用:MDN Web docs「::-webkit-スクロールバー

 

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

Internet Exploreでスクロールバーを非常時にする際には、-ms-overflow-style: none;を指定します。

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

Internet Exploreは2022年6月15日で完全に終了するブラウザです。

それまでの期間の対応が必要な場合は、-ms-overflow-style: none;を追加で記述しましょう。

ZeroPlusgate50教材の動画

まとめ

今回の記事では、CSSでスクロールバーを非表示にする方法をブラウザ別に解説しました。

スクロールバーには、ユーザビリティを向上する働きがあります。

しかしスタイル崩れやコンテンツが見にくくなるなど、問題を生む可能性があるのです。

状況に応じて、スクロールバーの非表示を検討するのがおすすめといえます。

ここでスクロールバーを非表示にする方法を、ブラウザ別に再度確認してみましょう。

ブラウザ スクロールバーを非表示にする方法
Firefox 任意の要素にscrollbar-width: none;を指定する
Chrome・Safari・Microsoft Edge 擬似要素::-webkit-scrollbardisplay: none;を指定する
Internet Explore 任意の要素に -ms-overflow-style: none;を指定する

またスクロールバーを非表示にする際の注意点は、以下の3点が存在します。

  • クロスブラウザ対応が必須となる
  • -ms-overflow-style: none;では、Microsoft Edgeのスクロールバーを非表示にできなくなった(擬似要素::-webkit-scrollbardisplay: none;を指定して非表示にする)
  • 擬似要素::-webkit-scrollbardisplay: none;を指定する方法は、使用できなくなる可能性あり

この記事で解説した内容を参考に、スクロールバーの非表示にチャレンジしてみましょう。

\ 完全無料のプログラミンスクール /

30日間で学びきれる
プログラミングスクールZeroPlus Gate

完全無料のプログラミングスクール 30日間でWebサイトが作れるようになる 50本以上の動画教材をいつでも視聴可能 毎週専属メンターとの面談で悩みを解決 現役エンジニアに質問し放題
ZeroPlus Gate紹介画像

公式サイトはこちら

\ 学んだことをSNSでシェアしよう /

この記事を書いた人

ZeroPlusMedia変種部

ZeroPlusMedia編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlusMediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateバナー

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから