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

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

HTML/CSSだけでカルーセルを作る方法を紹介します。このサンプルでは、JavaScriptを使用せず、HTMLのラジオボタンとlabel要素、CSSの:checkedを組み合わせてカードを1枚ずつ切り替えます。左右の操作ボタンまたは下部のドットをクリックすると、選択したカードへ切り替わる仕組みです。

商品紹介、サービス案内、実績一覧、スタッフ紹介、キャンペーン情報など、複数のカードを限られたスペースへまとめて表示したい場面で活用できます。現在表示しているカードに対応したドットだけを青色で強調し、最初と最後では進めない方向のボタンを無効状態で表示するため、利用者にも現在位置が分かりやすい構成です。

タイトル、説明文、各カードの見出しと本文はHTMLから変更できます。CSSではカルーセル全体の横幅、余白、背景色、枠線、角丸、カードの高さ、ボタンサイズ、ドットサイズ、切り替え速度などを調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすいカルーセルとして導入できます。

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

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

デモ

HTML/CSSだけで動くカルーセル

左右のボタンまたはドットをクリックすると、カードを1枚ずつ切り替えられます。

‹ ›

HTML

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

CSS

CSSでカード、ボタン、ドットのデザインを設定します。

サンプル

ラジオボタンの選択状態を利用してカードを切り替えます。

左右のボタンまたはドットをクリックすると、HTMLとCSSだけで3枚のカードを切り替えられます。

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

<!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="html-css-carousel_wrap">

    <!-- タイトル -->
    <div class="html-css-carousel_title">
      HTML/CSSだけで動くカルーセル
    </div>

    <!-- 説明文 -->
    <p class="html-css-carousel_text">
      左右のボタンまたはドットをクリックすると、カードを1枚ずつ切り替えられます。
    </p>

    <!-- 表示するカードを管理するラジオボタン -->
    <input
      class="html-css-carousel_input"
      type="radio"
      name="html-css-carousel"
      id="html-css-carousel-1"
      checked>

    <input
      class="html-css-carousel_input"
      type="radio"
      name="html-css-carousel"
      id="html-css-carousel-2">

    <input
      class="html-css-carousel_input"
      type="radio"
      name="html-css-carousel"
      id="html-css-carousel-3">

    <!-- カルーセル表示エリア -->
    <div class="html-css-carousel_area">

      <!-- 1枚目表示時の操作ボタン -->
      <div class="html-css-carousel_controls html-css-carousel_controls-1">

        <span class="html-css-carousel_button html-css-carousel_button-disabled">
          ‹
        </span>

        <label
          class="html-css-carousel_button"
          for="html-css-carousel-2"
          aria-label="次のカードを表示">
          ›
        </label>

      </div>

      <!-- 2枚目表示時の操作ボタン -->
      <div class="html-css-carousel_controls html-css-carousel_controls-2">

        <label
          class="html-css-carousel_button"
          for="html-css-carousel-1"
          aria-label="前のカードを表示">
          ‹
        </label>

        <label
          class="html-css-carousel_button"
          for="html-css-carousel-3"
          aria-label="次のカードを表示">
          ›
        </label>

      </div>

      <!-- 3枚目表示時の操作ボタン -->
      <div class="html-css-carousel_controls html-css-carousel_controls-3">

        <label
          class="html-css-carousel_button"
          for="html-css-carousel-2"
          aria-label="前のカードを表示">
          ‹
        </label>

        <span class="html-css-carousel_button html-css-carousel_button-disabled">
          ›
        </span>

      </div>

      <!-- カード表示枠 -->
      <div class="html-css-carousel_view">

        <!-- カード一覧 -->
        <div class="html-css-carousel_track">

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

            <div class="html-css-carousel_card-title">
              HTML
            </div>

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

          </div>

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

            <div class="html-css-carousel_card-title">
              CSS
            </div>

            <p class="html-css-carousel_card-text">
              CSSでカード、ボタン、ドットのデザインを設定します。
            </p>

          </div>

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

            <div class="html-css-carousel_card-title">
              サンプル
            </div>

            <p class="html-css-carousel_card-text">
              ラジオボタンの選択状態を利用してカードを切り替えます。
            </p>

          </div>

        </div>

      </div>

    </div>

    <!-- ドットナビゲーション -->
    <div class="html-css-carousel_dots">

      <label
        class="html-css-carousel_dot"
        for="html-css-carousel-1"
        aria-label="1枚目のカードを表示">
      </label>

      <label
        class="html-css-carousel_dot"
        for="html-css-carousel-2"
        aria-label="2枚目のカードを表示">
      </label>

      <label
        class="html-css-carousel_dot"
        for="html-css-carousel-3"
        aria-label="3枚目のカードを表示">
      </label>

    </div>

  </div>

</body>
</html>

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

