Webサイト製作のヒント～スクロールバーを装飾する

ＢＡオンライン編集部

3年前

1. はじめに～ちょっと余談～
2. 実践！スクロールバーを装飾
3. 最後に

はじめに～ちょっと余談～

更新が停止して何年も経っているMicrosoft社製webブラウザ「Internet Explorer（以下IE）」のサポート終了まであとわずかです。webサイト製作やwebアプリ開発ではIEでも問題なく閲覧できるようにする為、使うのを控えてきた多くの技術や表現があります。それがサポート終了によって躊躇なく使えるようになるのは大きいですね～！待ってましたって感じです。
そこで今回はIEサポート終了記念、IE非対応なwebサイト製作に役立つ情報をご紹介します。

実践！スクロールバーを装飾

ここから本題です。今回はスタイルシートでスクロールバーを装飾する方法をご紹介します。
通常スクロールバーはブラウザ標準のものが表示されますが、webサイトやwebアプリのデザインによっては、色を変えたい、幅を調整したいなんて事も出てきたりします。設定によってバーの幅や色を調整できるので、画面のデザインに合わせたスクロールバーにしたいなんて時にぜひ。（※これがIEは非対応なんです）

スクロールバーを調整したサンプルをご用意しました。スクロールバーの見た目がブラウザ標準のものとは異なっています。

調整デモ

サンプルの説明文です。通常スクロールバーはブラウザ標準のものが表示されますが、
webサイトやwebアプリのデザインによっては、色を変えたい、幅を調整したいなんて事も出てきたりします。
設定によってバーの幅や色を調整できるので、画面のデザインに合わせたスクロールバーにしたいなんて時にぜひ。

設定方法

上のスクロールバーのサンプルを例に設定方法をご説明します。
まずは、HTMLの記述です。

HTML
<div class="scrollbar-demo">
<h3>見出し</h3>
<p>テキストテキストテキスト…</p>
</div>

スクロールさせて見る部分にclass=”scrollbar-demo”を付与しています。
続いて本題、css(スタイルシート)の設定についてです。

CSS

/*--スクロールする部分のコンテナ--*/
.scrollbar-demo{    
    max-width: 500px;
    height: 200px;
    margin: 0 0 1rem;
    padding: 1rem 20px;
    border: 1px solid #969696;
    overflow-y: scroll;
    overflow-x: hidden;

    /*--FireFox向けスクロールバーの装飾--*/
    scrollbar-width: thin; /*--細いスクロールバー--*/
    scrollbar-color: #474747 #e0e0e0;/*--背景色とバーの色--*/
}

/*--スクロールバー表示エリアの横幅--*/
.scrollbar-demo::-webkit-scrollbar {
    width: 14px;
}

/*--スクロールバー表示エリアの背景色--*/
.scrollbar-demo::-webkit-scrollbar-track {
    background: #6b6b6b;    
}

/*--バーの設定--*/
.scrollbar-demo::-webkit-scrollbar-thumb {
    background: #e0e0e0; /*--バーの色--*/
    border-radius: 6px; /*--バーの丸み--*/
    border: solid 2px transparent; /*--スクロールバー表示エリアとバーの隙間--*/
    background-clip: content-box; /*--スクロールバー表示エリアとバーの隙間の設定に必須--*/
}

簡単に解説＋補足説明します

部分ごとの説明です

「::-webkit-scrollbar」がスクロールバー表示エリアの設定になります。
サンプルでは横幅14pxの設定にしています。

「::-webkit-scrollbar-track」がスクロールバーのべースの設定になります。
サンプルでいうところの濃いグレーの部分です。
サンプルでは背景色を「#6b6b6b」に設定しています。

「::-webkit-scrollbar-thumb」がバー部分の設定になります。
サンプルでは、色、丸みに加えて、表示エリアとバーの間に2pxの隙間を持たせています。これは半透明なボーダーを設定する事で実現できます。その際「background-clip: content-box;」の記述は必須となるので忘れずに付け加えちゃいましょう。

設定追加でFireFoxに対応

::-webkit-とついている設定は、Chrome、edge、safariといった多くのブラウザで適用されるのですが、レンダリングのエンジンが異なるFireFoxでは適用されません。
FireFox向けの設定を追加で記述する事でFireFoxでもスクロールバーの装飾ができるのですが、幅のサイズ指定や丸みなど細かいところまでは設定する事ができません。このあたりはちょっと悩ましいところですね。

最後に

スクロールバーの装飾についてでした。
見慣れているスクロールバーの見た目を変更するのは戸惑いを招く可能性も考えられますので、デザイン重視で考えたい、全体ではなく一部のみ適用する、などケースバイケースで使ってみてください。
なお、この情報は2022年4月時点のものとなります。

Internet Explorer、Edgeは、Microsoft Corporationの米国及びその他の国における商標または登録商標です。
Firefoxは、Mozilla Foundationの米国およびその他の国における登録商標です。
Google Chrome、Androidは、Google Inc. の登録商標です。
Safariは米国および他の国々で登録された Apple Inc. の商標です。

はじめに ～ちょっと余談～