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

CSSでスクロールバーを作る方法や非表示にする方法を学び、応用例を知ってウェブサイトのデザインに役立てよう。CSS
この記事は約6分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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

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

そこで、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プロパティを使用することで、スクロールバーの背景色を変更することができます。

まとめ

この記事では、CSSを使ってスクロールバーをカスタマイズする方法を解説しました。

スクロールバーの色や幅を変更したり、非表示にする方法も同時に説明しました。

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

ウェブサイトのデザインにこだわりたい方は、ぜひスクロールバーのカスタマイズに挑戦してみてください。