CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでカスタムスクロールバーを作成する方法｜::-webkit-scrollbarの使い方を実例付きで解説

CSSを使えば、標準のスクロールバーのデザインを自由にカスタマイズできます。本記事では、::-webkit-scrollbar系の擬似要素を活用し、スクロールバーの幅・トラック・つまみ（サム）の色や形状を変更する具体的な方法をコード例とともに解説します。

カスタムスクロールバーのコード例

以下は、ページ全体に適用されるカスタムスクロールバーを作成するHTMLとCSSの完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        height: 200vh; /* スクロールバーを表示させるため */
    }
    ::-webkit-scrollbar {
        width: 20px;
    }
    p {
        font-size: 40px;
    }
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgb(75, 22, 161);
        border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #9156ff;
    }
</style>
</head>
<body>
<h1>Custom Scrollbar Example</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, rerum. Placeat molestias 
quisquam doloremque, perferendis aspernatur quod cupiditate cumque porro cum facilis vel 
dolorem fuga dolore quae deserunt sint inventore distinctio et, modi sunt! Commodi omnis 
adipisci autem enim, perferendis, modi possimus quos, ducimus error hic natus voluptate. 
Error, rem!
</p>
</body>
</html>

各プロパティの役割

  • ::-webkit-scrollbar：スクロールバー全体の幅を指定します。この例では20pxに設定しています。
  • ::-webkit-scrollbar-track：スクロールバーの背景（トラック）部分のスタイルを定義します。内側にグレーの影をつけ、角丸を加えています。
  • ::-webkit-scrollbar-thumb：ドラッグして動かすつまみ部分のスタイルです。紫系の背景色と角丸を指定しています。
  • ::-webkit-scrollbar-thumb:hover：つまみにマウスカーソルを重ねたときの色を明るい紫（#9156ff）に変化させています。

出力結果

上記のコードを実行すると、次のようにカスタマイズされたスクロールバーが表示されます。

CSSでカスタムスクロールバーを作成する方法｜::-webkit-scrollbarの使い方を実例付きで解説

ブラウザ対応に関する注意点

::-webkit-scrollbar系の擬似要素は、Chrome・Safari・OperaなどWebKit／Blinkエンジンを採用するブラウザでのみ有効です。Internet Explorer、旧Edge、Firefoxでは動作しないため、クロスブラウザ対応が必要な場合は注意しましょう。

Firefoxでは、標準化されたscrollbar-widthおよびscrollbar-colorプロパティを使用することで、スクロールバーの太さや配色をある程度制御できます。主要ブラウザすべてで統一されたデザインを目指す場合は、これらのプロパティとの併用やJavaScriptライブラリの導入も検討するとよいでしょう。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>