【CSS】webkit-scrollbarでスクロールバーをデザイン

CSS

「webkit-scrollbar」は、Webkitブラウザ（Google Chrome、Safariなど）でスクロールバーのデザインをカスタマイズするためのCSSプロパティです。これを使用することで、スクロールバーの色や形状を変更することができます。

使用方法は次のようになります。

/* スクロールバー全体に適用 */
::-webkit-scrollbar {
  width: 12px; /* スクロールバーの幅 */
  background-color: #F5F5F5; /* スクロールバーの背景色 */
}

/* スクロールバーの操作部分（縦のスクロールバーの場合は上下の矢印部分）に適用 */
::-webkit-scrollbar-thumb {
  background-color: #000000; /* スクロールバーの操作部分の背景色 */
  border-radius: 10px; /* スクロールバーの操作部分の角丸 */
}

このプロパティは、Webkitブラウザに特有なものであり、他のブラウザではサポートされていないため注意が必要です。また、スクロールバーを非表示にすることもできますが、それはアクセシビリティ上の問題を引き起こすことがあるため慎重に行いましょう。