CSSでスクロールバーをカスタマイズしてWebサイトをより魅力的にする

2024-04-26

CSSでカスタマイズされたスクロールバーをDivで実装する方法

必要なもの

HTMLファイル
CSSファイル

手順

HTMLでDiv要素を作成する

まず、スクロールバーを表示したいコンテンツを囲むDiv要素を作成する必要があります。

<div id="my-div">
  </div>

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

次に、CSSファイルを使用してスクロールバーの外観をカスタマイズします。以下のプロパティを使用して、スクロールバーの色、幅、高さ、サムスライダーなどを変更できます。

scrollbar-width: スクロールバーの幅を設定します。

以下の例は、スクロールバーを青色に変更する方法を示しています。

#my-div::-webkit-scrollbar {
  width: 10px; /* スクロールバーの幅 */
  background-color: #007bff; /* スクロールバーの色 */
}

#my-div::-webkit-scrollbar-thumb {
  background-color: #0056b3; /* サムスライダーの色 */
}

#my-div::-webkit-scrollbar-track {
  background-color: #f8f9fa; /* トラックの色 */
}

注: 上記のプロパティは、Webブラウザによってサポートされている場合があります。すべてのブラウザで同じように表示されない可能性があることに注意してください。

その他のカスタマイズ

上記のプロパティに加えて、以下のプロパティを使用してスクロールバーをさらにカスタマイズすることができます。

margin: スクロールバーの余白を設定します。

応用例

CSSでカスタマイズされたスクロールバーを使用して、以下のことができます。

長いコンテンツページをより読みやすくする
スクロールバーをWebサイトのデザインと一致させる
スクロールバーをより目立たせるようにする
スクロールバーをより使いやすくする

これらのリソースは、CSSでカスタマイズされたスクロールバーについてさらに詳しく学ぶのに役立ちます。

CSSでカスタマイズされたスクロールバーをDivで実装するサンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでカスタマイズされたスクロールバー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="my-div">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam eget urna semper ullamcorper. Nullam quis quam quis tortor aliquam semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ac quam sit amet elit placerat varius. Mauris vel orci at magna tincidunt ullamcorper sit amet non mauris. Nulla facilisi. Donec neque metus, semper quis lectus quis, tempor sit amet ipsum. Proin vel enim ut quam ullamcorper pretium. Morbi vel diam sit amet dui laoreet ullamcorper. Sed euismod risus eu libero laoreet, a ullamcorper quam fermentum.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam eget urna semper ullamcorper. Nullam quis quam quis tortor aliquam semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ac quam sit amet elit placerat varius. Mauris vel orci at magna tincidunt ullamcorper sit amet non mauris. Nulla facilisi. Donec neque metus, semper quis lectus quis, tempor sit amet ipsum. Proin vel enim ut quam ullamcorper pretium. Morbi vel diam sit amet dui laoreet ullamcorper. Sed euismod risus eu libero laoreet, a ullamcorper quam fermentum.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam eget urna semper ullamcorper. Nullam quis quam quis tortor aliquam semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ac quam sit amet elit placerat varius. Mauris vel orci at magna tincidunt ullamcorper sit amet non mauris. Nulla facilisi. Donec neque metus, semper quis lectus quis, tempor sit amet ipsum. Proin vel enim ut quam ullamcorper pretium. Morbi vel diam sit amet dui laoreet ullamcorper. Sed euismod risus eu libero laoreet, a ullamcorper quam fermentum.
  </div>
</body>
</html>

CSS

#my-div {
  width: 300px;
  height: 200px;
  overflow-y: auto; /* 垂直方向のスクロールバーを表示 */
  margin: 20px auto;
}

#my-div::-webkit-scrollbar {
  width: 10px; /* スクロールバーの幅 */
  background-color: #f0f0f0; /* スクロールバーの色 */
}

#my-div::-webkit-scrollbar-thumb {
  background-color: #333; /* サムスライダーの色 */
}

#my-div::-webkit-scrollbar-track {
  background-color: #fff; /* トラックの色 */
}