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

吉田先生

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

 

Carousel

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

カルーセルにはいくつか種類がありますが、 今回は下図の「With indicators」というテンプレートを使って説明します。

 

テンプレートの構造を見てみましょう。

まず「li data-target」という属性の部分ですが、これは上記イメージ下部の長方形が３つ並んでる部分にあたります。

そして「active」というCSSクラスが適用されている箇所ですが、ここは１枚目に表示される画像部分になります。この部分のコードがないと、他のコードに問題がなくてもカルーセルが表示されませんので注意してください。

 

画像を追加したい場合は、以下コード部分をコピぺしてください。 加えて、上記「li data-target」の部分のコードもコピぺする必要があります。そして「data-slide-to=２」の数字の部分に「総画像枚数ー１」の数字を入れます。これは、カウントが０から始まっている為です。

 

 

・キャプション付き

スライドする画像の上にテキストを乗せる方法です。

 

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

 

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

２つ並べて書いているのは画面サイズが「Medium」以上の時は「display: block;」でキャプション部分を表示させる、「Medium」以下の時は「display: none;」で非表示にするという指定です。

 

 

◆実習：カルーセルを作ろう

「carousel.html」というファイルを作成し、カルーセルを動かしてみましょう。 imagesフォルダ内のfood1~3.jpgをカルーセルで表示します。

テンプレートは上記説明の「キャプション付き」でも使用したWith captionsと、フェード効果が加えられているCrossfadeの２つを作ってみて下さい。 どちらもテンプレートはCarousel-Bootstrapに掲載されています。

完成見本

コーディングのポイント

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

With captionsのキャプション部分は

<h5>FOOD1</h5><!-- 画像に合わせて2,3と変更 -->
<p>SAMPLE TEXT sampletext SAMPLE TEXT sampletext SAMPLE TEXT sampletext</p>

など適当な文字を入れてください、

【補足】

カルーセルは、使用する画像の横幅を全て100%に揃えてくれます。 (※カルーセル幅よりも画像幅が大きい場合のみ)

しかし、別途cssで設定しない限り、高さは揃えてくれません。 実習で作成したカルーセル画像の1枚を「a.jpg」に置き換えみると、高さが揃わずに動作がガタガタした印象になるはずです。これでは統一感が無く見にくいですよね。

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

レッスン