夢みるゴリラ
夢みるゴリラ
  • 作成日：

CSS + α で画像を横スクロールさせる方法 - スマホでもスクロールバーを常に表示させる

CSSで画像を横スクロールさせる方法 - スマホでもスクロールバーを常に表示させる

今回はCSSで複数の画像を横スクロールさせる方法について説明します。

・デモサイト

前提条件は以下です。

  • 画像の横スクロールはCSSで行う
  • PCでもスマホでも、スクロールバーは常に表示させる（JavaScript）
  • スクロールバーの色を変更する

説明する環境は以下です。

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.57.0
この記事の目次

CSSで画像を横スクロールさせる方法

画像を横スクロールさせるときに注意する点はスクロールバーの表示です。macOSではスクロール領域でマウスを動かさないと表示されませんし、iOSではスクロール領域をタップして指を動かしている間しかスクロールバーが表示されません。（Andoroidは常に表示されている）

CSSだけでスクロールバーを常に表示させる方法やデザインを変更する方法はありますが、macOSでは機能しますが、iOSでは機能しません。

そこでスクロールバーについてはsimplebar.jsを使って実装します。

simplebar.jsを読み込む

CDNが用意されているので、以下のようにCSSとJS分のファイルを読み込みます。

<!-- simplebar専用のCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.css"/>
<!-- simplebar.js -->
<script src="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.js"></script>

ダウンロードして読み込みたい方は以下の公式ページをどうぞ。

参考
SimpleBar.js
SimpleBar.js公式

HTMLに書くこと

<div class="p-slide">
  <div class="p-slide__inner" >
    <div class="p-slide-mask"></div>
      <div class="p-slide-scroll" data-simplebar data-simplebar-auto-hide="false">
        <div class="p-slide__main">
          <!-- 画像1枚分 -->
          <a href="#" class="p-slide__block">
            <div class="p-slide__img">
              <img src="https://yumegori.com/wp-content/uploads/2021/11/scrollbar01.jpg" alt="" />
            </div>
          </a>
          <!-- 画像1枚分 -->
          <a href="#" class="p-slide__block">
            <div class="p-slide__img">
              <img src="https://yumegori.com/wp-content/uploads/2021/11/scrollbar02.jpg" alt="" />
            </div>
          </a>
           <!-- 2枚目以降は省略 -->
      </div>
    </div>
  </div>
</div>

ポイントは４行目に指定している以下の２つです。

  • data-simplebar … simplebar.jsのターゲットとなる要素に指定する
  • data-simplebar-auto-hide="false" … スクロールバーを常に表示させる指定

data属性で指定するメリットは、jsファイルを用意してsimplebarの指定について書く必要がないことです。

CSSに書くこと

.p-slide {
  padding-left: 15px;
  padding-right: 15px;
}

.p-slide__inner {
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; /*-- はみ出した要素を非表示にする --*/
}

.p-slide-mask { /*-- ドロップシャドウ用 --*/
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /*-- 下にある要素をクリックできるようにする --*/
  box-shadow: 10px 0 14px -14px black inset, -10px 0 14px -14px black inset;
  z-index: 1;
}

.p-slide__main {
  display: flex; /*-- 横に並べるのに必要 --*/
  margin-left: -10px;
  padding-bottom: 17px;
}

.p-slide__block {
  flex: 0 0 calc(30% - 10px); /*-- 横に並べるのに必要 --*/
  margin-left: 10px;
}

.p-slide__img img {
  width: 100%;
}

.simplebar-scrollbar::before { /*-- スクロールバー自体の色を変更 --*/
  background-color: #debc00;
}

/*-- スクロールバーが動く領域の背景色の変更 お好みで
.simplebar-track {
   background-color: #f6f6f6;
 }
--*/

.simplebar-content-wrapper::-webkit-scrollbar { /*-- iOSでデフォルトのスクロールバーを非表示 --*/
  display: none;
  -webkit-appearance: none;
}

CSSの指定について簡単に説明します。

横並びに必要な指定

重要な指定だけ下にピックアップしました。

.p-slide__inner {
  overflow: hidden; /*-- はみ出した要素を非表示にする --*/
}
.p-slide__main {
  display: flex; /*-- 横に並べるのに必要 --*/
  margin-left: -10px;
}
.p-slide__block {
  flex: 0 0 calc(30% - 10px); /*-- 横に並べるのに必要 --*/
  margin-left: 10px;
}

flexboxで横並びにしているので、クラス名p-side__blockに対してwidthを%で指定してしまうとスクロールしてくれません。スクロールさせるためにはflex-growとflex-shrinkを0にして、flex-basisで数値を指定する必要があります。（flex: 0 0 calc(30% - 10px)の部分）

スクロールバーのデザインを変える

.simplebar-scrollbar::before { /*-- スクロールバー自体の色を変更 --*/
  background-color: #debc00;
}

/*-- スクロールバーが動く領域の背景色の変更 お好みで
.simplebar-track {
   background-color: #f6f6f6;
 }
--*/

simplebar.jsではスクロールバー自体の色、それからスクロールバー移動領域の色を変更するためのクラス名が用意されています。

デフォルトのスクロールバーを非表示にする

.simplebar-content-wrapper::-webkit-scrollbar { /*-- iOSでデフォルトのスクロールバーを非表示 --*/
  display: none;
  -webkit-appearance: none;
}

MacOSではsimplebar.jsを使っていればデフォルトのスクロールバーは表示されませんが、iOSでは表示されてしまいます。これだとスクロールバーが２つあるように見えてしまうので、デフォルトのスクロールバーを非表示にしています。（Andoroidもこの設定で非表示になる）

スクロール領域の左右にドロップシャドウ

.p-slide-mask { /*-- ドロップシャドウ用 --*/
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /*-- 下にある要素をクリックできるようにする --*/
  -webkit-box-shadow: 10px 0 14px -14px black inset, -10px 0 14px -14px black inset;
  box-shadow: 10px 0 14px -14px black inset, -10px 0 14px -14px black inset;
  z-index: 1;
}

スクロール領域の左右にドロップシャドウをつけています。pointer-events: noneの指定がないとドロップシャドウを指定した要素の、下にある要素にクリックできなくなるので必ず指定しましょう。

JavaScriptで書くこと

今回はHTML側でdata属性を使ってsimplebar.jsを動かしているのでJavaScript側で書くことはありません。
data属性を使わず、JavaScript側でsimplebar.jsを指定したいなら以下のように書くことができます。

//HTML側でdata属性で指定せず、JavaScript側で指定する場合
new SimpleBar(document.getElementById("ここにid名を指定"), { autoHide: false });

さいごに

今回はCSSで複数の画像を横スクロールさせる方法について説明しました。スクロールバーについて、iOSでは横スクロールさせるとき以外は非表示になってしまうので、JavaScriptで表示の設定をする必要があります。（CSSだけのカスタマイズでは効かない）

画像だけではなく、テキストも入ったブログカードのようなデザインも横スクロールできます。使い方の幅が広いので試してみてください。

こちらの記事も読まれています