HTML/CSSだけでカルーセルを作る方法【HTML/CSS・サンプルコード付き】

HTML/CSSだけでカルーセルを作る方法

HTMLとCSSだけでカルーセルを作る方法を紹介します。このサンプルでは、複数のカードを横方向に並べ、表示領域を左右へスクロールして続きのカードを確認できるカルーセルを作成します。JavaScriptや外部ライブラリは使用せず、CSSの横スクロールとCSS Scroll Snapを利用して、シンプルな構成で実装します。

CSS Scroll Snapは、スクロールを止めたときにカードなどの要素を決められた位置へ揃えやすくするCSSの機能です。このカルーセルでは、横方向へスクロールしたあとにカードの先頭位置が表示領域へ揃うように設定します。自由な横スクロールだけの場合に起こりやすい中途半端な位置での停止を抑え、複数のカードを順番に確認しやすくできます。

PCでは複数のカードを同時に表示し、横方向へスクロールして続きのカードを確認できます。スマートフォンでは画面幅に合わせてカードの横幅を調整し、指で左右へスワイプして操作できます。商品一覧、関連記事、サービス紹介、プロフィール一覧など、複数のコンテンツを横方向に並べて見せたい場面に利用できます。JavaScriptを使わず、HTMLとCSSだけでシンプルなカルーセルを設置したい場合に使いやすい構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

HTML/CSSだけのカルーセル

カード部分を左右へスクロールすると、続きのカードを確認できます。

HTML

HTMLでカルーセル全体と表示するカードを配置します。

CSS

CSSでカードを横並びにしてスクロールできるようにします。

Scroll Snap

スクロールを止めたときにカードの位置が揃うようにします。

レイアウト

複数のカードを横方向へ連続して並べて表示します。

レスポンシブ

スマートフォンでは左右へスワイプして閲覧できます。

カード部分を左右へスクロールしてください。スクロールを止めると、CSS Scroll Snapによってカードの先頭位置が揃います。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">

<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <!-- ページタイトル -->
  <title>HTML/CSSだけのカルーセル</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!-- カルーセル全体 -->
  <div class="css-only-carousel_wrap">

    <!-- タイトル -->
    <div class="css-only-carousel_title">
      HTML/CSSだけのカルーセル
    </div>

    <!-- 説明文 -->
    <p class="css-only-carousel_text">
      カード部分を左右へスクロールすると、続きのカードを確認できます。
    </p>

    <!-- 横スクロールするカード一覧 -->
    <div class="css-only-carousel_view">

      <!-- 1枚目のカード -->
      <div class="css-only-carousel_card">

        <!-- カードタイトル -->
        <div class="css-only-carousel_card-title">
          HTML
        </div>

        <!-- カード本文 -->
        <p class="css-only-carousel_card-text">
          HTMLでカルーセル全体と表示するカードを配置します。
        </p>

      </div>

      <!-- 2枚目のカード -->
      <div class="css-only-carousel_card">

        <!-- カードタイトル -->
        <div class="css-only-carousel_card-title">
          CSS
        </div>

        <!-- カード本文 -->
        <p class="css-only-carousel_card-text">
          CSSでカードを横並びにしてスクロールできるようにします。
        </p>

      </div>

      <!-- 3枚目のカード -->
      <div class="css-only-carousel_card">

        <!-- カードタイトル -->
        <div class="css-only-carousel_card-title">
          Scroll Snap
        </div>

        <!-- カード本文 -->
        <p class="css-only-carousel_card-text">
          スクロールを止めたときにカードの位置が揃うようにします。
        </p>

      </div>

      <!-- 4枚目のカード -->
      <div class="css-only-carousel_card">

        <!-- カードタイトル -->
        <div class="css-only-carousel_card-title">
          レイアウト
        </div>

        <!-- カード本文 -->
        <p class="css-only-carousel_card-text">
          複数のカードを横方向へ連続して並べて表示します。
        </p>

      </div>

      <!-- 5枚目のカード -->
      <div class="css-only-carousel_card">

        <!-- カードタイトル -->
        <div class="css-only-carousel_card-title">
          レスポンシブ
        </div>

        <!-- カード本文 -->
        <p class="css-only-carousel_card-text">
          スマートフォンでは左右へスワイプして閲覧できます。
        </p>

      </div>

    </div>

  </div>

