CSSでスクロールバーを作る方法と非表示にする方法、応用例まで徹底解説！

はじめに
●スクロールバーを作る方法
- ○scrollbar-color
- ○scrollbar-width
●スクロールバーを非表示にする方法
●応用例
まとめ

はじめに

ウェブサイトを作成する上で、スクロールバーは必須の要素です。

しかし、ブラウザによってはスクロールバーのデザインが崩れたり、邪魔になったりすることがあります。

そこで、CSSを使ってスクロールバーをカスタマイズする方法があります。

この記事では、CSSを何も知らない初心者の方でも分かるように、スクロールバーの作り方、非表示にする方法、そして応用例まで詳しく解説します。

●スクロールバーを作る方法

まずは、スクロールバーを作る方法から解説していきます。

スクロールバーのデザインは、ブラウザによって異なるため、CSSを使ってカスタマイズする必要があります。

スクロールバーのカスタマイズには、下記のプロパティが使用できます。

scrollbar-color
scrollbar-width

まずは、プロパティの説明をしていきます。

○scrollbar-color

scrollbar-colorプロパティは、スクロールバーの色を変更するために使用します。

このプロパティには、以下の値が使用できます。

auto
デフォルト値であるautoを指定することで、ブラウザが自動的に色を設定します。
色名やRGB値などのカラーコードを指定することで、スクロールバーの色を変更できます。ただし、全てのブラウザで対応しているわけではないため、注意が必要です。

○scrollbar-width

scrollbar-widthプロパティは、スクロールバーの幅を変更するために使用します。

このプロパティには、次の値が使用できます。

auto
thin
thick
数値

デフォルト値であるautoを指定することで、ブラウザが自動的に幅を設定します。

また、thinやthickを指定することで、スクロールバーの幅を変更できます。

さらに、数値を指定することで、ピクセル単位でスクロールバーの幅を指定することもできます。

それでは、実際にサンプルコードを見てみましょう。

/* スクロールバーの色を変更する */
::-webkit-scrollbar {
  background-color: #f5f5f5;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

/* スクロールバーの幅を変更する */
::-webkit-scrollbar {
  background-color: #f5f5f5;
  width: 20px;
}

/* スクロールバーを非表示にする */
::-webkit-scrollbar {
  display: none;
}

上記のサンプルコードは、Google Chromeなどの一部のブラウザでのみ使用可能なプロパティを使用しています。

実際に表示してみると、スクロールバーの色や幅を変更することができます。

注意点としては、ブラウザによって異なるため、全てのブラウザで同じ表示になるわけではないことです。

特に、Internet Explorerでは、スクロールバーのカスタマイズが非常に限定的であるため、注意が必要です。

●スクロールバーを非表示にする方法

次に、スクロールバーを非表示にする方法を解説します。

スクロールバーが邪魔になる場合や、ウェブサイトのデザインに合わせて非表示にしたい場合には、次の方法が使えます。

/* スクロールバーを非表示にする */
::-webkit-scrollbar {
  display: none;
}

このように、::-webkit-scrollbarプロパティのdisplayをnoneにすることで、スクロールバーを非表示にすることができます。

ただし、この方法はGoogle Chromeなどの一部のブラウザでしか使用できないため、注意が必要です。

また、スクロールバーを非表示にすると、スクロールバーがないことに気づかないユーザーがいるため、アクセシビリティに配慮したデザインを心がける必要があります。

●応用例

最後に、スクロールバーを使ったデザインの応用例を紹介します。

スクロールバーは、単なるスクロールの機能だけでなく、デザインの一部としても活用できます。

スクロールバーを使ったデザインの例です。

/* スクロールバーを太くし、グラデーションをつける */
::-webkit-scrollbar {
  background-color: #f5f5f5;
  width: 15px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #c1c1c1 0%, #6a6a6a 100%);
}

/* スクロールバーを薄くし、シャドウをつける */
::-webkit-scrollbar {
  background-color: #f5f5f5;
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

上記のサンプルコードでは、スクロールバーにグラデーションやシャドウをつけることで、デザイン性を高めています。

また、スクロールバーの色や幅を変更することで、ウェブサイト全体のデザインに合わせたスクロールバーを作ることができます。

さらに、スクロールバーを使ったデザインの応用例として、水平スクロールバーのカスタマイズもあります。

次のサンプルコードは、水平スクロールバーを変更するものです。

/* 水平スクロールバーを変更する */
::-webkit-scrollbar {
  height: 15px;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

水平スクロールバーは、heightプロパティを使用して幅を指定することができます。

また、::-webkit-scrollbar-trackプロパティを使用することで、スクロールバーの背景色を変更することができます。