本当によく見ると思うのですが、トップページで画像が変わっていくところありますよね。あれをカルーセルと言うのですが、Bootstrapならかんたんなコードを書くだけ作成することが出来ます。素晴らしいですね。
Carousel
様々なサイトのヒーローエリアで、画像がスライドショーで表示されるのを見た事があるかと思います。Bootstrapでは、カルーセルという名前でテンプレートが用意されています。
いくつか種類がありますが、今回は「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;」で非表示にするという指定です。
Bootstrapでランディングページを作ろう！
Bootstrapを使って、LP(ランディングページ)を制作していきましょう。 「bootstrap-works」フォルダの中に新しくlp.htmlというファイルを作り、そこにコードを書いていってください。
完成見本はこちらです。
◆LP制作課題①
ヘッダーからヒーローエリアまでを作成します。 今回のレッスンで登場したカルーセルも導入しますよ。
ナビゲーションを作ろう
図のようなナビゲーションバーを作成します。
コーディング順序
- Navber-Bootstrapからナビバーのテンプレートをコピー（Color schemesは *navbar-dark* と *bg-dark* を選択）してhtmlファイルに張り付ける。
- .brandには「LP」とテキストを入力
- メニューは「HOME・サービス概要・サービス一覧・お問い合わせ」の４つに変更。
- サービス一覧はdropdownに設定し、サービス1・サービス2を入れ子に。
- 入力フォーム内に「メールアドレス」の文字を表示させる。
- 右端のボタン文字を「会員登録」に変更する。
ヒーロー画像をカルーセルにしよう
次にヒーロー画像をカルーセルで表示させます。
キャプション内テキストは以下のように設定してください。
<h1>SAMPLE TEXT1</h1>
<p>SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT</p>
コーディング順序
- Carousel-Bootstrapから*With indicators* のテンプレートをコピー＆ペースト。
- 画像はフォルダに入っているhero1~3の3枚を使用。
- 3枚ともにキャプションテキストを入力する。
- デフォルトだとキャプションの文字色は白。見えにくいので色を変更するためにオリジナルのcssクラス「carousel-caption」を追加し、cssで文字色を#333に指定します。
カルーセルは、画像の横幅を全て100%に揃えてくれます。 しかし、高さは揃えてくれないので、画像の高さがバラバラになってしまう可能性があります。これでは、統一感がなくなってしまいますね。ですので、カルーセルに入れる画像を用意するときには高さを揃えたものを制作して、使用するようにしてください。