CSSセレクターを使用したスクロールバーのカスタマイズ方法

1. CSSの::-webkit-scrollbar疑似要素を使用する方法:

   /* スクロールバー全体 */
   ::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
   }
   /* スクロールバーのトラック部分 */
   ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
   }
   /* スクロールバーのハンドル（つまみ）部分 */
   ::-webkit-scrollbar-thumb {
    background-color: #888;
   }
   /* スクロールバーのハンドルをドラッグ中のスタイル */
   ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
   }

2. CSSのscrollbar-widthプロパティを使用する方法（FirefoxやEdgeなど一部のブラウザでサポート）:

   /* スクロールバーを非表示にする */
   body {
    scrollbar-width: none;
   }
   /* スクロールバーのカスタマイズ */
   body::-webkit-scrollbar {
    width: 10px;
   }
   body::-webkit-scrollbar-track {
    background-color: #f1f1f1;
   }
   body::-webkit-scrollbar-thumb {
    background-color: #888;
   }
   body::-webkit-scrollbar-thumb:hover {
    background-color: #555;
   }

3. CSSのscrollbar-colorプロパティを使用する方法（FirefoxやEdgeなど一部のブラウザでサポート）:

   /* スクロールバーのカスタマイズ */
   body {
    scrollbar-color: #888 #f1f1f1;
    scrollbar-width: thin;
   }
   body::-webkit-scrollbar-thumb:hover {
    background-color: #555;
   }

これらの方法は、スクロールバーの幅、トラックの背景色、ハンドル（つまみ）の背景色など、さまざまなスタイルのカスタマイズが可能です。ブラウザによってサポートされるプロパティや疑似要素が異なるため、適切な方法を選択してください。