Webデザイナー必見！CSSの-webkit-scrollbarで横スクロールバーをカスタマイズする方法｜DAD UNION

Webサイトやアプリケーションにおいて、スクロールバーはユーザーがコンテンツをナビゲートするために不可欠な要素です。デフォルトのスクロールバーは機能的ですが、デザインの観点からは必ずしも理想的とは言えません。ここでは、CSSの-webkit-scrollbarプロパティを使って、横スクロールバーをデザインし、ウェブサイトの見た目をカスタマイズする方法を紹介します。

Contents

-webkit-scrollbarとは
-webkit-scrollbarの使いどころ
対応ブラウザ
注意点
実践例：CSSの-webkit-scrollbarを使って横スクロールバーをデザイン
- CSSコード
- HTMLコード
CSSの【-webkit-scrollbar】を使って横スクロールバーをデザインしたデモページ
まとめ

-webkit-scrollbarとは

-webkit-scrollbarは、Webkitエンジンを使用するブラウザ（Chrome、Safariなど）でスクロールバーの見た目をカスタマイズするためのCSSプロパティです。このプロパティを使用することで、スクロールバーの幅や色、背景色などを自由に変更できます。

-webkit-scrollbarの使いどころ

このプロパティは、ウェブページやアプリケーションのデザインに一貫性を持たせたい場合や、ブランドカラーをスクロールバーに反映させたい場合に特に有効です。また、ユーザーインターフェイスをより洗練されたものにしたいウェブデザイナーや開発者にとっても重宝されます。

対応ブラウザ

-webkit-scrollbarプロパティは、Webkitエンジンを使用するブラウザでのみ機能します。これには、Google ChromeやSafariが含まれますが、FirefoxやInternet Explorerではサポートされていないことに注意が必要です。Firefoxで類似のカスタマイズを行う場合は、scrollbar-widthやscrollbar-colorプロパティを使用します。

注意点

-webkit-scrollbarの使用は、ブラウザの互換性に影響を与える可能性があるため、注意して使用する必要があります。すべてのユーザーに対して一貫した体験を提供するためには、対応していないブラウザに対するフォールバックスタイルを用意することが重要です。

実践例：CSSの-webkit-scrollbarを使って横スクロールバーをデザイン

CSSコード

以下のCSSコードは、横スクロールバーをデザインする基本的な例を示しています。.scrollAreaクラスに適用されるスタイルを通じて、スクロールバーの幅、トラックの背景色、サム（スクロールバーのつまみ部分）の背景色をカスタマイズしています。

<style>
body {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
h1{
    text-align: center;
    font-size: 20px;
    padding: 10px 0 20px 0;
    line-height: 1.8em;
}

/*スクロールバーのstyle*/
.scrollArea::-webkit-scrollbar{
  width: 16px;
  height: 16px;
}
.scrollArea::-webkit-scrollbar-track{
  background-color: #ccc;
}
.scrollArea::-webkit-scrollbar-thumb{
  background-color: #7F00FF;
}

/*FireFoxのみ適用*/
@-moz-document url-prefix() {
  .scrollArea{
    scrollbar-width: thin;
    scrollbar-color: #7F00FF #ccc;
  }
}

.scrollArea{
  width: 800px;
  margin: 0 auto;
  position: relative;
  overflow-y: hidden;
  overflow-x: scroll;
}
ul {
  width: 2320px;
  padding: 0 0 20px 0;
  margin: 0;
  height: 300px;
  display: flex;
  position: relative;
}
ul li{
  width: 300px;
  height: 300px;
  margin: 0 20px 0 0;
  float: left;
  background-color: #000;
  list-style: none;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 300px;
}
ul li:last-child{
  margin: 0;
}
</style>

HTMLコード

HTML構造はシンプルです。scrollAreaクラスを持つdiv要素内に、横に並んだ複数のli要素を含むulを配置しています。これにより、横スクロールが必要な領域を作成しています。

<h1>CSSの【-webkit-scrollbar】を使って横スクロールバーをデザインしてます。</h1>

<div class="scrollArea">
  <ul>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
    <li>ボックスエリア</li>
  </ul>
</div>