/* カルーセル全体と子要素 */
.html-css-carousel_wrap,
.html-css-carousel_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

/* カルーセル全体 */
.html-css-carousel_wrap{
  position:relative; /* 操作ボタンの基準位置にする */
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:760px; /* 最大横幅。値を大きくすると全体が横へ広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* カルーセル全体の背景色 */
}

/* タイトル */
.html-css-carousel_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.html-css-carousel_text{
  margin:0 0 30px; /* 下側30pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* カード選択用ラジオボタン */
.html-css-carousel_input{
  position:absolute; /* 通常のレイアウトから外す */
  width:1px; /* 視覚的に隠すための横幅 */
  height:1px; /* 視覚的に隠すための高さ */
  overflow:hidden; /* 内容を表示しない */
  clip-path:inset(50%); /* 画面上から隠す */
  white-space:nowrap; /* 改行を防ぐ */
}

/* カルーセル表示エリア */
.html-css-carousel_area{
  position:relative; /* 操作ボタンの基準位置にする */
  padding:0 70px; /* 左右ボタンを配置するための余白 */
}

/* カード表示枠 */
.html-css-carousel_view{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  overflow:hidden; /* 表示枠の外側にあるカードを隠す */
  border-radius:14px; /* 表示枠の角丸 */
}

/* カード一覧 */
.html-css-carousel_track{
  display:flex; /* カードを横並びにする */
  width:300%; /* 3枚分の横幅を確保 */
  transition:transform .3s ease;
  /*
    0.3秒でカードを移動する。
    値を大きくするとゆっくり、小さくすると速く切り替わる。
  */
}

/* 各カード */
.html-css-carousel_card{
  flex:0 0 calc(100% / 3); /* 3枚を同じ横幅にする */
  min-height:220px; /* カードの最小高さ */
  padding:36px; /* カードの内側余白 */
  border:1px solid #dbe4f3; /* カードを囲む枠線 */
  border-radius:14px; /* カードの角丸 */
  background:#ffffff; /* カードの背景色 */
}

/* カードタイトル */
.html-css-carousel_card-title{
  margin:0 0 16px; /* 下側16pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:30px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
}

/* カード本文 */
.html-css-carousel_card-text{
  margin:0; /* 外側余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  line-height:1.8; /* 本文の行間 */
}

/* 操作ボタン全体 */
.html-css-carousel_controls{
  position:absolute; /* カード表示枠の左右へ配置 */
  top:50%; /* 上端から50%の位置 */
  right:0; /* 右端へ配置 */
  left:0; /* 左端へ配置 */
  z-index:2; /* カードより前面へ表示 */
  display:none; /* 初期状態では非表示 */
  align-items:center; /* 縦方向を中央揃えにする */
  justify-content:space-between; /* 左右へボタンを配置 */
  transform:translateY(-50%); /* 縦方向の中央位置を調整 */
  pointer-events:none; /* ボタン以外の領域を操作対象から外す */
}

/* 左右の操作ボタン */
.html-css-carousel_button{
  display:flex; /* 記号を中央へ配置する */
  align-items:center; /* 縦方向を中央揃えにする */
  justify-content:center; /* 横方向を中央揃えにする */
  flex-shrink:0; /* ボタンが縮まないようにする */
  width:52px; /* ボタンの横幅 */
  height:52px; /* ボタンの高さ */
  border-radius:50%; /* ボタンを円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの記号色 */
  font-family:Arial,sans-serif; /* 記号に使用するフォント */
  font-size:26px; /* 記号のサイズ */
  font-weight:700; /* 記号を太字にする */
  line-height:1; /* 記号の行間を詰める */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  pointer-events:auto; /* ボタンをクリックできるようにする */
}

/* 無効状態のボタン */
.html-css-carousel_button-disabled{
  background:#cbd5e1; /* 無効状態の背景色 */
  cursor:default; /* 通常のカーソルを表示 */
}

/* 1枚目表示時の操作ボタン */
#html-css-carousel-1:checked
~ .html-css-carousel_area
.html-css-carousel_controls-1{
  display:flex; /* 1枚目用の操作ボタンを表示 */
}

/* 2枚目表示時の操作ボタン */
#html-css-carousel-2:checked
~ .html-css-carousel_area
.html-css-carousel_controls-2{
  display:flex; /* 2枚目用の操作ボタンを表示 */
}

/* 3枚目表示時の操作ボタン */
#html-css-carousel-3:checked
~ .html-css-carousel_area
.html-css-carousel_controls-3{
  display:flex; /* 3枚目用の操作ボタンを表示 */
}

/* 1枚目を表示 */
#html-css-carousel-1:checked
~ .html-css-carousel_area
.html-css-carousel_track{
  transform:translateX(0); /* 最初の位置へ移動 */
}

/* 2枚目を表示 */
#html-css-carousel-2:checked
~ .html-css-carousel_area
.html-css-carousel_track{
  transform:translateX(calc(-100% / 3)); /* 1枚分左へ移動 */
}

/* 3枚目を表示 */
#html-css-carousel-3:checked
~ .html-css-carousel_area
.html-css-carousel_track{
  transform:translateX(calc(-200% / 3)); /* 2枚分左へ移動 */
}

/* ドットナビゲーション */
.html-css-carousel_dots{
  display:flex; /* ドットを横並びにする */
  justify-content:center; /* ドットを中央揃えにする */
  gap:10px; /* ドット同士の間隔 */
  margin-top:26px; /* カードとの間隔 */
}

/* 各ドット */
.html-css-carousel_dot{
  width:12px; /* ドットの横幅 */
  height:12px; /* ドットの高さ */
  border-radius:50%; /* ドットを円形にする */
  background:#cbd5e1; /* 通常時の背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 1枚目選択時のドット */
#html-css-carousel-1:checked
~ .html-css-carousel_dots
label[for="html-css-carousel-1"]{
  background:#2563eb; /* 選択中のドットを青色にする */
}

/* 2枚目選択時のドット */
#html-css-carousel-2:checked
~ .html-css-carousel_dots
label[for="html-css-carousel-2"]{
  background:#2563eb; /* 選択中のドットを青色にする */
}

/* 3枚目選択時のドット */
#html-css-carousel-3:checked
~ .html-css-carousel_dots
label[for="html-css-carousel-3"]{
  background:#2563eb; /* 選択中のドットを青色にする */
}

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

  /* カルーセル全体 */
  .html-css-carousel_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* カルーセル表示エリア */
  .html-css-carousel_area{
    padding:0 50px; /* スマートフォンでは左右余白を小さくする */
  }

  /* 各カード */
  .html-css-carousel_card{
    min-height:190px; /* スマートフォンでの最小高さ */
    padding:28px 22px; /* スマートフォンでの内側余白 */
  }

  /* カードタイトル */
  .html-css-carousel_card-title{
    font-size:24px; /* スマートフォンでの文字サイズ */
  }

  /* 操作ボタン */
  .html-css-carousel_button{
    width:44px; /* スマートフォンでのボタン横幅 */
    height:44px; /* スマートフォンでのボタン高さ */
    font-size:22px; /* スマートフォンでの記号サイズ */
  }

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではラジオボタンを利用して現在表示するカードを切り替え、左右ボタンやドットをクリックすると対応するカードへ移動できます。CSSでは:checkedを利用してカードの表示位置や操作ボタン、ドットの状態を切り替えるため、JavaScriptを使用せずにカルーセルを実現しています。

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

各ファイルの役割
index.htmlはカルーセル全体を構成するファイルです。タイトル、説明文、カードのタイトル・本文、左右ボタン、ドットナビゲーションを編集できます。カードの追加や削除もこのファイルで行います。

style.cssはカルーセル全体のデザインと動作を設定するファイルです。レイアウト、カードサイズ、背景色、ボタン、ドット、切り替えアニメーション、レスポンシブ表示などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。左右ボタンまたはドットをクリックすると、JavaScriptを使用せずにカードを切り替えられます。

カスタマイズできる内容
index.htmlではタイトル、説明文、各カードのタイトル・本文、カード枚数、左右ボタン、ドットナビゲーションを変更できます。用途に合わせて商品紹介、サービス案内、お知らせ、実績紹介などさまざまなカルーセルへ変更できます。

style.cssではカルーセル全体の横幅、背景色、余白、角丸、カードサイズ、文字サイズ、ボタンサイズ、ドットサイズ、アニメーション速度などを変更できます。

数値調整
style.css
max-width:760px;
カルーセル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
カルーセル全体の上下余白です。値を変更すると上下の間隔が変わります。

padding:32px;
カルーセル全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

border-radius:18px;
カルーセル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

padding:0 70px;
左右ボタンを配置するための余白です。値を変更するとボタンとカードの間隔が変わります。

min-height:220px;
カードの最小高さです。値を大きくすると高さが増え、小さくするとコンパクトになります。

padding:36px;
カード内部の余白です。値を変更すると文字と枠線の間隔が変わります。

width:52px;
height:52px;
左右ボタンのサイズです。値を変更するとボタンの大きさが変わります。

font-size:30px;
カードタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。

width:12px;
height:12px;
ドットナビゲーションのサイズです。値を変更するとドットの大きさが変わります。

gap:10px;
ドット同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

transition:transform .3s ease;
カードの切り替え速度です。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxにより画面幅に合わせてカルーセル全体が縮小されます。また、640px以下ではpadding、ボタンサイズ、カードの高さ、文字サイズを調整しているため、スマートフォン・タブレット・PCで利用できます。