【HTML/CSS】スクロールバー＋スクロールバーカスタマイズ（初心者向け）

こんにちは！
最近、WEB制作をはじめたけど「スクロールバーってどうやって作るの・・？」「スクロールバーとoverflowってどんな関係・・？」「スクロールバーのカスタマイズってできるの・・？」スクロールバーについて疑問を持っている、初心者WEB製作者の方も多いのではないでしょうか？
基礎知識を知り、作成できるようになることで初心者から一歩抜け出していきましょう。
今回は、「スクロールバーの基本知識」「overflowプロパティ」「スクロールバーのカスタマイズ方法」を中心に解説していきます。

1 スクロールバー
2 スクロールバーのカスタマイズ
- 2.1 スクロールバーカスタマイズ方法
3 まとめ

スクロールバー

スクロールバーとは？

表示しきれない画面を見るために動かすバーの事を言います。
下記の様なものです、一度は見たことあるのではないでしょうか？

スクロールバー↓

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

このスクロールバーは、CSSプロパティ「overflow」で指定する値によって表示されます。
つまり「overflow:〇〇;」この〇〇に何を入れるかによって、スクロールバーの表示が決まります。
スクロールバーをより理解するため、まずは「overflow」プロパティの意味、続いて指定できる値について解説していきます。

overflow

overflowとは要素の範囲内に収まりきれない、つまりはみ出てしまう部分をどのように扱うかを指定するCSSプロパティです。

「overflow:〇〇;」この〇〇に値をいれ、要素からはみ出た部分をどの様に扱うかを指定します。
指定できる値は、4つあります。
1.visible:初期値。要素からはみ出た部分をそのまま表示する。
2.hidden:要素からはみ出た部分が隠れる。
3.scroll:要素内に収まりきらない場合にスクロールバーを表示する。
4.auto:ブラウザに依存する。はみ出た要素を、どの様に扱うかの判断をブラウザに任せる。
一つ一つ解説していきます。

overflow: visible; （初期値・そのまま表示）

overflow: visible; を指定し200px×200pxの要素を指定してみます。

サンプルコード表記結果

HTMLサンプルコード

<div class="sample">
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
</div>

テキストテキストテキストテキストテキストテキストテキストテキスト

</div>

CSSサンプルコード

.sample {
  width: 200px;
  height: 200px;
  border: solid 1px;
  overflow: visible;
}

.sample {

width: 200px;

height: 200px;

border: solid 1px;

overflow: visible;

}

※解説
overflow: visible; を指定すると初期値（はみ出たままの）表示になります。

overflow: hidden; （はみ出た部分が隠れる）

サンプルコード表示結果

HTMLサンプルコード

<div class="sample">
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
</div>

テキストテキストテキストテキストテキストテキストテキストテキスト

</div>

CSSサンプルコード

.sample {
 width: 200px;
 height: 200px;
 border: solid 1px;
 overflow: hidden;
}

.sample {

width: 200px;

height: 200px;

border: solid 1px;

overflow: hidden;

}

※解説
要素内に収まりきらない部分は非表示になります。
スクロールバーも表示はされません。

overflow: scroll; （スクロール）

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<div class="sample">
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
</div>

テキストテキストテキストテキストテキストテキストテキストテキスト

</div>

CSSサンプルコード

.sample {
  width: 200px;
  height: 200px;
  border: solid 1px;
  overflow: scroll;
}

.sample {

width: 200px;

height: 200px;

border: solid 1px;

overflow: scroll;

}

※解説
overflowプロパティ、「scroll」の指定でスクロールバーが登場します、画面を動かして見て下さい。ブラウザやOSにより、スクロールバーは画面を動かすまで表示がされない設定のものもあります、動かすことで、はみ出た要素が隠れ、スクロールする事ではみ出た要素を表示する事ができます。
つまり、スクロールはoverflowではみ出た要素を「どう見せるかの手段の一つ」ということです。

overflow: auto; （ブラウザ判断）

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<div class="sample">
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
</div>

テキストテキストテキストテキストテキストテキストテキストテキスト

</div>

CSSサンプルコード

.sample {
  width: 200px;
  height: 200px;
  border: solid 1px;
  overflow: auto;
}

.sample {

width: 200px;

height: 200px;

border: solid 1px;

overflow: auto;

}

※解説
auto指定は、はみ出た要素の見せ方をブラウザに任せています。
多くのブラウザでは、スクロールバーが表示されますが閲覧環境は様々なので、auto以外の指定をオススメします。

横方向のスクロールを作成する

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<div class="sample">
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
</div>

テキストテキストテキストテキストテキストテキストテキストテキスト

</div>

CSSサンプルコード

.sample {
  width: 200px;
  height: 200px;
  border: solid 1px;
  white-space:nowrap;
  overflow:scroll;
}

.sample {

width: 200px;

height: 200px;

border: solid 1px;

white-space:nowrap;

overflow:scroll;

}

