記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【HTML/CSS】スクロールバー+スクロールバーカスタマイズ(初心者向け)

スクロールバーの作成方法を初心者の方向けに紹介。 スクロールバーの作成方法、overflowプロパティ意味、スクロールバーのカスタマイズ方法がわかります。 全てサンプルコード付きなので実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

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

スクロールバー

スクロールバーとは?

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

スクロールバー↓
テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

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

overflow

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

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

overflow: visible; (初期値・そのまま表示)

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

サンプルコード表記結果

HTMLサンプルコード

CSSサンプルコード

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

overflow: hidden; (はみ出た部分が隠れる)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

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

overflow: scroll; (スクロール)

サンプルコード表記結果

これを作る↓
テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

HTMLサンプルコード

CSSサンプルコード

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

overflow: auto; (ブラウザ判断)

サンプルコード表記結果

これを作る↓
テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

HTMLサンプルコード

CSSサンプルコード

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

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

サンプルコード表記結果

これを作る↓
テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

HTMLサンプルコード

CSSサンプルコード

※解説
「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サンプルコード

CSSサンプルコード

※解説

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

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

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

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

まとめ

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

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

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

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

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

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。