【CSS】スクロールバーを非表示にする方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSでスクロールバーを非表示にする方法をご紹介します。

指定した表示領域の幅や高さを超えているものに関しては、縦スクロールや横スクロールさせる実装はよく行いますね。

その際に、デフォルトではスクロールバーが表示されます。

表示されても特にユーザビリティが下がるわけではないと思いますが、「デザイン的にかっこ悪いから見えなくさせたい！」という方もいらっしゃると思います。

そういう時に役に立つのが今回紹介するCSSでスクロールバーを非表示にする方法となります。

それでは見て参りましょう！

CSSでスクロールバーを非表示にしよう！
まとめ

CSSでスクロールバーを非表示にしよう！

実装のポイント

今回の実装のポイントは、

IE、Edgeでスクロールバーを非表示にするには、-ms-overflow-style: none;を指定する
Firefoxでスクロールバーを非表示にするには、scrollbar-width: none;を指定する
Chrome 、Safariでスクロールバーを非表示にするには、疑似要素の::-webkit-scrollbarに対してdisplay:none;を指定する

となります。

コードを見ながら確認していきましょう。

今回のHTML

index.html

<div class="Card">
  <div class="Card-Item">
    <a href="" class="Card-Item-ImgBox">
      <div class="Card-Item-ImgBox-Img" style="background: #eee; background-size: cover; background-size: cover;"></div>
    </a>
    <div class="Card-Item-Box">
      <p class="Card-Item-Box-Title">
        <a href="#" class="Card-Item-Box-Title-Link">Aさん</a>
      </p>
    </div>
  </div>
  <div class="Card-Item">
    <a href="" class="Card-Item-ImgBox">
      <div class="Card-Item-ImgBox-Img" style="background: #eee; background-size: cover; background-size: cover;"></div>
    </a>
    <div class="Card-Item-Box">
      <p class="Card-Item-Box-Title">
        <a href="#" class="Card-Item-Box-Title-Link">Bさん</a>
      </p>
    </div>
  </div>
  <div class="Card-Item">
    <a href="" class="Card-Item-ImgBox">
      <div class="Card-Item-ImgBox-Img" style="background: #eee; background-size: cover;"></div>
    </a>
    <div class="Card-Item-Box">
      <p class="Card-Item-Box-Title">
        <a href="#" class="Card-Item-Box-Title-Link">Cさん</a>
      </p>
    </div>
  </div>
  <div class="Card-Item">
    <a href="" class="Card-Item-ImgBox">
      <div class="Card-Item-ImgBox-Img" style="background: #eee; background-size: cover; background-size: cover;"></div>
    </a>
    <div class="Card-Item-Box">
      <p class="Card-Item-Box-Title">
        <a href="#" class="Card-Item-Box-Title-Link">Dさん</a>
      </p>
    </div>
  </div>
</div>

CSS

index.css

.Card{
  margin-top: 20px;
  padding-left: 14px;
  width: 100%;
  overflow-x: auto;
  display: flex;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.Card::-webkit-scrollbar{
  display: none;
}
@media screen and (min-width:768px) {
  .Card{
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    max-width: 500px;
  }
}
.Card-Item{
  width: calc((100% - 44px) / 3);
  flex: 0 0 auto;
}
.Card-Item:not(:first-child){
  margin-left: 8px;
}
.Card-Item-ImgBox{
  width: 100%;
}
.Card-Item-ImgBox-Img{
  border-radius: 50%;
  padding-top: 100%;
  width: 100%;
}
.Card-Item-Box{
  margin-top: 6px;
}
.Card-Item-Box-Title{
  text-align: center;
  font-size: 12px;
}

サンプル

See the Pen
qBEwoPV by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

参考 CSS スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応）YoheiM.NET

まとめ

以上、CSSでスクロールバーを非表示にする方法をご紹介しました。

最後までご高覧いただきありがとうございました！