CSSでスクロールバーを非表示にする方法｜主要ブラウザ対応の実装ガイド
スクロールバーとユーザー体験
ウェブサイトを閲覧するとき、私たちはある種の操作体験に慣れ親しんでいます。たとえば、サイト左上にある企業ロゴをクリックすればホームページへ戻れる――それが自然な期待でしょう。しかし、もしそう動かなかったら？ サイト上のあらゆる要素が、予想とは真逆の挙動をしたらどうでしょうか。
さらに想像してみてください。画面にはスクロールバーが存在しているのに、マウスのホイールを回してもトラックパッドをスワイプしても、何も反応しないとしたら。それは最悪のユーザー体験（UX）だと言えるでしょう。
優れたユーザー体験を左右する要素だけで1本の記事が書けるほど奥深いテーマですが、その中でも確実に重要なのが「スクロールバーが正しく機能すること」と「デザイン目的で非表示にできること」の2点です。
スクロールバーは、これから何を目にすることになるのかを予測させる重要なサインです。スクロールバーが見えていれば「下へスクロールして続きを読むのだな」と理解できます。逆にスクロールバーが見えない場合は、おおむね次の2つの理由のいずれかです。
- 表示されているものがすべてである ―― ビューポート（画面）の高さ・幅と、サイトの高さ・幅が一致している。
- スクロールを促す仕掛けが用意されている ―― アニメーションする矢印など「まだ続きがある」ことを示す演出がデザインに組み込まれており、実際にスクロールを始めるまでスクロールバーは非表示のままになっている。
開発者の立場から言えば、スクロールバーを適切に実装することはサイトのユーザー体験を高め、ひいては訪問者をサイトに留めることにつながります。
補足： 水平方向のスクロールバーは、意図的に使いたい場合に限り採用しましょう。意図せず表示されてしまうケースの多くは、コンポーネントのサイズ指定に不備があるサインです。そもそも不要な横スクロールバーを、無理やり隠すのは避けてください。
CSSでの実装方法
まず押さえておきたいのは、主要ブラウザ間で挙動が異なるという点です。Firefoxで動作する書き方はChromeやInternet Explorerでは機能せず、その逆もまた然りです。そこでCSSでは、クロスブラウザ対応のためにベンダープレフィックス（ブラウザプレフィックス）と呼ばれる仕組みを利用します。主なものを以下にまとめました。
ベンダープレフィックス早見表
| ベンダープレフィックス | 対象ブラウザ |
|---|---|
| -webkit- | Chrome、Safari、新しいバージョンのOpera、iOS版Firefoxを含むほとんどのiOSブラウザ |
| -moz- | Firefox（iOS版を除く） |
| -o- | 旧バージョンのOpera |
| -ms- | Internet Explorer および Microsoft Edge |
※ 出典：MDN Web Docs「CSS Prefixes」
では、「いつプレフィックスが必要で、いつ不要なのか」はどう判断すればよいのでしょうか。CSSの仕様は常に進化しており、新しいプロパティほど、まだ全ブラウザで互換性が確保されていない可能性が高いのです。
ありがたいことに、CSSを解析して必要なプレフィックスを自動追加してくれるツール（Autoprefixerなど）が存在します。手作業で確認したい場合は、Can I use や MDN のドキュメントを参照してブラウザ互換性をチェックしましょう。
実際にコードを書いてみよう
<!DOCTYPE html>
<html>
<head>
<title>CSS: Hide the Scrollbar</title>
<style>
* {
box-sizing: border-box;
scrollbar-width: none; /* Firefox 向けの指定 */
}
body {
max-height: 500px;
}
h1 {
text-align: center;
}
.container, .sample-text {
max-height: 500px;
height: 500px;
}
.container {
width: 450px;
border: 2px solid #666666;
background: lightgrey;
overflow: scroll;
min-height: 520px;
margin: 0 auto;
}
.inner-container {
position: absolute;
left: 10;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none; /* WebKit 系ブラウザ向けの指定 */
}
.sample-text {
width: 425px;
height: 475px;
margin: 0px 0px 10px 10px;
}
</style>
</head>
<!-- /* サンプルテキスト出典: https://doctoripsum.com */ -->
<body>
<h1>CSS Hide Scrollbar</h1>
<div class="container">
<div class="inner-container">
<div class="sample-text">
<p><!-- ここにスクロール確認用の長文テキストを配置します --></p>
</div>
</div>
</div>
</body>
</html>
このコードをChromeで実行すると、グレー背景のボックスと、その中をスクロールできるテキストが表示されます。代表的な2つの実装が含まれており、Firefox向けの記述は<style>タグ内の上部にある scrollbar-width: none;、その他の多くのブラウザ向けには ::-webkit-scrollbar を使った指定で実現しています。
ポイントはこの2つの指定
scrollbar-width: none;―― Firefox向けの指定。スクロールバーの幅をゼロにして非表示にします。.inner-container::-webkit-scrollbar { display: none; }―― Chrome・SafariなどWebKit系ブラウザ向けの指定。スクロールバーそのものを非表示にします。
実行してみると、スクロールバーは一切表示されないのに、スクロール操作そのものは問題なく機能することが分かるはずです。これはCSSでスクロールバーを隠す複数の方法のうちのひとつにすぎません。あなたならどんな実装を思いつきますか？ ぜひコードをいろいろと触って、別のアプローチを見つけることに挑戦してみてください。
-
iPhoneの「ガイド付きアクセス」とは?設定方法と使い方を徹底解説
ガイド付きアクセスとは? スマートフォンを人に渡すと、つい画面を覗き見されてしまう——こんな経験はありませんか?友達に面白い写真を見せるつもりでiPhoneを渡したのに、気づけば勝手にスクロールされ、個人的なデータまで見られていた…。こうした事態を防ぐために、Appleは「ガイド付きアクセス(Guided Access)」という機能を用意しています。 画像出典: Imore.com ガイド付きアクセスは、iPhoneやiPadでひとつの作業に集中できるよう設計されたアクセシビリティ機能です。デバイスの使用を単一のアプリに制限するだけでなく、そのアプリ内で使える機能まで細かくコントロールできま
-
RSSフィードとは?基本の仕組みとパソコンでの使い方を徹底解説
読書は、豊富な知識を得られるだけでなく、対人スキルの向上にも役立つ健康的な習慣です。インターネットの普及により、紙を節約してエコに読書を楽しめるようになりましたが、その一方で「読む価値のあるコンテンツを見つけにくい」という新たな悩みも生まれています。膨大な情報の中から良質な記事を選び出すのは、ネット読書における大きな課題の一つです。 そんな問題を解決するために開発されたのがRSSフィードです。RSSを活用すれば、読みたい・観たいコンテンツを探す手間が大幅に省けます。購読しているサイトや著者の最新情報が、RSSアグリゲーター(専用ソフト)に自動的に届くため、わざわざウェブサイトを訪問する必要があ