スクロールバーカスタマイズ作成
scrollbar-color・scrollbar-widthなど最新のCSSプロパティで、色や太さを変えたオリジナルのスクロールバーをプレビューしながら作成できる無料ツールです。
1. 対象のセレクター
2. スタイル設定
Safariの一部バージョンなど、標準プロパティ未対応のブラウザ向けの補助コードです。
3. プレビュー
このボックスをスクロールすると、設定したスクロールバーのスタイルを確認できます。
neconote（ねこのて）は、ブラウザですぐに使える無料Webツール集です。インストール不要で、誰でもすぐに使えます。
色や太さを変更すると、このプレビューにリアルタイムで反映されます。
お好みのスタイルが決まったら、下の「生成されたCSS」をコピーしてお使いください。
ちょっと便利を、ねこの手で。
neconote（ねこのて）は、ブラウザですぐに使える無料Webツール集です。インストール不要で、誰でもすぐに使えます。
4. 生成されたCSS
scrollbar-color / scrollbar-widthについて
これは何？
scrollbar-colorとscrollbar-widthは、スクロールバーの色や太さを指定できる標準のCSSプロパティです。以前はChromeやSafariなど特定のブラウザ専用の書き方（::-webkit-scrollbarなど）が必要でしたが、現在は標準プロパティとして主要ブラウザで広く対応が進んでいます。
WebKit向けのコードも必要？
標準プロパティに対応していない古いブラウザ（一部のSafariバージョンなど）向けの保険として、::-webkit-scrollbar系のコードもあわせて出力できます。両方を記述しておけば、対応状況に関わらず一貫した見た目に近づけられます。
Firefoxでも使える？
はい。scrollbar-colorとscrollbar-widthは、もともとFirefoxが先行して実装していた標準プロパティです。::-webkit-scrollbar系はFirefoxには効かないため、標準プロパティを併記しておくことでFirefoxにもスタイルが適用されます。