スクロールバーのCSSジェネレーター
ブラウザ標準のスクロールバーを、サイトのデザインに合わせた配色や形状に変更するCSSを生成します。
プレビュー
<div class="scrollbar-target" style="width: 100%; height: 300px; overflow: auto; border: 1px solid #ddd;">
<div style="height: 1000px; background: linear-gradient(to bottom, #f9f9f9, {{thumb_color}}22);">
<!-- スクロール確認用の長いコンテンツ -->
</div>
</div>/* =========================================================
スクロールバーのカスタマイズ
※ Chrome / Edge / Safari 等の Webkit系ブラウザで有効です
=========================================================
ページ全体のスクロールバーを変更する場合は、
セレクタの「.scrollbar-target」を「body」に書き換えてください。
========================================================= */
/* 1. スクロールバー全体の太さ */
.scrollbar-target::-webkit-scrollbar {
width: {{bar_width}}px;
height: {{bar_width}}px;
}
/* 2. つまみ部分（動くパーツ） */
.scrollbar-target::-webkit-scrollbar-thumb {
background-color: {{thumb_color}};
border-radius: {{thumb_radius}}px;
/* 背景と同じ色の境界線（border）を付けることで、
つまみを少し細く見せ、周囲に余白（隙間）を作ることができます */
border: 3px solid {{track_color}};
}
/* 3. 背景部分（移動するレールのパーツ） */
.scrollbar-target::-webkit-scrollbar-track {
background-color: {{track_color}};
border-radius: {{thumb_radius}}px;
}機能、使い方
- ブラウザ標準の味気ないスクロールバーを、サイトの配色や雰囲気に合わせて自由にカスタマイズします。
- レスポンシブ対応: Chrome, Edge, Safari などの Webkit 系ブラウザに加え、`@supports` を使用した Firefox 用の記述も同時生成します。
- モダンデザイン: つまみにボーダーを設定することで、背景から浮き上がったような「フロートデザイン」を簡単に再現できます。
- 特定の要素（ `div` や `textarea` など）だけでなく、クラス名を `body` に変更することでページ全体のスクロールバーにも適用可能です。
実装のヒント
Webkit系ブラウザでは::-webkit-scrollbar関連の擬似要素を使用します。Firefox はscrollbar-widthと
scrollbar-colorのプロパティのみをサポートしているため、現在は角丸などの詳細な装飾は Webkit 系のみの対応となります。
太さを `20px` 以上にする場合は、つまみの角丸も大きめに設定すると、よりモダンで親しみやすい UI に仕上がります。
