カテゴリー: 開発ツール
CSS スクロールバージェネレーター
カスタムスクロールバーの CSS をローカルで作成、プレビュー付き
ライブプレビューを見ながらカスタムスクロールバーを設計し、scrollbar-color、scrollbar-width、WebKit のスタイル用 CSS をコピーできます。ブラウザー内で生成されます。
プレビュー
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color と scrollbar-width が標準のプロパティで、Firefox と現行の Chrome はこれを使います。::-webkit- のルールは古い Chrome・Edge・Safari のために残している非標準の接頭辞です。2 つのエンジンの表示は同一にはなりません。
プレビューも生成された CSS も、どちらもブラウザー内で作られます。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
スクロールバーの装飾は 2 つの仕組みに分かれています。CSS Scrollbars Styling モジュールが提供するのは `scrollbar-color` と `scrollbar-width` の 2 つのプロパティで、Firefox を含む広い対応と、意図的に限定された制御を持ちます。古くからある `::-webkit-scrollbar` 疑似要素はもっと細かく制御できますが、非標準の接頭辞です。このジェネレーターは標準のプロパティを先に、WebKit のブロックをその後に見出し付きで出力します。両者が同じものであるかのように装うことなく、広い対応範囲を得るためです。表示は同一にはなりませんし、スクロールバーは人が頼りにする操作部品ですから、ここでのプレビューは絵ではなく実際にスクロールします。
使い方
- 装飾したい要素のセレクターを設定し、つまみ・トラック・ホバーの色を選びます。
- scrollbar-width を選び、WebKit の幅と角丸を設定します。
- プレビューをスクロールして確認し、CSS をコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- カスタムスクロールバーはすべてのブラウザーで動きますか？
- 同一にはなりません。scrollbar-color と scrollbar-width は Firefox と現行の Chrome・Edge で動作し、::-webkit- のルールは古い Chrome・Edge・Safari を補います。このツールは両方を出力しますが、2 つのエンジンはスクロールバーの描き方が異なり、どんな CSS でも完全に一致させることはできません。
- scrollbar-color とは何ですか？
- つまみとトラックの色を 1 つの宣言で指定する標準プロパティです。先につまみ、次にトラックを書きます。CSS Scrollbars Styling モジュールの一部なので、まずこちらから始めるべき書き方です。
- なぜ WebKit の CSS も含めるのですか？
- 標準プロパティでは色と大まかな幅しか指定できず、古い WebKit や Blink はそれらに対応していないためです。接頭辞付きのルールは明示的なサイズと角丸を追加し、それらのブラウザーを補います。
- スクロールバーを完全に隠すべきですか？
- 慎重に。scrollbar-width: none は、その領域がスクロールすることを示す手がかりと、ドラッグして動かす手段を取り去ります。ホイールやトラックパッドを使わない人には不利になります。細くてコントラストの高いバーを検討してください。