</body>

</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白をなくす */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との余白が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* カルーセル内のサイズ計算 */
.css-only-carousel_wrap,
.css-only-carousel_wrap *{
  box-sizing:border-box; /* paddingとborderを要素の横幅・高さに含める */
}

/* カルーセル全体 */
.css-only-carousel_wrap{
  width:100%; /* 親要素に対して横幅100%で表示する */
  max-width:900px; /* 最大横幅。値を大きくするとカルーセル全体が広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右を中央に配置する */
  padding:32px; /* 内側余白。値を大きくすると周囲の余白が広がる */
  border:1px solid #dbe4f3; /* 枠線。1pxを大きくすると線が太くなる */
  border-radius:20px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* カルーセル全体の背景色 */
  color:#111827; /* カルーセル全体の基本文字色 */
  font-family:sans-serif; /* カルーセル内で使用するフォント */
}

/* タイトル */
.css-only-carousel_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* 文字サイズ。値を大きくするとタイトルが大きくなる */
  font-weight:700; /* 文字の太さ。値を大きくすると太くなる */
  line-height:1.5; /* 行の高さ。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.css-only-carousel_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとカードとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 行の高さ。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* 横スクロールするカード一覧 */
.css-only-carousel_view{
  display:flex; /* カードを横方向に並べる */
  gap:16px; /* カード間隔。値を大きくするとカード同士の間隔が広がる */
  overflow-x:auto; /* 横にはみ出したカードをスクロールできるようにする */
  padding:0 0 16px; /* 下側16pxの余白。値を大きくするとスクロールバーとの間隔が広がる */
  scroll-snap-type:x mandatory; /* 横方向のスクロール終了時にスナップ位置へ揃える */
  scrollbar-width:thin; /* Firefoxでスクロールバーを細く表示する */
  scrollbar-color:#2563eb #dbeafe; /* Firefoxのつまみと背景の色 */
}

/* WebKit系ブラウザのスクロールバー */
.css-only-carousel_view::-webkit-scrollbar{
  height:10px; /* スクロールバーの高さ。値を大きくすると太くなる */
}

/* スクロールバーの背景 */
.css-only-carousel_view::-webkit-scrollbar-track{
  border-radius:10px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#dbeafe; /* スクロールバーの背景色 */
}

/* スクロールバーのつまみ */
.css-only-carousel_view::-webkit-scrollbar-thumb{
  border-radius:10px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* スクロールバーのつまみの色 */
}

/* 各カード */
.css-only-carousel_card{
  flex:0 0 calc((100% - 32px) / 3); /* 16pxの間隔2か所を除き、3枚を同時表示する */
  min-width:0; /* カードが内容によって必要以上に広がるのを防ぐ */
  padding:28px 22px; /* 上下28px・左右22px。値を大きくすると内側余白が広がる */
  border:1px solid #dbe4f3; /* 枠線。1pxを大きくすると線が太くなる */
  border-radius:16px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* カードの背景色 */
  scroll-snap-align:start; /* スクロール終了時にカードの先頭位置を揃える */
}

/* カードタイトル */
.css-only-carousel_card-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると本文との間隔が広がる */
  color:#111827; /* カードタイトルの文字色 */
  font-size:22px; /* 文字サイズ。値を大きくするとタイトルが大きくなる */
  font-weight:700; /* 文字の太さ。値を大きくすると太くなる */
  line-height:1.5; /* 行の高さ。値を大きくすると行間が広がる */
}

