カスタム CSS スクロールバーの作成

直感的なジェネレーターを使用して、Webサイトのスタイルに一致する美しくモダンなスクロールバーをデザインします。コーディングのスキルは必要ありません!

カスタマイズを開始 例を見る

コントロールパネル

8px
0px

Preview

スクロールバー プレビュー コンテンツ

これは、カスタムスクロールバーのデモエリアです。左側の設定を調整して、リアルタイムの変更を確認します。

Feature 1

最新のWebサイトやアプリケーション用に完全にカスタマイズ可能なスクロールバー。

Feature 2

さまざまなブラウザに対する自動プレフィックスによるクロスブラウザのサポート。

長いテキストコンテンツの例:Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

その他のテキストコンテンツ:Curabitur pretium tincidunt lacus。Nulla gravida orci a odio.Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.Integer in mauris eu nibh euismod gravida.Duis ac tellus et risus vulputate vehicula.Donec lobortis risus a elit.Etiam tempor.Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam.Maecenas fermentum consequat mi. ドネク発酵槽。Pellentesque malesuada nulla a mi.Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque.Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat.Cras mollis scelerisque nunc.ヌラム・アルク。Aliquam consequat.Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi.Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci.In hac habitasse platea dictumst.

テキストの終わり: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

生成された CSS コード

クリップボードにコピーされました!

強力な機能

完全にカスタマイズ可能

幅、色、半径、境界線など、スクロールバーのあらゆる側面を調整して、Webサイトのデザインに完全に一致させます。

クロスブラウザのサポート

Chrome、Firefox、Safari、Edge など、最新のすべてのブラウザーで動作する CSS コードを生成します。

すぐに使えるプリセット

厳選されたスクロールバープリセットのコレクションを使用して、プロフェッショナルなデザインから始め、迅速に実装できます。

リアルタイムプレビュー

インタラクティブなプレビューパネルで調整を行うと、スクロールバーがどのように表示されるかを正確に確認できます。

適切にフォーマットされた最小限のCSSコードを入手し、肥大化することなくプロジェクトに統合する準備ができています。

レスポンシブデザイン

さまざまな画面サイズやデバイスに完全に適応するスクロールバーを作成し、一貫したユーザーエクスペリエンスを実現します。

使用方法

1

スクロールバーをカスタマイズする

コントロールパネルを使用して、スクロールバーの幅、色、半径、およびその他のプロパティを、デザインのビジョンに一致するまで調整します。

2

生成されたCSSをコピーします

プレビューに満足したら、「CSSをコピー」ボタンをクリックして、生成されたコードをクリップボードにコピーします。

3

プロジェクトに追加する

CSS コードをプロジェクトのスタイルシートに貼り付けるか、インラインで使用します。クラスを任意の要素に適用して、カスタムスクロールバーの動作を確認します。

スクロールバーの例

角が丸いモダンな青いスクロールバーの例。企業のWebサイトやアプリケーションに最適です。

このスクロールバーは、ホバー時に色が変わる濃い青色のつまみが付いた水色のトラックを使用しています。

下にスクロールして、完全な効果を確認します。つまみの半径は 5px で、エッジが滑らかに丸みを帯びています。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

モダンブルー

丸みを帯びたエッジを持つなめらかなブルーのスクロールバー

最小限のスタイリングを備えた微妙な暗いスクロールバーの例。コンテンツの多いWebサイトに最適です。

このスクロールバーは、非常に明るい灰色のトラックと、ホバー時に暗くなる中程度の灰色のつまみを使用しています。

下にスクロールして、完全な効果を確認します。親指の半径はわずかに 3px で、ソフトなエッジになります。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

微妙なダーク

コンテンツサイト用のミニマリストの暗いスクロールバー

大胆なスタイルの鮮やかな緑色のスクロールバーの例。環境にやさしいウェブサイトや健康関連のウェブサイトに最適です。

このスクロールバーは、ホバー時に暗くなる鮮やかな緑のつまみが付いた薄緑色のトラックを使用しています。

下にスクロールして、完全な効果を確認します。親指の半径は 6px で、丸みを帯びたエッジがはっきりしています。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

鮮やかなグリーン

エコをテーマにしたサイト用の大胆な緑色のスクロールバー

モダンなデザインのスタイリッシュな紫色のスクロールバーの例。クリエイティブまたはポートフォリオWebサイトに最適です。

このスクロールバーは、ホバー時に暗くなる深い紫色の親指が付いた明るい紫色のトラックを使用しています。

下にスクロールして、完全な効果を確認します。親指の半径は 4px で、端が丸みを帯びています。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

スタイリッシュパープル

クリエイティブなプロジェクトのためのモダンな紫色のスクロールバー

よくあるご質問

Related Tools

CSSコンバーターへのレス

LessのコードをCSSに変換します。高速、簡単、安全。

SCSSからCSSへのコンバーター

SCSS コードを CSS に変換します。高速、簡単、安全。

CSS縮小ツール

CSSコードをプロフェッショナルな精度で圧縮および最適化

HTMLデコードツール

HTMLエンティティをブラウザで簡単にデコードできます。

バイナリから 10 進数

バイナリコードを10進数に簡単に変換

HSVからHEXへ

HSVカラーコードをWebデザイン用のHEX値に変換する