CSS スクロールバー ジェネレーター
ウェブサイト用のカスタム CSS スクロールバーを視覚的に作成します。スクロールバーの幅、トラックの色、つまみの色、ボーダー、角丸をカスタマイズし、リアルタイムでプレビューを確認できます。Chrome、Safari、Edge、Firefox に対応。
カスタマイズ
{{ scrollbarWidth }}px
{{ scrollbarHeight }}px
{{ thumbMinHeight }}px
{{ thumbRadius }}px
{{ trackRadius }}px
{{ shadowBlur }}px
{{ shadowOpacity }}%
スクロールバーのリアルタイムプレビュー
スクロール可能なプレビューエリア
これはスクロールバーのプレビューエリアです。右側または下部のスクロールバーをドラッグして、スクロール効果を確認できます。
左側パネルのパラメータ（幅、ボーダー、角丸など）を調整すると、このエリアのスクロールバーがリアルタイムで更新されます。
このツールは、ChromeなどのWebkit系ブラウザ（ボーダーやホバー、シャドウなど豊富なスタイルに対応）とFirefoxブラウザの両方に対応しています。
スクロールバーのスタイルが決まったら、右側の「CSSをコピー」をクリックしてプロジェクトに貼り付けてください。
{{ t('color_item') }} {{ i }}
これはスクロールバーのプレビューエリアです。右側または下部のスクロールバーをドラッグして、スクロール効果を確認できます。
左側パネルのパラメータ（幅、ボーダー、角丸など）を調整すると、このエリアのスクロールバーがリアルタイムで更新されます。
このツールは、ChromeなどのWebkit系ブラウザ（ボーダーやホバー、シャドウなど豊富なスタイルに対応）とFirefoxブラウザの両方に対応しています。
スクロールバーのスタイルが決まったら、右側の「CSSをコピー」をクリックしてプロジェクトに貼り付けてください。
注意：ボーダー、角丸、シャドウ、ホバー効果は主にChrome/Safari/Edgeで有効です。Firefoxは仕様上の制限により、幅とメインカラーの設定のみ対応しています。