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

吉田先生

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


◎Carousel

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

 

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

 

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

 

キャプション付き

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

 

 

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

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

 

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

 

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

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

無料講座一覧を見る

×