今回はHMTLとCSSでoverflow: scrollのスクロールバーをカスタマイズする方法について解説します。
この方法を知ることで、基本のデザインから見た目を変更することができ、サイトの雰囲気に合わせたスクロールバーを作成することができます。
一緒に理解を深めていきましょう。
目次
最終的なコードと実装
最初に今回作成したスクロールバーに関するコードを全て載せます。
HTML
<div class="container">
<article>
<h2 class="title">タイトル</h2>
<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
<article>
<h2 class="title">タイトル</h2>
<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
<article>
<h2 class="title">タイトル</h2>
<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
<article>
<h2 class="title">タイトル</h2>
<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
<article>
<h2 class="title">タイトル</h2>
<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
<article>
<h2 class="title">タイトル</h2>
<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
</div>
CSS
.container {
width: 300px;
height: 400px;
overflow-y: scroll;
border: 1px solid#333;
}
article {
padding: 8px 40px;
background-color: #eee;
}
article+article {
border-top: 2px dashed #fff;
}
.container::-webkit-scrollbar {
width: 16px;
}
.container::-webkit-scrollbar-track {
background-color: #fff;
}
.container::-webkit-scrollbar-thumb {
background-color: #3760d0;
border-radius: 8px;
}以上のコードを記述した実際に動くデモを用意しました。
下のボタンから見てみてください。
それでは、スクロールバーのカスタマイズ方法を一つずつ見ていきましょう。
スクロールバーを表示する
まず、スクロールバーを表示するために枠となる要素の縦と横のサイズをCSSで指定します。
.container {
width: 300px;
height: 400px;
}今回はスクロールバーを表示したいので、指定したサイズから縦にはみ出るようにコンテンツの量を調節します。
その後、枠となる要素にスクロールバーを表示するためのプロパティを記述します。
.container {
overflow-y: scroll;
}overflow-yは縦方向にはみ出た場合の処理を指定できます。
今回はスクロールバーを表示したいのでoverflow-y: scrollを指定します。
わかりやすいように枠をつけ、セクションごとに背景色と点線をつけてブラウザで確認するとこのように表示されました。
スクロールバーを表示することができました。
スクロールするとバーが上下に動き、内容が見えるようになっています。
スクロールバーの装飾
スクロールバーを表示することができたので、次は装飾をしてみましょう。
基本のスクロールバーでも十分に機能を果たしますが、サイトの雰囲気を統一させたい場合は見た目を変更できるとより良いです。
その時、3つのプロパティを使用します。
- ::-webkit-scrollbar
- ::-webkit-scrollbar-thumb
- ::-webkit-scrollbar-track
上記3つの疑似要素はFirefoxに対応していません。
“::-webkit-scrollbar” | Can I use… Support tables for HTML5, CSS3, etc
Firefoxに対応させるためには下の2つのプロパティを使用します。
- scrollbar-width
- scrollbar-color
これらの疑似要素・プロパティについて一つずつ見ていきましょう。
::-webkit-scrollbar
::-webkit-scrollbarは、スクロールバー全体を変更する場合に使用します。
主にスクロールバー全体の大きさをwidthやheightを使用して指定します。
/* CSS */
.container::-webkit-scrollbar {
width: 16px;
}
試しにwidth:100pxを指定してみたら下の画像のようになりました。
スクロールバー全体のサイズが変わったことがわかりましたね。
::-webkit-scrollbar-track
::-webkit-scrollbar-trackは、スクロールバーの中のバーが移動する部分とバーの見た目を変更する際に使用します。
「track」は英語で通り道という意味があり、この場合は背景色を指定すると良いでしょう。
/* CSS */
.container::-webkit-scrollbar-track {
background-color: #fff;
}
試しに、background-color: #f4f9b9;を指定し、背景色を薄い黄色にしてみると画像のようになりました。
バーの通り道の箇所が指定した薄い黄色（#f4f9b9）に変更されました。
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumbは、スクロールバーの中の移動できるバー（つまみ）の見た目を変更する際に使用します。
「thumb」は英語で「親指を使って触る」という意味もあるようなので、英語から連想させると覚えやすそうです。
つまみ部分の色や形を変更したい場合はこの疑似要素に指定します。
/* CSS */
.container::-webkit-scrollbar-thumb {
background-color: #3760d0;
border-radius: 8px;
}
つまみの色が青（#3760d0）になり、角が丸くなりました。
Firefox以外はこれで完成です。次にFirefoxを対応させる場合を見ていきます。
scrollbar-width/scrollbar-color(Firefox対応)
上記3つの疑似要素はFirefoxでは反映されません。
Firefoxでも同じように反映させるためにはscrollbar-width、scrollbar-colorプロパティを使用します。
/* CSS */
.container {
scrollbar-width: 16px;
scrollbar-color: #3760d0;
}注意点は、角丸や高さの指定ができないことです。
3つの疑似要素よりも細かいカスタマイズができないのでその点は頭に入れておきましょう。
できるだけブラウザ間で差がないように見た目を整えられたら良いと思います。
まとめ
今回はHMTLとCSSでoverflow: scrollのスクロールバーをカスタマイズする方法について解説しました。
自分の思い通りにスクロールバーの見た目を変更することはできましたでしょうか？
この方法を知ることで、基本のデザインから見た目を変更することができ、サイトの雰囲気に合わせたスクロールバーを作成することができるので覚えておきましょう。
わからなくなった時はこの記事を読み返して参考にしてもらえたら幸いです。
その他の記事
【CSS】チェックボックス・ラジオボタンの見た目をカスタマイ…
今回はチェックボックス・ラジオボタンの見た目をCSSでカスタマイズする方法について解説します。この方…
【HTML/CSS】グローバルナビの作り方を解説！実際のコードも…
今回はHTML/CSSを使ってグローバルナビの作り方を解説していきます。Webサイトを作る際に必ず実…
【HTML/CSS】横スクロールできる表（テーブル）の作り方
今回は、HTMLとCSSで横スクロールできる表の作り方を解説します。スマホ環境ですと表が入りきらない…
