吉田先生
本当によく見ると思うのですが、トップページで画像が変わっていくところありますよね。あれをカルーセルと言うのですが、Bootstrapならかんたんなコードを書くだけ作成することが出来ます。素晴らしいですね。
様々なサイトで、画像がスライドショーのように表示されるのを見た事があるかと思います。
この画像切り替え機能、Bootstrapでは「カルーセル(Carousel)」という名前でテンプレートが用意されています。
「With indicators」というテンプレートを使って説明します。
https://getbootstrap.jp/docs/5.0/components/carousel/#with-indicators
With indicatorsのテンプレートコードの構造を見てみましょう。
大まかには、4パート(枠1つ+カルーセルのパーツ3つ)に分かれています。
まず、一番上にある<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">とその閉じタグ。
これは簡単に言えば「ここからカルーセルを作るよ!」という指示です。
idの部分はBootstrapで決められたものではありません。
お好きにid名を付けることができますが、id指定が必要な箇所(上図、黄色でハイライトした箇所)があります。id名を揃えないと、カルーセルが正常に動かなくなるため注意しましょう。
次に、<div class="carousel-indicators">部分です。
ここは、カルーセルの下部に表示されているインジケーターを作るコードです。
3つ並んでいる長方形が、それぞれbuttonタグで作成されています。
buttonタグの中に1つだけ「active」というCSSクラスが適用されている箇所が、1枚めに表示される画像部分になります。
並んでいる長方形で、白色がはっきりしているところがactive(現在のスライド)です。
<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から始まっている為です。
最後に、下部にある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クラスには、以下のような意味があります。
「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 [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。