KAKERU Designing トミー（末富将也）

スクロールバーの見た目を整えるCSS｜scrollbar-colorで色、thinで細く、gutterでずれ防止

スクロールバーの色を scrollbar-color で変えた見本とコード

ページの中に「お知らせ」の欄や横に並ぶカードを置くと、灰色のスクロールバーだけがサイトの色から浮いて見えることがあります。CSSの scrollbar-color を使うと、スクロールバーの色をサイトに合わせられます。

使いどころは、ページの中にある「スクロールする箱」です。色を合わせる、少し細くする、までにとどめます。スクロールバーを消したり、極端に細くしたりはしません。スクロールできることが伝わらなくなるからです。

この記事の要点

  • scrollbar-color でスクロールバーの色を、scrollbar-width で太さ（ふつう・細め）を、scrollbar-gutter で中身がずれないように場所を空けておける
  • 使いどころは、お知らせ欄や横に並ぶカードなど、ページの中でスクロールする箱。色はサイトに合わせ、太さは「細め」までにする
  • つまみとみぞの色は3:1以上の差をつける。scrollbar-width: none で消すと、スクロールできることが伝わらない
トミー

連載「WEBの技術」の55回目です。
今回はスクロールバーの見た目です。小さな部品ですが、サイトの色がそろっているかどうかは、こういう所に出ると考えています。

完成見本：スクロールバーを整える4種類

どの見本も、左（4は上）が「指定なし」、右（4は下）が「指定あり」です。1・2・4は、箱の中が自動でスクロールしています。3は、お知らせの数が自動で増えたり減ったりしていて、そのたびに左の文字の折り返しが変わります。右は変わりません。

COLOR1. スクロールバーの色を変えるお知らせ欄・サイト全体に
THIN2. スクロールバーを細くする小さな箱・サイドの一覧に
GUTTER3. スクロールバーが出ても中身がずれない中身が増えたり減ったりする箱に

※ 見本は読み上げソフトでは読まれないようにしています。動きを減らす設定にしている方には、止まって見えます。Macの「スクロールバーを表示」が「スクロール時に表示」の場合、スクロールバーは動いている間だけ出ます。スマホでも、スクロールしている間だけ細い線で出るのがふつうです。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-sb は、サイトのほかのデザインと名前がぶつからないようにするための目印です。1〜3は、同じ「お知らせの箱」に指定を足しています。

1. スクロールバーの色を変える

scrollbar-color に色を2つ書きます。1つ目がつまみ（動かす部分）、2つ目がみぞ（つまみが動く通り道）の色です。サイトの色に合わせると、ページの中で浮いて見えなくなります。

HTML
<div class="kd-sb-box kd-sb-color"><div class="kd-sb-item"><span>11.10</span>年末年始の営業日のお知らせ</div><div class="kd-sb-item"><span>11.04</span>お問い合わせフォームを新しくしました</div><div class="kd-sb-item"><span>10.28</span>施工事例を3件追加しました</div><div class="kd-sb-item"><span>10.21</span>秋の相談会を開きます</div><div class="kd-sb-item"><span>10.14</span>スタッフ紹介のページを更新しました</div><div class="kd-sb-item"><span>10.07</span>定休日が変わります</div><div class="kd-sb-item"><span>09.30</span>採用情報を公開しました</div></div>
CSS
/* 見本の箱（1〜3で共通） */
.kd-sb-box {
  height: 180px;
  overflow-y: auto;     /* 入りきらない分はスクロール */
  border: 1px solid #CBD5E1;
  border-radius: 8px;
}
.kd-sb-item {
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
}
.kd-sb-item span {
  display: block;
  font-size: 12px;
  color: #475569;
}
.kd-sb-color {
  /* つまみの色　みぞの色 */
  scrollbar-color: #0284C7 #E0F2FE;
}

2. スクロールバーを細くする

scrollbar-width: thin で、そのブラウザが用意している細めのスクロールバーになります。太さを何pxと決めることはできず、選べるのは「ふつう」「細め」「出さない」の3つだけです。