※解説
「white-space:nowrap;」を使用します。
デフォルトでは、文字（テキスト）の横方向は折り返され縦方向に要素がはみ出ます。
CSSプロパティ「white-space:nowrap;」を使用し、文字（テキスト）の横方向の折り返しをできないように指定し、「overflow: scroll;」を指定する事で横方向のみのスクロールが表示されます。

スクロールバーのカスタマイズ

CSSでスクロールバーをデフォルトのデザインから、カスタマイズする事ができます。カスタマイズする事で他のWEBサイトと差をつける事ができるでしょう。
今回ご紹介するのは、ブラウザが「Chrome」か「safari」の2 点の場合のみの適用となっていますのでご注意ください。

スクロールバーカスタマイズ方法

スクロールバーをカスタマイズするには、3点のプロパティを変更すれば表示でき、全て擬似要素（::）での変更となります。
擬似要素について詳しく知りたい方は下記を参照してください。
https://www.asobou.co.jp/blog/web/css2

①::-webkit-scrollbar
（スクロールバー全体。縦スクロールの場合はwidth、横スクロールの場合はheightでスクロールバーの指定をおこないます。）
②::-webkit-scrollbar-track
（スクロールバーの背景色部）
③::-webkit-scrollbar-thumb
（ドラックできるスクロール部）

下記の様にカスタマイズします。

スクロールバーカスタマイズ↓

HTMLサンプルコード

<div class="sample_bar">
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
     テキストテキストテキストテキストテキストテキストテキストテキスト
</div>

テキストテキストテキストテキストテキストテキストテキストテキスト

</div>

CSSサンプルコード

/* スクロールバー確認の要素 */
.sample_bar {
 width: 200px;
 height: 200px;
 overflow: scroll;
}
 
/* スクロールの幅の設定 */
.sample_bar::-webkit-scrollbar {
 width: 10px;
 height: 10px;
}
 
/* スクロールの背景の設定 */
.sample_bar::-webkit-scrollbar-track {
 border-radius: 5px;
 background: rgba(110, 108, 108, 0.2);
}
 
/* ドラックできるスクロール部の設定 */
.sample_bar::-webkit-scrollbar-thumb {
 border-radius: 5px;
 background: #FF0000;
}

/* スクロールバー確認の要素 */

.sample_bar {

width: 200px;

height: 200px;

overflow: scroll;

}

/* スクロールの幅の設定 */

.sample_bar::-webkit-scrollbar {

width: 10px;

height: 10px;

}

/* スクロールの背景の設定 */

.sample_bar::-webkit-scrollbar-track {

border-radius: 5px;

background: rgba(110, 108, 108, 0.2);

}

/* ドラックできるスクロール部の設定 */

.sample_bar::-webkit-scrollbar-thumb {

border-radius: 5px;

background: #FF0000;

}

※解説

.sample_bar {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

.sample_bar {

width: 200px;

height: 200px;

overflow: scroll;

}

まずは上記指定で、スクロールさせる要素を準備

/* スクロールの幅の設定 */
.sample_bar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* スクロールの幅の設定 */

.sample_bar::-webkit-scrollbar {

width: 10px;

height: 10px;

}

width、heightでスクロールバー（右側、下）のバーの幅を指定

/* スクロールの背景の設定 */
.sample_bar::-webkit-scrollbar-track {
 border-radius: 5px;
 background: rgba(110, 108, 108, 0.2);
}

/* スクロールの背景の設定 */

.sample_bar::-webkit-scrollbar-track {

border-radius: 5px;

background: rgba(110, 108, 108, 0.2);

}

スクロールの背景、バーの丸みを指定

/* ドラックできるスクロール部の設定 */
.sample_bar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #FF0000;
}

/* ドラックできるスクロール部の設定 */

.sample_bar::-webkit-scrollbar-thumb {

border-radius: 5px;

background: #FF0000;

}

ドラックできるスクロール部の色、バーの丸みを指定
カスタマイズしたい箇所、例えば「バーの色」「幅」「背景色」など適所の指定を変えるだけでオリジナルのスクロールバーを簡単に作成できます。

まとめ

今回は、「スクロールバーの基本知識」「overflowプロパティ」「スクロールバーのカスタマイズ方法」を中心に解説してきました。
最後にポイントをまとめます。

1.スクロールバーは、CSSプロパティ「overflow」で指定する値によって表示される

2.overflowで指定できる値は4点
　①visible:初期値。要素からはみ出た部分をそのまま表示
　②hidden:要素からはみ出た部分が隠れる
　③scroll:要素内に収まりきらない場合にスクロールバーを表示
　④auto:ブラウザに依存する。はみ出た要素を、どの様に扱うかの判断をブラウザに任せる

3.スクロールバーをカスタマイズするには3点のプロパティを変更する
①::-webkit-scrollbar
（スクロールバー全体。縦スクロールの場合はwidth、横スクロールの場合はheightでスクロールバーの指定をおこないます。）
②::-webkit-scrollbar-track
（スクロールバーの背景色部）
③::-webkit-scrollbar-thumb
（ドラックできるスクロール部）

いかがだったでしょうか？
overflowプロパティは、スクロールバー意外にも使用することができる、便利なプロパティーです、これを機会に学習してみてください。