CSSスクロールバージェネレーター - カスタムスクロールバースタイル オンライン
ビジュアルコントロールとライブプレビューでカスタムCSSスクロールバースタイルをデザイン。WebKitと標準スクロールバーCSSコードを即座に生成 — 100%クライアントサイド、サーバーにデータを送信しません。
よくある質問
CSSスクロールバージェネレーターとは何ですか？
CSSスクロールバージェネレーターは、CSSを使用してウェブサイトのカスタムスクロールバースタイルを作成するのに役立つビジュアルツールです。複雑なCSS擬似要素ルールを手動で記述する代わりに、ビジュアルコントロールで色、サイズ、ボーダープロパティを調整し、即座にプロダクション対応のCSSコードを取得できます。標準のscrollbar-color/scrollbar-widthプロパティとWebKit固有の擬似要素（::-webkit-scrollbar）の両方をサポートしています。
このCSSスクロールバージェネレーターはどのように使いますか？
1. 出力モードを選択します：WebKitのみ、標準のみ、または両方（推奨）。2. スライダーでスクロールバーの幅を設定します。3. トラック（背景）とサム（ハンドル）の色を選択します。4. 必要に応じてボーダー半径、ボーダー、ホバー/アクティブ状態の色を調整します。5. プレビューパネルでリアルタイムに変更を確認します。6. 生成されたCSSコードをコピーしてスタイルシートに貼り付けます。
WebKitと標準スクロールバーCSSの違いは何ですか？
標準プロパティ（scrollbar-color、scrollbar-width）はCSS仕様の公式な一部であり、すべてのモダンブラウザ（Chrome 121+、Firefox 64+、Safari 26.2+、Edge 121+）で動作します。シンプルな色と幅の制御を提供します。WebKit擬似要素（::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb）は非標準ですが、ボーダー半径、ボーダー、ホバー状態、個別パーツのスタイリングに対してより細かな制御を提供します。重要：両方が設定されている場合、標準プロパティがWebKitスタイリングをオーバーライドします。
標準スクロールバーCSSプロパティはすべてのブラウザでサポートされていますか？
はい。2025年12月時点で、scrollbar-colorとscrollbar-widthはBaseline Newly Availableステータスを達成しており、Chrome、Firefox、Safari、Edgeでサポートされています。最も詳細なカスタマイズ（ボーダー半径、ボーダー、ホバー状態）については、WebKit擬似要素を拡張機能として含めることをお勧めします。
このツールを使用する際、データは安全ですか？
はい。このツールは完全にブラウザ内で実行されます。CSSコード、色の値、その他のデータはサーバーに送信されません。すべての処理がクライアントサイドで行われ、完全なプライバシーとセキュリティを保証します。
要素ごとに異なるスクロールバースタイルを設定できますか？
はい。生成されたCSSは、特定の要素にスコープできる擬似要素を使用します。グローバルにスタイルを適用する代わりに、セレクターにクラス名をプレフィックスとして追加（例：.my-container::-webkit-scrollbar）することで、その特定の要素内のスクロールバーのみをスタイリングできます。
スクロールバーをアクセシブルにするにはどうすればよいですか？
スクロールバーをスタイリングする際、サムがトラックに対して少なくとも3:1のカラーコントラスト比を持つようにしてください（WCAG 2.0ガイドライン）。タッチ入力のユーザビリティが低下するため、スクロールバーを細くしすぎないでください（8px未満）。代替のスクロールインジケーターを提供しない限り、スクロールバーを非表示（scrollbar-width: none）にしないでください。視覚的なスクロールバーに依存するユーザーのユーザビリティを損なうためです。
コード例
// Generate CSS scrollbar styles from configuration
function generateScrollbarCSS(config) {
const {
width = 12,
trackColor = '#f1f1f1',
thumbColor = '#888888',
thumbHoverColor = '#555555',
thumbBorderRadius = 6,
trackBorderRadius = 0
} = config;
// Standard CSS (all modern browsers)
const standardCSS = [
'/* Standard scrollbar properties (Chrome 121+, Firefox 64+, Safari 26.2+) */',
'.custom-scrollbar {',
` scrollbar-width: ${width <= 6 ? 'thin' : 'auto'};`,
` scrollbar-color: ${thumbColor} ${trackColor};`,
'}'
].join('\n');
// WebKit CSS (Chrome, Safari, Edge - enhanced styling)
const webkitCSS = [
'/* WebKit scrollbar styling (Chrome, Safari, Edge) */',
'.custom-scrollbar::-webkit-scrollbar {',
` width: ${width}px;`,
` height: ${width}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-track {',
` background: ${trackColor};`,
` border-radius: ${trackBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb {',
` background: ${thumbColor};`,
` border-radius: ${thumbBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb:hover {',
` background: ${thumbHoverColor};`,
'}'
].join('\n');
return { standardCSS, webkitCSS, combined: `${standardCSS}\n\n${webkitCSS}` };
}
// Usage
const css = generateScrollbarCSS({
width: 10,
trackColor: '#f0f0f0',
thumbColor: '#6366f1',
thumbHoverColor: '#4f46e5',
thumbBorderRadius: 5,
trackBorderRadius: 5
});
console.log(css.combined);