Bootstrap5のカルーセルを理解する【図解たっぷりBootstrap5入門】

吉田先生

本当によく見ると思うのですが、トップページで画像が変わっていくところありますよね。あれをカルーセルと言うのですが、Bootstrapならかんたんなコードを書くだけ作成することが出来ます。素晴らしいですね。

BootstrapのCarousel

様々なサイトで、画像がスライドショーのように表示されるのを見た事があるかと思います。
この画像切り替え機能、Bootstrapでは「カルーセル(Carousel)」という名前でテンプレートが用意されています。

「With indicators」というテンプレートを使って説明します。
https://getbootstrap.jp/docs/5.0/components/carousel/#with-indicators

カルーセルの構造

With indicatorsのテンプレートコードの構造を見てみましょう。
大まかには、4パート(枠1つ+カルーセルのパーツ3つ)に分かれています。

1.枠組み

まず、一番上にある<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">とその閉じタグ。
これは簡単に言えば「ここからカルーセルを作るよ!」という指示です。

idの部分はBootstrapで決められたものではありません。
お好きにid名を付けることができますが、id指定が必要な箇所(上図、黄色でハイライトした箇所)があります。id名を揃えないと、カルーセルが正常に動かなくなるため注意しましょう。

2.インジケーター

次に、<div class="carousel-indicators">部分です。
ここは、カルーセルの下部に表示されているインジケーターを作るコードです。

3つ並んでいる長方形が、それぞれbuttonタグで作成されています。

buttonタグの中に1つだけ「active」というCSSクラスが適用されている箇所が、1枚めに表示される画像部分になります。
並んでいる長方形で、白色がはっきりしているところがactive(現在のスライド)です。

3.スライド部分

<div class="carousel-inner">の中身は、スライドで切り替わる部分です。

1スライドずつが<div class="carousel-item">でまとめられています。
<div class="carousel-item">の中に1つだけ「active」というCSSクラスが適用されている箇所がありますね。

「active」クラスが指定されている部分が、1枚目に表示される画像部分になります。
どのスライドにも「active」クラスがないと、他のコードに問題がなくてもカルーセルが表示されませんので注意してください。

4枚目、5枚目…とスライドの数を増やしたい場合は<div class="carousel-item">~</div>までを増やします。

加えて、インジケーター付きの場合は、2で解説したインジケーターのbuttonタグも増やす必要があります。
そして「data-bs-slide-to=2」の数字の部分に「総画像枚数ー1」の数字を入れます。
これは、カウントが0から始まっている為です。

4.前後切り替えボタン

最後に、下部にある2つの<button>タグ部分。

これはスライドを前、後ろに切り替えるボタンを作るためのコードです。
黄色でハイライトしている data-bs-target の中の「#carouselExampleIndicators」は、カルーセルのidに応じて変更します。

キャプションを付ける

スライドする画像の上にテキストを乗せる方法です。
「With captions」のテンプレートコードを使って説明します。

Carousel-https://getbootstrap.jp/docs/5.0/components/carousel/#with-captions

コードをみてみると、With indicatorsと基本的な構成は一緒であることがわかります。

キャプションは、スライド表示させる画像(imgタグ)の下に記述されています。
「carousel-caption」というCSSクラスを追加することで、キャプション部分がカルーセル画像下部に重なって表示されるようにBootstrapが設定してくれています。

「carousel-caption」の隣に記述されている「d-none」と「d-md-block」。共通している「d」は「display」を意味しています。

2つ並べ書かれているCSSクラスには、以下のような意味があります。

  • キャプション部分をdisplay: none;にする(表示させない)
  • 画面サイズがMedium以上ならdisplay: block;にする(表示させる)

【実習】カルーセルを作ろう

「carousel.html」というhtmlファイルを作成し、カルーセルを動かしてみましょう。
素材のimagesフォルダ内にある、food1~3.jpgをスライド切り替えで表示させてみます。

テンプレートコードは上記説明「キャプション付き」でも使用したWith captionsを使用します。

【完成見本】

コーディング手順

STEP1.containerクラスのdivを用意

そのままテンプレートコードのみを張り付けると、横に広がりすぎます。
カルーセル全体を囲うための<div class="container">を作ってください。

STEP2.With captionsのテンプレートコードをコピー&ペースト

Bootstrapサイトから、With captionsのテンプレートコードをコピー。
1で作った<div class="container">の中にペーストしてください。

STEP3.imgタグに、それぞれ画像パスを入れる
Bootstrapサイトからコピーしてきた時点では、画像タグは「img src=...」と空っぽです。
それぞれimagesフォルダ内にあるfood1.jpg, food2.jpg, food3.jpgを表示させるよう、パスを書き換えましょう。

STEP4.carousel-captionの見出しを変更する
<div class="carousel-caption">の中にある、h5タグ内を打ち替えてください。
それぞれ、画像の名前と連動して「FOOD1」「FOOD2」「FOOD3」という見出しにします。

STEP5.ブラウザで表示と動作を確認する
htmlを上書き保存して、ブラウザでカルーセルが出来ているか見てみましょう。
スライドが切り替わるか、インジケーターや前後切り替えのボタンは効くか、確認してください。

カルーセルに使う画像について

カルーセルは、使用する画像の横幅を全て100%に揃えてくれます。
(※カルーセル幅よりも画像幅が大きい場合のみ)
しかし、別途cssで設定しない限り、高さは揃えてくれません。

例えば、スライド表示する画像の一枚を「a.jpg」に置き換えてみてください。
そうすると、高さが揃わずに、切り替えの時にガタガタした動きになるはずです。これでは統一感が無く見にくいですよね。

カルーセルに入れる画像を用意するときには、縦横同サイズの画像を使用するのがベスト。最低でも高さを揃えるようにしましょう。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×