English 中文 العربية 日本語 Português

Bootstrap: カルーセルとモーダル

最終更新：2026-08-26

1. はじめに

(1) 前提条件

(2) 🎯 学習内容

(3) 課題

アリスの製品詳細ページには、製品の複数の角度を表示するための画像カルーセルと、製品詳細が表示される「クイックビュー」モーダルが必要です。これら2つのコンポーネントが連携することで、カスタムJavaScriptを書かずにプロフェッショナルなユーザー体験を提供できます。

(4) 解決策

カルーセルとモーダルは、Bootstrapで最も一般的に使用されるインタラクティブなJavaScriptコンポーネントの2つです。カルーセルは画像やコンテンツを順番に表示するために使用され、モーダルはダイアログボックス、フォーム、または確認メッセージを表示するために使用されます。

こう考えると分かりやすいです： カルーセル = 自動再生されるスライドショー、モーダル = 現在のページにオーバーレイ表示される一時的なダイアログボックス。

(5) 利点

カルーセルとモーダルを組み合わせて使用すると、JavaScriptを一切書かずにプロフェッショナルな製品ショーケースを作成できます。

2. カルーセル

▶ サンプル 基本的なカルーセル

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">

      <div class="carousel-indicators">
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2"></button>
      </div>

      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400/0d6efd/fff?text=Slide+1" class="d-block w-100" alt="Slide 1">
          <div class="carousel-caption d-none d-md-block">
            <h5>First Slide</h5>
            <p>Welcome to Bootstrap Carousel.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/198754/fff?text=Slide+2" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/dc3545/fff?text=Slide+3" class="d-block w-100" alt="Slide 3">
        </div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#demoCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) カルーセルコンポーネントの構造

要素 class/data-* 説明
コンテナ carousel slide カルーセルコンテナ。バインディングにはidが使用されます
インジケーター carousel-indicators スライドへジャンプするための下部のドット
スライドコンテナ carousel-inner すべてのスライドをラップします
個々のスライド carousel-item 各スライドのコンテンツ
アクティブなスライド carousel-item active 現在表示されているスライド
キャプション carousel-caption 画像上のテキストオーバーレイ

(2) カルーセルの設定

HTML 
<!-- 2秒ごとに自動再生（デフォルト：5000ms） -->
<div id="carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">

<!-- スライドではなくフェード遷移 -->
<div id="carousel" class="carousel slide carousel-fade">
▶ 試してみよう

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

3. モーダル

HTML 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch Demo Modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">Modal Title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>This is the modal body content. You can put any HTML here.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) モーダルの構造

要素 class 説明
バックドロップ modal fade 半透明の背景オーバーレイ
ダイアログ modal-dialog サイズと垂直中央揃えを制御
コンテンツ modal-content 白いパネルコンテナ
ヘッダー modal-header タイトル + 閉じるボタン
ボディ modal-body メインコンテンツエリア
フッター modal-footer アクションボタングループ

4. モーダルのサイズと配置

HTML 
<div class="modal-dialog modal-sm">Small</div>
<div class="modal-dialog modal-lg">Large</div>
<div class="modal-dialog modal-xl">Extra large</div>
<div class="modal-dialog modal-dialog-centered">Vertically centered</div>
<div class="modal-dialog modal-dialog-scrollable">Scrollable body</div>
<div class="modal-dialog modal-fullscreen-md-down">Full screen on mobile</div>
▶ 試してみよう

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

class 幅 使用例
modal-sm 300px 確認ダイアログ
デフォルト 500px 一般的なフォーム
modal-lg 800px 大きなフォーム
modal-xl 1140px フルサイズのコンテンツ
modal-fullscreen 100vw モバイルでフルスクリーン

5. その他のカルーセルとモーダルの例

▶ サンプル キャプションとインジケーター付きの商品カルーセル

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Carousel</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div id="productCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400/0d6efd/fff?text=iPhone+15" class="d-block w-100" alt="Product 1">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>iPhone 15 Pro</h5>
            <p>Starting at $999 — A17 Pro chip, titanium design.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/198754/fff?text=MacBook+Air" class="d-block w-100" alt="Product 2">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>MacBook Air M3</h5>
            <p>Lightweight power — 18hr battery, 15-inch display.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/dc3545/fff?text=AirPods+Pro" class="d-block w-100" alt="Product 3">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>AirPods Pro 2</h5>
            <p>Adaptive audio, noise cancellation, USB-C.</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル フォームを埋め込んだモーダル

HTML 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#feedbackModal">
  Leave Feedback
</button>

<div class="modal fade" id="feedbackModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Send Feedback</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label class="form-label">Your Name</label>
            <input type="text" class="form-control" placeholder="Enter name">
          </div>
          <div class="mb-3">
            <label class="form-label">Rating</label>
            <select class="form-select">
              <option selected>5 - Excellent</option>
              <option>4 - Good</option>
              <option>3 - Average</option>
              <option>2 - Poor</option>
              <option>1 - Terrible</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Message</label>
            <textarea class="form-control" rows="3" placeholder="Tell us about your experience..."></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル カルーセルを埋め込んだモーダル

HTML 
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#carouselModal">
  View Gallery
</button>