HTML
<div class="kd-sb-box kd-sb-thin"><div class="kd-sb-item"><span>11.10</span>年末年始の営業日のお知らせ</div><div class="kd-sb-item"><span>11.04</span>お問い合わせフォームを新しくしました</div><div class="kd-sb-item"><span>10.28</span>施工事例を3件追加しました</div><div class="kd-sb-item"><span>10.21</span>秋の相談会を開きます</div><div class="kd-sb-item"><span>10.14</span>スタッフ紹介のページを更新しました</div><div class="kd-sb-item"><span>10.07</span>定休日が変わります</div><div class="kd-sb-item"><span>09.30</span>採用情報を公開しました</div></div>
CSS
/* 見本の箱（1〜3で共通） */
.kd-sb-box {
  height: 180px;
  overflow-y: auto;     /* 入りきらない分はスクロール */
  border: 1px solid #CBD5E1;
  border-radius: 8px;
}
.kd-sb-item {
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
}
.kd-sb-item span {
  display: block;
  font-size: 12px;
  color: #475569;
}
.kd-sb-thin {
  scrollbar-width: thin;              /* 細め */
  scrollbar-color: #0284C7 #F1F5F9;   /* 1と組み合わせる */
}

3. スクロールバーが出ても中身がずれない

中身が増えてスクロールバーが出ると、その幅の分だけ文字が左へずれます。scrollbar-gutter: stable を付けると、スクロールバーの場所を先に空けておくので、出たり消えたりしても中身が動きません。

HTML
<div class="kd-sb-box kd-sb-short kd-sb-gutter"><div class="kd-sb-item"><span>11.10</span>年末年始の営業日のお知らせ</div><div class="kd-sb-item"><span>11.04</span>お問い合わせフォームを新しくしました</div><div class="kd-sb-item kd-sb-more"><span>10.28</span>施工事例を3件追加しました</div><div class="kd-sb-item kd-sb-more"><span>10.21</span>秋の相談会を開きます</div><div class="kd-sb-item kd-sb-more"><span>10.14</span>スタッフ紹介のページを更新しました</div><div class="kd-sb-item kd-sb-more"><span>10.07</span>定休日が変わります</div></div>
CSS
/* 見本の箱（1〜3で共通） */
.kd-sb-box {
  height: 180px;
  overflow-y: auto;     /* 入りきらない分はスクロール */
  border: 1px solid #CBD5E1;
  border-radius: 8px;
}
.kd-sb-item {
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
}
.kd-sb-item span {
  display: block;
  font-size: 12px;
  color: #475569;
}
.kd-sb-short {
  height: 140px;
}
.kd-sb-gutter {
  scrollbar-gutter: stable;  /* スクロールバーの場所を空けておく */
  scrollbar-color: #0284C7 #E0F2FE;
}

4. 横に並ぶカードのスクロールバー

横に並べたカードの下に、細くて色のついたスクロールバーを付けます。tabindex="0" を付けておくと、キーボードの Tab キーでこの列に移動して、矢印キーで横に動かせます。

HTML
<div class="kd-sb-row kd-sb-x" tabindex="0" role="region" aria-label="おすすめのページ"><a class="kd-sb-card" href="#">はじめての方へ</a><a class="kd-sb-card" href="#">料金のめやす</a><a class="kd-sb-card" href="#">よくある質問</a><a class="kd-sb-card" href="#">施工事例</a><a class="kd-sb-card" href="#">スタッフ紹介</a><a class="kd-sb-card" href="#">アクセス</a></div>
CSS
/* 横に並ぶカード */
.kd-sb-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;        /* 入りきらない分は横にスクロール */
  padding-bottom: 10px;
}
.kd-sb-card {
  flex: 0 0 140px;
  padding: 26px 12px;
  border-radius: 10px;
  background: #F1F5F9;
  color: #0F172A;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.kd-sb-x {
  scrollbar-width: thin;
  scrollbar-color: #0284C7 #E0F2FE;
}
.kd-sb-row:focus-visible {
  outline: 3px solid #0284C7;  /* キーボードで来たときの枠 */
  outline-offset: 3px;
}

