スクロールバーCSS
カスタムスクロールバーのCSSを生成。幅・色・角丸を設定。
スクロールバーのプレビューテキスト 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
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #888888cc;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}使い方
スクロールバーの幅、色、角丸を調整してプレビューで確認します。
WebKit系ブラウザとFirefox対応のCSSコードを生成します。コピーしてお使いください。
デザイン調整で見るべき点
- •生成したCSSや色は、ライト/ダークモード、モバイル、ブラウザ差で見え方が変わります。
- •色やコントラストは見た目だけでなく、読みやすさとアクセシビリティを基準に確認してください。
- •装飾値はそのまま採用するより、既存デザインシステムの余白・角丸・影に合わせて調整すると破綻しにくくなります。
関連ツール
🎨🖥️🌈🌈🖼️🎨🖌️🔤📱🔖👁️📐
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
ランダムカラー生成
ランダムな色をHEX/RGB/HSLで生成。
カラーパレット生成
ベースカラーから配色パレットを自動生成。
フォントプレビュー
テキストを様々なフォントで比較プレビュー。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
コントラスト比チェック
WCAG基準で色のアクセシビリティを確認。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。