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の作り方

実習のうちの１つである、With captionsの作り方手順を掲載します。 こちらを完成後に、もう一つのカルーセル(Crossfade)を作ってみて頂くと、進めやすいです。

①bootstrapサイトを開いてWith indicatorsのコードコピー。 コピーしたコードを、作成中のcarousel.htmlに貼り付けます。 <div class="container"></div>を先に作成。 その中にコピーしてきたコードを貼り付けると良いでしょう。

URL： https://getbootstrap.jp/docs/4.5/components/carousel/#with-indicators

②With indicatorsの下にある「With captions」のコードをコピー

③carousel.htmlに張り付けたコードの中から「carousel-item」クラスを探す <div class="carousel-item">を探します（３箇所あります）

④一番上の<div class="carousel-item">　～　<div>までを削除。 ②でコピーした「With captions」のコードを張り付けます。

⑤2つめ、3つめも同様にキャプションを入れられるようにする ④で行ったのと同じ様に、<div class="carousel-item">　～　<div>までを削除して、「With captions」のコードを張り付けます。

ここまでのコード （上手く出来なかったら、下記をコピーして使って下さい）

<div class="container">

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <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>
        <div class="carousel-inner">
            <div class="carousel-item">
                <img src="..." alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>...</h5>
                    <p>...</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="..." alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>...</h5>
                    <p>...</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="..." alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>...</h5>
                    <p>...</p>
                </div>
            </div>
        </div>
        <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>
    </div>

</div><!-- /.container -->

⑧imgタグの下にあるh5,pタグに文字を入れます。

文字は、下記のように適当なもので構いません。

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

【カルーセル画像について】

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

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

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