::-webkit-scrollbarによるスクロールバーのスタイル設定
WebKit疑似要素とscrollbar-colorプロパティを使って、スクロールバーの外観をカスタマイズします。
「::-webkit-scrollbarによるスクロールバーのスタイル設定」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
スクロールバーのスタイル指定の概要
ブラウザーが描画するデフォルトのスクロールバーは、オペレーティングシステムによって異なります。CSSでは、非標準のwebkit疑似要素と最新の標準プロパティを使って、スクロールバーの外観をカスタマイズできます。
::-webkit-scrollbar
スクロールバー全体を表すルート疑似要素です。幅（垂直方向）と高さ（水平方向）を設定します。
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
トラックは、つまみが沿って移動する背景部分です。
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
つまみは、ドラッグして操作するスクロールインジケーターです。
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>カスタムスクロールバーの完成形
カスタムスクロールバーの完全な実装です。
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>最新の標準：scrollbar-color
scrollbar-colorは、Firefoxがサポートする標準化されたプロパティです。1つの宣言で、つまみとトラックの色を設定します。
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>最新の標準：scrollbar-width
scrollbar-widthは、キーワード値でスクロールバーのサイズを制御します。
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>クロスブラウザー対応のスクロールバースタイル指定
幅広いブラウザーに対応するには、両方の方法を使用します。
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>スクロールを維持したままスクロールバーを非表示にする
要素をスクロール可能にしたまま、スクロールバーを視覚的に非表示にします。
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>ダークモードのスクロールバー
CSSのcolor-schemeプロパティを使うと、カスタムスタイルを指定せずにOS標準の暗色スクロールバーを表示できます。
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>アクセシビリティに関する注意
スクロールバーを小さくしすぎたり、スクロールできることが分かりにくくなるほど見えなくしたりしないでください。タッチ操作を中心としたデザインでは非表示のスクロールバーも許容されますが、デスクトップでは混乱を招くことがあります。
確認問題
スクロールバーの色を設定し、Firefoxがサポートしている標準CSSプロパティはどれですか。
まとめ
スクロールバーは、（WebKitの）::-webkit-scrollbar疑似要素と、標準のscrollbar-colorおよびscrollbar-widthプロパティ（Firefoxや最新のブラウザー）を使ってカスタマイズします。幅広いブラウザーに対応するには、両方を使用してください。スクロール機能を維持したままスクロールバーを非表示にするには、scrollbar-width: noneとWebKitの同等の指定を組み合わせます。
よくある質問
「::-webkit-scrollbarによるスクロールバーのスタイル設定」レッスンは無料ですか？
はい。「::-webkit-scrollbarによるスクロールバーのスタイル設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「::-webkit-scrollbarによるスクロールバーのスタイル設定」で何を学びますか？
WebKit疑似要素とscrollbar-colorプロパティを使って、スクロールバーの外観をカスタマイズします。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「::-webkit-scrollbarによるスクロールバーのスタイル設定」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- overflow：hidden、scroll、auto、clip
- scroll-behavior：smooth
- scroll-snap-typeとscroll-snap-align
- ::-webkit-scrollbarによるスクロールバーのスタイル設定