Bootstrapフレームワークでカルーセルを作る方法【初心者向け徹底解説】
「カルーセル」という言葉を聞いて、多くの人が思い浮かべるのは、子どもの頃に乗った遊園地の回転木馬（メリーゴーランド）ではないでしょうか。色とりどりの馬が載った大きなプラットフォームが、音楽とともにゆっくりと回転するあの乗り物です。
Bootstrapのカルーセルは遊園地のそれとはまったく別のものですが、「複数の要素が順番に切り替わりながら回っていく」という点で、コンセプトはよく似ています。この記事では、Bootstrapの導入方法から、カルーセルUI要素の概要、どんな場面で活用できるか、そしてBootstrapフレームワークを使って実際にカルーセルを構築する手順までを丁寧に解説します。
準備：必要な依存関係を揃える
Bootstrapカルーセルをセットアップするには、まず適切な依存関係を用意する必要があります。必要なのは以下の3つです。
- Bootstrap
- Popper.js
- jQuery
Bootstrap公式サイトのQuick Startページを参照すれば、プロジェクトへの導入手順を確認できます。
依存関係の読み込み方法は自由に選べますが、初心者にとって最も簡単なのはCDN（コンテンツデリバリーネットワーク）を利用する方法です。jQuery、Popper.js、BootstrapそれぞれのCDNリンクをHTMLに追加しましょう。その際、<script>タグの記述順序が重要になる点には注意してください。上記の順番で読み込むのが安全です。
これで準備完了です。さっそく始めていきましょう。
Bootstrap公式ドキュメントを活用してカルーセルを作る
Bootstrap公式ドキュメントの「Introduction / Getting Started」ページでは、左側にサイドバーが表示され、各種ページへのリンクが並んでいます。まず「Components」というリンクを探してクリックしてみましょう。すると、Bootstrapが提供する多数のコンポーネントのうち、最初の「Alerts」ページへ移動します。もう一度サイドバーを見ると、利用可能なすべてのコンポーネントへのリンク一覧が確認できるはずです。
その中から「Carousel」コンポーネントをクリックしてください。カルーセルの作成に必要な情報は、ここにすべて揃っています。
カルーセルの仕組み
Bootstrapのカルーセルは、CSSのtransformプロパティとJavaScriptを組み合わせて動作しており、あるスライドから次のスライドへ滑らかに切り替わります。最もシンプルなカルーセルは、画像やHTMLマークアップの一連の要素を、一定時間ごとに自動的に切り替えて表示するものです。
基本構造
以下は、3枚の画像を自動で切り替える最も基本的なカルーセルの完全なコード例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?auto=format&fit=crop&w=1600&q=80" class="d-block w-100" alt="スライド1">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?auto=format&fit=crop&w=1600&q=80" class="d-block w-100" alt="スライド2">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?auto=format&fit=crop&w=1600&q=80" class="d-block w-100" alt="スライド3">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
上記のコードには、初めて見る属性がいくつか含まれています。それぞれの意味は次の表の通りです。
| 属性 | 意味 |
|---|---|
| data-ride="carousel" | ページ読み込み時に自動再生（アニメーション）を開始する。 |
| data-interval="false | 数値（ミリ秒）" | false を指定すると自動で切り替わらなくなる。数値を指定した場合は、その間隔（ミリ秒）でスライドが切り替わる。 |
| data-pause="hover" | ユーザーがカルーセル上にマウスカーソルを重ねると、現在表示中のスライドで一時停止する。マウスが離れると自動再生が再開される。 |
| class="active" | どのスライドを表示するかを示すために必須のクラス。 |
| class="d-block" | display: block; を適用するユーティリティクラス。 |
| class="w-100" | width: 100%; を適用するユーティリティクラス。 |
コントロール（前後ボタン）を追加する
基本的な自動切り替えの仕組みに加えて、Bootstrapにはカルーセルを操作するためのコントロール（矢印ボタン）が用意されています。ここでJavaScriptが本格的に活躍します。Bootstrapは内部のユーティリティ関数を使い、ユーザーがボタンをクリックしたときにカルーセルが動作するように制御しています。
次のコードは、画像の左右に「前へ」「次へ」の矢印を配置するものです。.carousel-innerの直後に、カルーセルの外側コンテナ内へ追記してください。タイマーによる自動切り替えはそのまま機能しつつ、矢印をクリックしてもスライドが移動するようになります。
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
ここで最も重要なポイントは、href属性の値が、カルーセル全体を包む外側コンテナの固有IDと一致していなければならないという点です。
- 次へボタン：
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> - カルーセルの外側コンテナ：
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
この2つの部分が一致していないと、リンクが正しく機能しません。IDを変更した場合は、必ず両方を同じ値に更新しましょう。
インジケーターを追加する
コントロールによる操作に加えて、カルーセルに何枚のスライドがあるかを視覚的に示す「インジケーター」（小さな点状の目印）を表示することもできます。インジケーターはコントロールと併用でき、クリックすることで任意のスライドへ直接ジャンプできます。
カルーセルの外側コンテナ内、.carousel-innerの直前に、以下の順序付きリストを追記してください。
<ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol>
この順序付きリストが画面上にインジケーターとして表示されます。各
data-slide-toはスライドの番号（0から開始）に対応しており、activeクラスは.carousel-item側のactiveクラスと対応させておきます。
まとめ
最初は情報量が多く感じられるかもしれませんが、大切なのは公式ドキュメントに沿って進めることです。ドキュメントは非常に丁寧に書かれているため、すべてを暗記する必要はありません。
とはいえ、Bootstrap側でどのように動作しているのかを把握しておくことは大きな財産になります。時間があるときに、圧縮されたCSSやJavaScriptファイルを読んでみて、要素がどのようにスタイリングされ、スクリプトされているのかを覗いてみるのも良い勉強になります。また、サンプルコード内の各属性の意味を理解しておけば、自分のプロジェクトのニーズに合わせて自由にカスタマイズできるようになります。
最後にひとつ注意点を挙げておきます。カルーセルコンポーネントは、アクセシビリティの観点では必ずしも最適な選択肢とは言えません。ページ全体のアクセシビリティを高めることを常に心がけ、カルーセル内にしか存在しない重要な情報は置かないようにしましょう。
それでは、Bootstrapを使った開発の旅が実り多きものとなりますように！
-
Windowsでコマンドプロンプトを使って復元ポイントを作成・活用する方法
Windowsパソコンの調子が悪くなったとき、問題がなかった以前の状態にシステムを戻せるのが「復元ポイント（システムの復元）」の便利なところです。Windows 11や10では、システムの復元ダイアログから簡単に復元ポイントを作成できますが、頻繁に作成したい場合には、もっと手軽な方法があります。 この記事では、コマンドプロンプトとPowerShellを使って復元ポイントを作成・利用する方法を詳しく解説します。 Windowsでシステムの復元を有効にする方法 システムの復元は、Windowsがインストールされているシステムドライブ（C:ドライブ）ではデフォルトで有効になっています。ただし、設定に
-
TkinterのOptionMenuウィジェットで関数を呼び出す方法を解説
TkinterのOptionMenuウィジェットを使って関数を呼び出す方法を、実際の例を通して見ていきましょう。この例では、StringVarオブジェクトを使用し、そのget()メソッドを呼び出します。TkinterにおけるStringVarオブジェクトは、ウィジェットの値を管理するのに役立ちます。ここでは、文字列のリストを持つOptionMenuウィジェットを作成します。ユーザーが選択肢を選ぶと、関数が呼び出され、選択された項目がラベルとして表示される仕組みです。実装手順tkinterライブラリをインポートし、tkinterフレームのインスタンスを作成します。geometryメソッドを使用し