/* カード本文 */
.css-only-carousel_card-text{
  margin:0; /* ブラウザ標準の外側余白をなくす */
  color:#4b5563; /* カード本文の文字色 */
  font-size:15px; /* 文字サイズ。値を大きくすると本文が大きくなる */
  line-height:1.8; /* 行の高さ。値を大きくすると行間が広がる */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12px。値を大きくすると画面端との余白が広がる */
  }

  /* カルーセル全体 */
  .css-only-carousel_wrap{
    padding:24px 18px; /* 上下24px・左右18px。値を大きくすると内側余白が広がる */
  }

  /* 横スクロールするカード一覧 */
  .css-only-carousel_view{
    gap:12px; /* カード間隔。値を大きくするとカード同士の間隔が広がる */
  }

  /* 各カード */
  .css-only-carousel_card{
    flex:0 0 85%; /* 表示領域の85%をカード幅にする。値を大きくするとカードが広がる */
    padding:26px 22px; /* 上下26px・左右22px。値を大きくすると内側余白が広がる */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLにカルーセル全体と5枚のカードを配置し、CSSでカードを横方向に並べてスクロールできるようにしています。JavaScriptや外部ライブラリは使用せず、CSS Scroll Snapを利用して、スクロールを止めたときにカードの先頭位置が揃うカルーセルを実装します。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlには、カルーセルのタイトル、説明文、横スクロールする表示領域、5枚のカードを記述しています。style.cssには、カルーセル全体のデザイン、カードの横並び、横スクロール、CSS Scroll Snap、スクロールバー、カードの表示幅、画面幅に応じたレスポンシブ対応を記述しています。

設置方法・使い方
index.htmlとstyle.cssをsampleフォルダ内の同じ階層へ配置し、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssを読み込むため、JavaScriptファイルは必要ありません。カルーセルのカード部分を左右へスクロールすると続きのカードを確認でき、スクロールを止めるとCSS Scroll Snapによってカードの先頭位置が揃います。

カスタマイズできる内容
カードのタイトルや本文はindex.htmlで変更できます。カードを追加または削除する場合も、css-only-carousel_cardの要素を追加・削除してください。style.cssでは、カルーセル全体の横幅、余白、背景色、枠線、角丸、カード間隔、カード幅、文字サイズ、スクロールバーの太さや色などを変更できます。CSS Scroll Snapは、親要素のscroll-snap-type:x mandatory;で横方向のスナップを有効にし、各カードのscroll-snap-align:start;でカードの先頭位置を揃える仕組みです。

数値調整
style.cssのbodyでは、margin:0;でブラウザ標準の外側余白をなくし、padding:40px 20px;でページの上下を40px、左右を20px空けています。

.css-only-carousel_wrapのwidth:100%;は親要素に合わせて横幅を縮小する指定です。max-width:900px;はカルーセル全体の最大横幅、margin:40px auto;の40pxは上下余白、padding:32px;は内側余白です。border:1pxの1pxは枠線の太さ、border-radius:20px;の20pxは全体の角丸です。

.css-only-carousel_titleでは、margin:0 0 12px;の12pxで説明文との間隔を設定し、font-size:22px;で文字サイズ、font-weight:700;で文字の太さ、line-height:1.5;で行の高さを設定しています。

.css-only-carousel_textでは、margin:0 0 28px;の28pxでカードとの間隔を設定し、font-size:16px;で文字サイズ、line-height:1.8;で行の高さを設定しています。

.css-only-carousel_viewのgap:16px;はカード同士の間隔です。padding:0 0 16px;の16pxはカードとスクロールバーの間に設ける余白です。::-webkit-scrollbarのheight:10px;はスクロールバーの高さ、スクロールバーの背景とつまみに指定したborder-radius:10px;は角丸です。

.css-only-carousel_cardのflex:0 0 calc((100% - 32px) / 3);では、表示領域の100%から16pxのカード間隔2か所分となる32pxを引き、3で割ることでPCで3枚のカードを同時表示しています。min-width:0;は内容によってカードが必要以上に広がるのを防ぐ指定です。padding:28px 22px;は上下28px・左右22pxの内側余白、border:1pxは枠線の太さ、border-radius:16px;はカードの角丸です。

.css-only-carousel_card-titleでは、margin:0 0 12px;の12pxで本文との間隔を設定し、font-size:22px;で文字サイズ、font-weight:700;で文字の太さ、line-height:1.5;で行の高さを設定しています。.css-only-carousel_card-textでは、margin:0;で標準余白をなくし、font-size:15px;で文字サイズ、line-height:1.8;で行の高さを設定しています。

レスポンシブ対応
style.cssでは@media (max-width:640px)を使用し、画面幅640px以下でスマートフォン向けの表示へ変更します。ページ全体のpaddingを上下24px・左右12px、カルーセル全体を上下24px・左右18pxに変更します。カード間隔は16pxから12pxへ狭くし、カード幅を85%にすることで、1枚のカードを大きく表示しながら次のカードの一部が見えるようにしています。カードの内側余白は上下26px・左右22pxに変更します。PCでは3枚を同時表示し、スマートフォンでは左右へスワイプして続きのカードを確認できます。