<div class="modal fade" id="carouselModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Product Gallery</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://via.placeholder.com/800x500/0d6efd/fff?text=Photo+1" class="d-block w-100" alt="Photo 1">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/800x500/198754/fff?text=Photo+2" class="d-block w-100" alt="Photo 2">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/800x500/dc3545/fff?text=Photo+3" class="d-block w-100" alt="Photo 3">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル 静的バックドロップモーダル

HTML 
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#staticModal">
  Open with Static Backdrop
</button>

<div class="modal fade" id="staticModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content text-center">
      <div class="modal-body py-4">
        <div class="display-6 text-warning mb-3">⚠️</div>
        <h5>Delete Account?</h5>
        <p class="text-muted small">This action cannot be undone.</p>
        <div class="d-grid gap-2">
          <button class="btn btn-danger">Confirm Delete</button>
          <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) カルーセル-モーダルの相互作用フロー

100% 
flowchart TD
    subgraph Carousel
        A[carousel slide] --> B[carousel-indicators (Indicators)]
        A --> C[carousel-inner (Slides Container)]
        C --> D[carousel-item active (Current Slide)]
        C --> E[carousel-item (Other Slides)]
        A --> F[carousel-control-prev/next (Previous/Next Arrows)]
        D --> G[carousel-caption (Caption)]
    end
    subgraph Modal
        H[modal fade (Backdrop)] --> I[modal-dialog (Dialog)]
        I --> J[modal-content (Content Panel)]
        J --> K[modal-header (Header)]
        J --> L[modal-body (Body)]
        J --> M[modal-footer (Footer)]
    end
    N[User Click] --> O{Target}
    O -->|Carousel Indicator| B
    O -->|Carousel Arrow| F
    O -->|Open Button| H
    O -->|Close Button| K

出力： Bootstrap 5.3 スタイルが適用されたコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

data-bs-* 属性 ターゲット 値
data-bs-ride="carousel" カルーセルコンテナ carousel / false
data-bs-interval カルーセルコンテナ ミリ秒（デフォルト 5000）
data-bs-slide-to インジケーターボタン インデックス (0,1,2...)
data-bs-slide コントロールボタン prev / next
data-bs-toggle="modal" トリガー要素 modal
data-bs-target="#id" トリガー要素 対象モーダルID
data-bs-dismiss="modal" 閉じるボタン modal
data-bs-backdrop モーダル true / false / static
data-bs-keyboard モーダル true / false
data-bs-touch カルーセルコンテナ true / false
カルーセルオプション data属性 効果
自動再生 data-bs-ride="carousel" ページ読み込み時に自動再生を開始
インターバル data-bs-interval="2000" 2秒ごとにスライドを切り替え
フェード遷移 クラス carousel-fade スライドではなくフェードイン/アウト
ホバー時に一時停止 data-bs-pause="hover" マウスが上に置かれたときに一時停止
タッチスワイプ data-bs-touch="true" モバイルでのスワイプジェスチャーを有効化
無限ループ data-bs-wrap="true" 最後のスライドの後に最初のスライドに戻る
モーダルサイズ class 幅 使用例
小 modal-sm 300px 確認ダイアログ、短いメッセージ
デフォルト なし 500px フォーム、情報表示
大 modal-lg 800px 大きなフォーム、データテーブル
特大 modal-xl 1140px フルサイズのコンテンツパネル
フルスクリーン modal-fullscreen 100vw 没入型モバイル体験

❓ よくある質問

Q カルーセルの画像サイズが異なる場合の対処法は？
A 2つの解決策があります。(1) 固定サイズの画像を使用する（推奨：16:9のような均一な比率にクロップする）。(2) カルーセルに固定heightとobject-fit: coverを一緒に使用する。
Q モーダルが開いている間、背景はスクロールできますか？
A いいえ、デフォルトではモーダルが開いているとbodyのoverflowはhiddenに設定されます。スクロールを許可するには、modal-dialogにmodal-dialog-scrollableを追加します。
Q モーダルをネストできますか？
A Bootstrapはネストされたモーダルをサポートしていません。一度に表示できるのは1つのモーダルのみです。ただし、JavaScriptを使用して1つのモーダルを閉じた後に別のモーダルを開くことは可能です。
Q カルーセルはキーボード制御をサポートしていますか？
A はい。カルーセルにフォーカスがある場合、左右の矢印キーでスライドを切り替えます。これはデフォルトで有効になっています。
Q カルーセルはモバイルでのスワイプジェスチャーをサポートしていますか？
A はい。Bootstrap 5のカルーセルはデフォルトでタッチイベントを有効にしています（data-bs-touch="true"）。ユーザーはモバイルデバイスで指を左右にスワイプしてスライドを切り替えることができ、追加の設定は必要ありません。

📖 まとめ

📝 練習問題

  1. ⭐ 商品ショーケースカルーセルを作成する：3つの商品画像 + キャプション（carousel-caption）+ インジケーター + 前後矢印、3秒ごとに自動切り替え。
  2. ⭐⭐ 「クイックビュー」機能を実装する：商品カード上のボタンを押すと、大きな商品画像、名前、価格、説明、購入ボタンを表示するモーダルが開く。
  3. ⭐⭐⭐ フルスクリーンモーダル（モバイルで）を作成し、登録フォーム（名前 + メールアドレス + パスワード）を含める。

前のレッスン： フォーム · 次のレッスン： アラート

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%