CSSスクロールバー生成器
CSSスクロールバーのデザインをGUIでカスタマイズできる。 色・幅・角丸などを調整してコードをそのままコピー可能。
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}スクロールコンテンツ #1 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #2 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #3 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #4 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #5 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #6 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #7 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #8 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #9 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #10 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #11 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #12 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #13 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #14 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #15 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #16 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #17 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #18 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #19 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #20 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #21 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #22 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #23 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #24 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #25 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #26 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #27 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #28 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #29 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
スクロールコンテンツ #30 - カスタムスクロールバーのプレビューです。スクロールして確認してください。
使い方
スタイル設定
スクロールバーの幅・色・角丸などを設定
プレビュー確認
リアルタイムプレビューでスクロールバーの見た目を確認
CSSコピー
生成されたCSSコードをコピー
このツールの特徴
リアルタイムプレビュー
設定変更と同時にスクロールバーをリアルタイムプレビュー
クロスブラウザ対応
WebKit系とFirefox向けの両方のCSSを自動生成
ホバー・アクティブ状態
ホバー時・ドラッグ時のスタイルも個別にカスタマイズ可能
よくある質問
🔗関連ツール
カラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
カラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
CSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
CSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。