【CSS】レスポンシブで横スクロール可能な画像ギャラリーの作り方

概要:

この記事では、HTMLとCSSを使用してレスポンシブで横スクロール可能な画像ギャラリーを作成する方法について解説します。

1. 画像を横一列に配置

2. コンテナを横方向にスクロール

3. レスポンシブデザインの実装方法

4. スクロールバー非表示

コード

HTML

<section id="fourth4">   

    <div class="fourth4-inner">
        <a href="#" class="fourth4-thumbnail">
            <img class="fourth4-image" src="images/fourth4/1.png" alt="">
            <span class="fourth4-title">本日の〇〇 No1</span>
        </a>
        <a href="#" class="fourth4-thumbnail">
            <img class="fourth4-image" src="images/fourth4/2.png" alt="">
            <span class="fourth4-title">本日の〇〇 No2</span>
        </a>
        .
        .
        .
        .
    </div>
</section>

CSS

.fourth4-inner {
  display: flex; /* 要素をフレックスボックスとして表示 */
  gap: 24px; /* 子要素間の間隔を24pxに設定 */
  overflow: scroll; /* コンテンツが要素のサイズを超える場合にスクロールバーを表示 */
  scrollbar-width: none; /* Firefox対応のスクロールバー非表示 */
  -ms-overflow-style: none; /* Internet Explorer対応のスクロールバー非表示 */
  padding: 0 24px; /* 上下左右に24pxのパディングを持つ */
}
.fourth4-inner a {
  display: inline-block; /* インラインブロック要素として表示 */
  flex: 1; /* フレックスアイテムをフレックスコンテナの残りのスペースに合わせる */
  min-width: calc(25% - 80px); /* 最小幅を計算して設定 */
  word-break: break-all; /* 単語の途中で改行可能 */
  text-align: justify; /* テキストを両端揃えにする */
  position: relative; /* 相対位置指定 */
}
.fourth4-inner a img {
  width: 100%; /* 画像の幅を100%に設定 */
}
.fourth4-inner a .fourth4-title {
  position: absolute; /* 絶対位置指定 */
  bottom: 12px; /* 下から12pxの位置に配置 */
  left: 12px; /* 左から12pxの位置に配置 */
}

解説

■.fourth4-inner
まずdisplay: flex;で子要素を柔軟に配置するために設定して、横スクロール可能な画像ギャラリーの親要素を定義しています。
gapが子要素の内側、paddingはgapでは設定できない外側として間隔が調整され、コンテンツが画面に収まりきらない場合にはoverflow: scrollで横スクロールバーが表示されます。
また、FirefoxとInternet Explorerのブラウザに対応するためのスクロールバーの非表示も設定されています。

■.fourth4-inner a
まずmin-width: calc(25% - 80px);を設定することでどれだけ最初幅にしても親要素の25％-80px以下にはなりません。
これの意図は
①どれだけ狭くなってもコンテンツが適切に表示される
②画面の幅が広くなっても25％を超えることができる

※シンプルに20％設定とかでも問題無いと思います
※もしくは、20ｖｗ(ビューポートウィズ)とすることで⇩

paddingとgapで余白が生じ、あえて最後の要素は中途半端な表示になっています。これはユーザーにコンテンツがまだ終わっていないことを示唆し、スクロール可能であることを明示するのに役立ちます