基本のカルーセルを作る方法
基本のカルーセルを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、カードを1枚ずつ切り替えて表示するシンプルなカルーセルを作成します。左右のボタンで前後のカードへ移動できるほか、下部のドットナビゲーションから表示したいカードを直接選択できます。カルーセルは3枚のカードで構成されており、最後のカードまで進むと停止するため、ループしない基本的な動作を確認できます。
サービス紹介、機能説明、お知らせ、商品一覧、実績紹介など、複数の情報を限られたスペースへ順番に表示したい場面で利用できます。現在表示中のカードはドットナビゲーションから確認でき、左右のボタンをクリックするだけで1枚ずつ切り替わるため、初めてカルーセルを作成する方でも仕組みを理解しやすい構成になっています。自動再生やスワイプ操作などは実装せず、基本的なカルーセルの動作だけに絞っています。
カードの見出しや説明文はHTMLから変更でき、CSSでは横幅、余白、背景色、文字サイズ、ボタンやドットの色などを自由に調整できます。JavaScriptではカードの切り替え処理を行っており、シンプルな構成なのでカスタマイズもしやすく、レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できる基本的なカルーセルのサンプルとして活用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
基本のカルーセル
左右のボタンまたはドットをクリックするとカードを1枚ずつ切り替えます。
HTML
HTMLでカルーセル全体とカードを配置します。
CSS
CSSでレイアウトやデザインを設定します。
JavaScript
JavaScriptでカードを切り替えます。
カードは1枚ずつ表示されます。1枚目と3枚目ではそれ以上移動せず停止します。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>基本のカルーセル</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- カルーセル全体 -->
<div class="basic-carousel_wrap">
<!-- タイトル -->
<div class="basic-carousel_title">
基本のカルーセル
</div>
<!-- 説明文 -->
<p class="basic-carousel_text">
左右のボタンまたはドットをクリックするとカードを1枚ずつ切り替えます。
</p>
<!-- カルーセル操作エリア -->
<div class="basic-carousel_area">
<!-- 前のカードへ移動するボタン -->
<button
class="basic-carousel_button basic-carousel_prev"
type="button"
aria-label="前のカード">
‹
</button>
<!-- カード表示エリア -->
<div class="basic-carousel_view">
<!-- 3枚のカードを横並びにする要素 -->
<div class="basic-carousel_track">
<!-- 1枚目のカード -->
<div class="basic-carousel_card">
<!-- カード見出し -->
<div class="basic-carousel_card-title">
HTML
</div>
<!-- カード説明文 -->
<p class="basic-carousel_card-text">
HTMLでカルーセル全体とカードを配置します。
</p>
</div>
<!-- 2枚目のカード -->
<div class="basic-carousel_card">
<!-- カード見出し -->
<div class="basic-carousel_card-title">
CSS
</div>
<!-- カード説明文 -->
<p class="basic-carousel_card-text">
CSSでレイアウトやデザインを設定します。
</p>
</div>
<!-- 3枚目のカード -->
<div class="basic-carousel_card">
<!-- カード見出し -->
<div class="basic-carousel_card-title">
JavaScript
</div>
<!-- カード説明文 -->
<p class="basic-carousel_card-text">
JavaScriptでカードを1枚ずつ切り替えます。
</p>
</div>
</div>
</div>
<!-- 次のカードへ移動するボタン -->
<button
class="basic-carousel_button basic-carousel_next"
type="button"
aria-label="次のカード">
›
</button>
</div>
<!-- ドットナビゲーション -->
<div class="basic-carousel_dots">
<!-- 1枚目を表示するドット -->
<button
class="basic-carousel_dot is-active"
type="button"
aria-label="1枚目のカードを表示">
</button>
<!-- 2枚目を表示するドット -->
<button
class="basic-carousel_dot"
type="button"
aria-label="2枚目のカードを表示">
</button>
<!-- 3枚目を表示するドット -->
<button
class="basic-carousel_dot"
type="button"
aria-label="3枚目のカードを表示">
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* カルーセル全体と子要素 */
.basic-carousel_wrap,
.basic-carousel_wrap *{
box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}
/* カルーセル全体 */
.basic-carousel_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小 */
max-width:760px; /* 最大横幅。値を大きくすると全体が横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
border:1px solid #e5e7eb; /* 全体を囲む枠線 */
border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* カルーセル全体の背景色 */
}
/* タイトル */
.basic-carousel_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
text-align:center; /* タイトルを中央揃えにする */
}
/* 説明文 */
.basic-carousel_text{
margin:0 0 30px; /* 下側30pxの余白。値を大きくするとカードとの間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
text-align:center; /* 説明文を中央揃えにする */
}
/* カルーセル操作エリア */
.basic-carousel_area{
display:flex; /* 前へボタン・カード・次へボタンを横並びにする */
align-items:center; /* 縦方向を中央揃えにする */
gap:18px; /* ボタンとカードの間隔。値を大きくすると間隔が広がる */
}
/* 前へボタンと次へボタン */
.basic-carousel_button{
display:flex; /* 矢印をボタン中央へ配置する */
align-items:center; /* 矢印を縦方向中央へ揃える */
justify-content:center; /* 矢印を横方向中央へ揃える */
flex-shrink:0; /* 画面幅が狭くてもボタンを縮小させない */
width:52px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
height:52px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
padding:0; /* ブラウザ標準の内側余白を削除 */
border:none; /* ブラウザ標準の枠線を削除 */
border-radius:50%; /* ボタンを円形にする */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* 矢印の文字色 */
font-family:Arial,sans-serif; /* 矢印表示に使用するフォント */
font-size:30px; /* 矢印の文字サイズ。値を大きくすると矢印が大きくなる */
font-weight:700; /* 矢印を太くする */
line-height:1; /* 矢印の上下位置を整える */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:
background-color .3s ease,
opacity .3s ease;
/*
0.3秒で背景色と透明度を切り替える。
値を大きくするとゆっくり、小さくすると速くなる。
*/
}
/* 操作できないボタン */
.basic-carousel_button:disabled{
background:#cbd5e1; /* 無効時の背景色 */
opacity:.7; /* 無効時の透明度。値を小さくすると薄くなる */
cursor:default; /* 通常のマウスカーソルを表示 */
}
/* カード表示エリア */
.basic-carousel_view{
flex:1; /* 左右ボタンを除いた横幅いっぱいに表示 */
min-width:0; /* 横幅が狭い場合でも正しく縮小できるようにする */
overflow:hidden; /* 表示中以外のカードを隠す */
border-radius:14px; /* カード表示エリアの角丸 */
}
/* カードを横並びにする要素 */
.basic-carousel_track{
display:flex; /* 3枚のカードを横並びにする */
width:100%; /* 表示エリアの横幅に合わせる */
transition:transform .3s ease;
/*
0.3秒でカードを横へスライドする。
値を大きくするとゆっくり、小さくすると速くなる。
*/
}
/* 各カード */
.basic-carousel_card{
flex:0 0 100%; /* 各カードを表示エリアと同じ横幅にして縮小させない */
width:100%; /* カードを表示エリアの横幅いっぱいにする */
min-height:190px; /* カードの最小高さ。値を大きくするとカードが高くなる */
padding:36px; /* カードの内側余白。値を大きくすると内容周囲の余白が広がる */
border:1px solid #dbe4f3; /* カードの枠線 */
border-radius:14px; /* カードの角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* カードの背景色 */
}
/* カード見出し */
.basic-carousel_card-title{
margin:0 0 16px; /* 下側16pxの余白。値を大きくすると説明文との間隔が広がる */
color:#111827; /* 見出しの文字色 */
font-size:30px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* 見出しを太字にする */
line-height:1.5; /* 見出しの行間 */
}
/* カード説明文 */
.basic-carousel_card-text{
margin:0; /* ブラウザ標準の外側余白を削除 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}
/* ドットナビゲーション */
.basic-carousel_dots{
display:flex; /* ドットを横並びにする */
align-items:center; /* ドットを縦方向中央へ揃える */
justify-content:center; /* ドットを横方向中央へ配置する */
gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
margin-top:26px; /* カードとドットの間隔。値を大きくすると間隔が広がる */
}
/* 各ドット */
.basic-carousel_dot{
width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
padding:0; /* ブラウザ標準の内側余白を削除 */
border:none; /* ブラウザ標準の枠線を削除 */
border-radius:50%; /* ドットを円形にする */
background:#cbd5e1; /* 通常時のドット背景色 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:background-color .3s ease;
/*
0.3秒でドットの色を切り替える。
値を大きくするとゆっくり、小さくすると速くなる。
*/
}
/* 表示中のカードに対応するドット */
.basic-carousel_dot.is-active{
background:#2563eb; /* 選択中のドット背景色 */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* ページ全体 */
body{
padding:24px 12px; /* スマートフォンでは画面端の余白を小さくする */
}
/* カルーセル全体 */
.basic-carousel_wrap{
margin:24px auto; /* スマートフォンでは上下余白を小さくする */
padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
}
/* カルーセル操作エリア */
.basic-carousel_area{
gap:8px; /* スマートフォンではボタンとカードの間隔を小さくする */
}
/* 前へボタンと次へボタン */
.basic-carousel_button{
width:42px; /* スマートフォンではボタンの横幅を小さくする */
height:42px; /* スマートフォンではボタンの高さを小さくする */
font-size:25px; /* スマートフォンでは矢印を少し小さくする */
}
/* 各カード */
.basic-carousel_card{
min-height:180px; /* スマートフォン用のカード最小高さ */
padding:26px 20px; /* スマートフォンではカードの内側余白を小さくする */
}
/* カード見出し */
.basic-carousel_card-title{
font-size:24px; /* スマートフォンでは見出しを小さくする */
}
}
// カルーセル全体を取得
const basicCarousel=document.querySelector(
".basic-carousel_wrap"
);
// カードを横並びにしている要素を取得
const basicCarouselTrack=basicCarousel.querySelector(
".basic-carousel_track"
);
// すべてのカードを取得
const basicCarouselCards=basicCarousel.querySelectorAll(
".basic-carousel_card"
);
// 前のカードへ移動するボタンを取得
const basicCarouselPrev=basicCarousel.querySelector(
".basic-carousel_prev"
);
// 次のカードへ移動するボタンを取得
const basicCarouselNext=basicCarousel.querySelector(
".basic-carousel_next"
);
// すべてのドットを取得
const basicCarouselDots=basicCarousel.querySelectorAll(
".basic-carousel_dot"
);
// 現在表示しているカード番号
// 0は1枚目、1は2枚目、2は3枚目を表す
let basicCarouselIndex=0;
// カルーセルの表示を更新する共通処理
function updateBasicCarousel(){
// 現在のカード番号に合わせて横へ移動
basicCarouselTrack.style.transform=
"translateX(-"+(basicCarouselIndex*100)+"%)";
// 各ドットの選択状態を更新
basicCarouselDots.forEach(function(dot,index){
// 表示中のカードに対応するドットだけ選択状態にする
dot.classList.toggle(
"is-active",
index===basicCarouselIndex
);
});
// 1枚目では前へボタンを無効にする
basicCarouselPrev.disabled=
basicCarouselIndex===0;
// 3枚目では次へボタンを無効にする
basicCarouselNext.disabled=
basicCarouselIndex===basicCarouselCards.length-1;
}
// 前へボタンをクリックした時
basicCarouselPrev.addEventListener("click",function(){
// 1枚目より前へ移動しないようにする
if(basicCarouselIndex>0){
// カード番号を1つ戻す
basicCarouselIndex--;
// 表示を更新
updateBasicCarousel();
}
});
// 次へボタンをクリックした時
basicCarouselNext.addEventListener("click",function(){
// 3枚目より先へ移動しないようにする
if(basicCarouselIndex<basicCarouselCards.length-1){
// カード番号を1つ進める
basicCarouselIndex++;
// 表示を更新
updateBasicCarousel();
}
});
// 各ドットへクリック処理を設定
basicCarouselDots.forEach(function(dot,index){
// ドットをクリックした時
dot.addEventListener("click",function(){
// クリックしたドットに対応するカード番号へ変更
basicCarouselIndex=index;
// 表示を更新
updateBasicCarousel();
});
});
// ページを開いた時の初期表示を設定
updateBasicCarousel();
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではカルーセル全体のレイアウトと3枚のカード、左右の移動ボタン、ドットナビゲーションを配置します。CSSではカードやボタンのデザインとレイアウトを設定し、JavaScriptではカードを1枚ずつ切り替える処理やドットの状態管理を行います。最後のカードまで移動すると停止するシンプルなカルーセルです。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはカルーセル全体を構成するファイルです。カードの見出しや説明文、左右のボタン、ドットナビゲーションを編集できます。
style.cssはカルーセルのデザインを設定するファイルです。横幅、余白、背景色、カードのデザイン、ボタンやドットの色、文字サイズなどを変更できます。
script.jsはカルーセルの動作を管理するファイルです。左右ボタンによる切り替え、ドットクリックによる移動、現在位置の管理を行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。左右のボタンをクリックするとカードが1枚ずつ切り替わります。ドットをクリックすると対応するカードを直接表示できます。
カスタマイズできる内容
index.htmlではカードの見出し、説明文、ボタンのラベル、ドット数を変更できます。カードを追加・削除する場合は、HTML内のカードとドットを同じ枚数にし、JavaScriptの対象要素も合わせて利用してください。
style.cssではカルーセル全体の横幅、カードの余白、背景色、枠線、角丸、ボタンのサイズや色、ドットのサイズや色などを変更できます。script.jsでは切り替え処理や移動方法を変更できます。
数値調整
style.css
max-width:760px;
カルーセル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
カルーセル全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
width:52px;
左右ボタンの大きさです。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
min-height:190px;
カードの最小高さです。値を大きくするとカードが高くなり、小さくすると低くなります。
padding:36px;
カードの内側余白です。値を大きくするとカード内の余白が広がります。
font-size:30px;
カード見出しの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
transition:transform .3s ease;
カードが切り替わる時間です。0.3秒でスライドします。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxにより画面幅に合わせてカルーセル全体が縮小されます。また、640px以下ではボタンやカードの余白、文字サイズを調整しているため、スマートフォン・タブレット・PCで快適に利用できます。
コメント