HTML/CSSだけでスライダーを作る方法【HTML/CSS・サンプルコード付き】

HTML/CSSだけでスライダーを作る方法

HTML/CSSだけでスライダーを作る方法を紹介します。このサンプルでは、JavaScriptを使用せずにHTMLとCSSだけで画像やコンテンツを切り替えられるスライダーを作成します。ラジオボタンとlabel要素を利用して表示するスライドを切り替えるため、シンプルな構成で導入でき、軽量なスライダーを実装したい場面に適しています。

商品紹介、サービス案内、実績紹介、ポートフォリオ、キャンペーンバナーなど、複数のコンテンツを限られたスペースへまとめて表示したい場面で活用できます。左右の切り替えボタンや自動再生などのJavaScript機能は使用せず、クリック操作だけでスライドを切り替えられるため、HTML/CSSの基本を学びたい方にも分かりやすい構成になっています。

タイトルや説明文、各スライドの内容はHTMLから変更でき、CSSでは横幅、余白、背景色、枠線、角丸、文字サイズ、配色などを自由に調整できます。レスポンシブにも対応しやすい構成のため、スマートフォン・タブレット・PCまで幅広い画面サイズで利用できます。JavaScriptを使わずにスライダーを実装したい場合の基本サンプルとして活用してください。

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

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

デモ

基本のスライダー

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

HTML

HTMLでスライダー全体と表示するスライドを配置します。

CSS

CSSでスライドやボタンのデザインを設定します。

JavaScript

JavaScriptで左右のボタンやドットによる切り替えを行います。

左右のボタンまたはドットをクリックして、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-slider_wrap">

    <!-- タイトル -->
    <div class="html-css-slider_title">
      HTML/CSSだけで動くスライダー
    </div>

    <!-- 説明文 -->
    <p class="html-css-slider_text">
      左右のボタンまたはドットをクリックすると、スライドを切り替えられます。
    </p>

    <!-- 表示するスライドを管理するラジオボタン -->
    <input
      class="html-css-slider_input"
      type="radio"
      name="html-css-slider"
      id="html-css-slider-1"
      checked>

    <input
      class="html-css-slider_input"
      type="radio"
      name="html-css-slider"
      id="html-css-slider-2">

    <input
      class="html-css-slider_input"
      type="radio"
      name="html-css-slider"
      id="html-css-slider-3">

    <!-- スライダー表示エリア -->
    <div class="html-css-slider_area">

      <!-- 1枚目の操作ボタン -->
      <div class="html-css-slider_controls html-css-slider_controls-1">

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

        <label
          class="html-css-slider_button"
          for="html-css-slider-2"
          aria-label="次のスライド">
          ›
        </label>

      </div>

      <!-- 2枚目の操作ボタン -->
      <div class="html-css-slider_controls html-css-slider_controls-2">

        <label
          class="html-css-slider_button"
          for="html-css-slider-1"
          aria-label="前のスライド">
          ‹
        </label>

        <label
          class="html-css-slider_button"
          for="html-css-slider-3"
          aria-label="次のスライド">
          ›
        </label>

      </div>

      <!-- 3枚目の操作ボタン -->
      <div class="html-css-slider_controls html-css-slider_controls-3">

        <label
          class="html-css-slider_button"
          for="html-css-slider-2"
          aria-label="前のスライド">
          ‹
        </label>

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

      </div>

      <!-- スライド表示枠 -->
      <div class="html-css-slider_view">

        <!-- スライド一覧 -->
        <div class="html-css-slider_track">

          <!-- 1枚目 -->
          <div class="html-css-slider_slide">

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

            <p class="html-css-slider_slide-text">
              HTMLでスライダー全体と表示するスライドを配置します。
            </p>

          </div>

          <!-- 2枚目 -->
          <div class="html-css-slider_slide">

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

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

          </div>

          <!-- 3枚目 -->
          <div class="html-css-slider_slide">

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

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

          </div>

        </div>

      </div>

    </div>

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

      <label
        class="html-css-slider_dot"
        for="html-css-slider-1"
        aria-label="1枚目のスライドを表示">
      </label>

      <label
        class="html-css-slider_dot"
        for="html-css-slider-2"
        aria-label="2枚目のスライドを表示">
      </label>

      <label
        class="html-css-slider_dot"
        for="html-css-slider-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-slider_wrap,
.html-css-slider_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

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

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

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

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

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

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

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

/* 各スライド */
.html-css-slider_slide{
  display:flex; /* 内容を配置しやすくする */
  flex:0 0 calc(100% / 3); /* 3枚を同じ横幅にする */
  min-height:220px; /* スライドの最小高さ */
  padding:36px 48px; /* 上下36px・左右48pxの内側余白 */
  border:1px solid #dbe4f3; /* スライドを囲む枠線 */
  border-radius:18px; /* スライドの角丸 */
  background:#ffffff; /* スライドの背景色 */
  flex-direction:column; /* 内容を縦方向へ配置 */
  justify-content:center; /* 内容を縦方向の中央へ配置 */
}

/* スライドタイトル */
.html-css-slider_slide-title{
  margin:0 0 16px; /* 下側16pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:30px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* スライド本文 */
.html-css-slider_slide-text{
  margin:0; /* 外側余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  font-size:16px; /* 本文の文字サイズ */
  line-height:1.8; /* 本文の行間 */
}

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

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

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

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

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

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

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

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

/* ドットナビゲーション */
.html-css-slider_dots{
  display:flex; /* ドットを横並びにする */
  align-items:center; /* 縦方向を中央揃えにする */
  justify-content:center; /* 横方向を中央揃えにする */
  gap:10px; /* ドット同士の間隔 */
  margin-top:24px; /* スライドとの間隔 */
}

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

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

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

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

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

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

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

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

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

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

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではラジオボタンを利用して現在表示するスライドを管理し、左右ボタンやドットをクリックすると表示するスライドを切り替えます。JavaScriptは使用せず、CSSの:checkedを利用して表示位置や選択状態を制御しているため、シンプルな構成で導入できます。

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;
スライダー全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

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

border-radius:20px;
スライダー全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

gap:18px;
左右ボタンとスライドの間隔です。値を大きくすると離れ、小さくすると近づきます。

width:52px;
height:52px;
左右ボタンのサイズです。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。

min-height:220px;
スライドの高さです。値を大きくすると高さが増え、小さくすると低く表示されます。

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

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

gap:10px;
ドットナビゲーション同士の間隔です。値を大きくするとドット同士が離れ、小さくすると近づきます。

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

margin-top:24px;
ドットナビゲーションの上余白です。値を変更するとスライドとの間隔が変わります。

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

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