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

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

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

• Carousel
• キャプション付き
• Bootstrapでランディングページを作ろう！

◎Carousel

様々なサイトのヒーローエリアで、画像がスライドショーで表示されるのを見た事があるかと思います。Bootstrapでは、カルーセルという名前でテンプレートが用意されています。いくつか種類がありますが、今回は「With indicators」というテンプレートを使って説明します。

では、使い方を見ていきましょう。まずは、テンプレートの構造を見てみます。まず「li data-target」という属性の部分ですが、これは上記イメージ下部の長方形が３つ並んでる部分にあたります。そして「active」というCSSクラスが適用されている箇所ですが、ここは１枚目に表示される画像部分になります。この部分のコードがないと、他のコードに問題がなくてもカルーセルが表示されませんので注意してください。

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

キャプション付き

スライドする画像の上にテキストを乗せる方法です。imgタグの下にキャプションの為のコードを記述します。「carousel-caption」というCSSクラスでキャプション作成を行います。そして隣に記述されている「d-none」と「d-md-block」ですが、共通している「d」とは「display」を意味しています。ですので、画面サイズが「Medium」以上の時は「display: block;」。「Medium」以下の時は「display: none;」で非表示という指定です。

◎Bootstrapでランディングページを作ろう！

この章からBootstrapを使って、ランディングページを制作していきましょう。今回は、ヒーローエリアまでを制作します。では、まずナビゲーションバーを設置します。以下イメージのように制作してください。

次は、カルーセルです。「With indicators」というテンプレートで制作しましょう。ここで１つ注意点があります。カルーセルは、画像の横幅を全て100%に揃えてくれますね。しかし、高さは揃えてくれないので、画像の高さがバラバラになってしまう可能性があります。これでは、統一感がなくなってしまいますね。ですので、カルーセルに入れる画像は高さのみ揃えて制作し使うようにしてください。