CSS

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

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

-webkit-scrollbarとは

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

-webkit-scrollbarの使いどころ

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

対応ブラウザ

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

CSSの【-webkit-scrollbar】を使って横スクロールバーをデザインしたデモページ

実際にデザインされた横スクロールバーを含むデモページは、指定されたリンクからアクセスできます。このデモを通じて、実際のウェブページ上で-webkit-scrollbarをどのように利用できるかを確認することができます。

CSSの【-webkit-scrollbar】を使って横スクロールバーをデザインしたデモページ

まとめ

-webkit-scrollbarを使用することで、ウェブページやアプリケーションのスクロールバーを効果的にカスタマイズし、ユーザー体験を向上させることが可能です。
ただし、ブラウザの互換性を考慮し、すべてのユーザーが一貫した体験を得られるようにすることが重要です。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。