4は、実際に動かして試せる見本も置いておきます。マウスなら横にスクロール、キーボードなら Tab キーでこの列に移動してから左右の矢印キーで動きます。

はじめての方へ料金のめやすよくある質問施工事例スタッフ紹介アクセス

ページ全体のスクロールバーの色を変えるなら、html { scrollbar-color: #0284C7 #E0F2FE; } のように、いちばん外側の html に書きます。

仕組み：スクロールバーは「つまみ」と「みぞ」でできている

2つの色の順番

スクロールバーは、動かす部分のつまみと、つまみが動く通り道のみぞの2つでできています。scrollbar-color には、この順番で色を2つ書きます。順番を逆にすると、濃いみぞの上を淡いつまみが動く形になります。

MDNによると、scrollbar-color は親から子へ受け継がれます。お知らせの箱の中にさらにスクロールする箱があっても、同じ色になります。

太さは3つから選ぶ

scrollbar-width で選べるのは、auto（ふつう）、thin（細め）、none（出さない）の3つです。「6px」のように数字で決めることはできません。MDNには、この指定の目的は見た目を飾ることではなく、スクロールバーが取る場所を調整することだと書かれています。thin がどのくらい細くなるかは、ブラウザやパソコンの設定によって変わります。

場所を取るスクロールバーと、重なるスクロールバー

パソコンでは、スクロールバーが箱の右はしに場所を取って表示されることがあります。このとき、中身が入る幅はスクロールバーの分だけ狭くなります。3の見本で、左の文字の折り返しが変わったのはこのためです。

scrollbar-gutter: stable は、スクロールが要らないときも、スクロールバーの場所を空けておく指定です。一方、Macの設定やスマホでは、スクロールバーが中身の上に重なって表示されます。重なるスクロールバーは場所を取らないので、この指定を付けても何も変わりません。

昔の書き方 ::-webkit-scrollbar との関係

スクロールバーの見た目を変える方法として、::-webkit-scrollbar という書き方も広く使われてきました。標準ではない書き方で、MDNによると、scrollbar-color や scrollbar-width を指定した要素では使われなくなります。新しく作るなら、今回の2つで書きます。

数値を変えるとどうなるか

つまみとみぞの色の差

同じ箱で、つまみとみぞの色の組み合わせだけを変えました。かっこの中は、2つの色の差（コントラスト比）です。

MDNは、つまみとみぞの色に十分な差をつけるよう注意しています。目安として紹介されているのは、3:1以上です。KAKERUブルー（#0EA5E9）のような明るい色は、淡い水色のみぞの上では差が足りません。つまみには、1つ濃い #0284C7 を使っています。

太さの3つ

none は、スクロールバーが消えても、箱の中はスクロールできます。ただ、見た目では「この箱の下にまだ続きがある」ことが分かりません。

スマホと、見る人への配慮

スマホでは見た目の違いが小さい

スマホのブラウザは、スクロールしている間だけ細い線を出す形がふつうです。色を変えても目に入る時間が短いので、スマホでの見た目には期待しすぎないようにします。スマホで「続きがある」ことを伝えるなら、横に並ぶカードの右はしを少しだけ見せる方法が分かりやすくなります。

消さない・細くしすぎない

MDNは、thin や none を使うと、ほかにスクロールする手段がない人にとって操作しにくくなると注意しています。マウスのホイールやトラックパッドがない環境では、スクロールバーをつかんで動かすしかないこともあります。

キーボードでも動かせるように

ページの中のスクロールする箱は、キーボードでも動かせるようにしておきます。4の見本のように tabindex="0" を付けると、Tab キーで箱に移動し、矢印キーでスクロールできます。そのときは、どこにいるか分かるように :focus-visible で枠を出し、aria-label で箱の名前を付けておきます。

色の設定を強制している人

見る人が画面の色を強制する設定（Windowsのコントラスト テーマなど）では、MDNによると scrollbar-color は効かなくなり、ふつうの色に戻ります。見る人の設定が優先されるので、こちらで何かする必要はありません。

やりすぎ注意

つまみをサイトの差し色にすると、スクロールバーがページの中でいちばん目立つ部品になることがあります。お知らせの箱がページに3つも4つもあるなら、そもそも箱でスクロールさせるのをやめて、全部並べるか「もっと見る」のリンクにするほうが読みやすくなります。

AIに頼むなら

Claudeなどの生成AIに頼むときは、どの箱に付けるか、色の差、キーボード操作まで伝えると、手直しが減ります。

このサイト（CSSを貼る）のお知らせ欄と横スクロールのカード一覧に、scrollbar-color と scrollbar-width: thin を付けて。
つまみは #0284C7、みぞは #E0F2FE。つまみとみぞの差は3:1以上にして。
scrollbar-width: none と ::-webkit-scrollbar は使わないで。横の一覧は Tab キーと矢印キーで動かせるようにして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • ::-webkit-scrollbar の指定が混ざっていないか。今回の2つと一緒に書くと、ブラウザによって見た目が変わり、どちらが効いているのか分かりにくくなります
  • scrollbar-width: none で消していないか。「すっきりさせて」のような頼み方をしたときは、特に注意して見ます
  • 色の差は足りているか。つまみとみぞの2色を、コントラストを測るツールで確かめます。目安は3:1以上です

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • ページの中のお知らせ欄・横に並ぶカード。サイトの色に合わせ、太さは thin にします。灰色のスクロールバーだけが浮いて見えるのを防げます
  • 中身の数が変わる箱。検索の結果や、あとから読み込む一覧には scrollbar-gutter: stable を付けて、文字がずれないようにします
  • ダークな配色のページ。暗い背景に明るい灰色のスクロールバーが出ると目立つので、背景に合わせた色にします

使わない場面

  • ページ全体のスクロールバーを細くする・消す。見る人が一番使う操作なので、太さはブラウザに任せます。色を合わせる程度にとどめます
  • scrollbar-width: none で「すっきり」見せる。スクロールできることが伝わらなくなります。KAKERUでは使いません
  • スクロールする箱をたくさん作る。箱の中に箱がある形は、スマホで指がどちらを動かしているのか分かりにくくなります。見た目を整える前に、箱を減らせないかを考えます
トミー

KAKERUなら、ページの中の箱に色と thin を付けるところまでにします。
ページ全体のスクロールバーは、色を合わせるだけ。太さや表示はブラウザと見る人の設定に任せます。

まとめ

  • scrollbar-color は「つまみの色　みぞの色」の順に2つ書く
  • scrollbar-width は auto・thin・none の3つだけ。使うのは thin まで
  • scrollbar-gutter: stable で、スクロールバーが出ても中身がずれない
  • つまみとみぞの色は3:1以上の差。スクロールする箱はキーボードでも動かせるように
  • スマホやMacの設定によっては、スクロール中しか見えない

まずは1のコードの scrollbar-color を、サイトのお知らせ欄など、ページの中のスクロールする箱に付けてみてください。

参考にした資料

いずれも2026年11月11日に確認しました。内容は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

横にスクロールするスライドをCSSだけで。scroll-snapの止め方と、使う・使わないの判断
関連記事横にスクロールするスライドをCSSだけで｜scroll-snapでピタッと止める、コピペで使える4種類と使う・使わないの判断
表をCSSで見やすく。縞模様・横スクロール・見出しと左の列の固定の見本とコード
関連記事表（テーブル）をCSSで見やすく｜縞模様・スマホで横スクロール・見出しと左の列の固定、コピペ4種類と使いどころ
ページ内リンクの飛び先が固定ヘッダーに隠れない見本とコード
関連記事ページ内リンクの飛び先が固定ヘッダーに隠れないCSS｜scroll-margin-topとscroll-padding-topの使い分け3種類

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・次の回ど真ん中に置くCSS｜flex・grid・align-contentで縦も横も中央寄せ、コピペで使える4種類WEB技術・前の回見出しの改行をきれいにするCSS｜text-wrap: balance・prettyと日本語の改行4種類
スクロールバーの色を scrollbar-color で変えた見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事