Bootstrap でページ作成 ②（カルーセルの実装）
所要時間：60分
前回のレッスンに引き続き、このレッスンでも「サービス紹介ページ」の制作を通して、Bootstrap の各種コンポーネントの扱い方を習得していきます。
このレッスンの目標
- カルーセルコンポーネントの扱い方を理解（復習）する
- サービス紹介ページのメインビジュアルが完成している
このレッスンで作るもの
このレッスンの演習課題では、サービス紹介ページのメインビジュアル部分を作成します。（赤枠部分）
サービス紹介ページの全体像はこちらになります。
それでは早速、Bootstrap の「カルーセル」の復習に入っていきましょう。
カルーセルの使い方（復習）
Bootstrap のカルーセルは、画像やテキストなどのコンテンツを横方向に循環させるスライドショーを作成するコンポーネントでした。
本レッスンの演習課題でも制作するように、カルーセルを使用することで、Web サイトのメインビジュアルにおけるスライドショーを簡単に実装できます。
また、必要に応じて、スライドを前後に送るコントローラーや、スライド数を表示・カウントするインジケーター、スライドのキャプションを表示することもできます。
※ 本レッスンで作成するスライドショーには、スライドのキャプションやインジケーターなども表示していきます。
それでは、Bootstrap の公式リファレンスで紹介されている、カルーセルのテンプレートコードを確認しながら、コンポーネントの扱い方について復習していきましょう。
カルーセルのテンプレートコードは、以下のリンクから確認できます。
テンプレートコードを確認すると、カルーセルコンポーネントのコードは以下のようになっています。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
</div>
上記のコードは 3 枚のスライドを循環させる基本的なカルーセルです。
カルーセルで作成されたスライドは、以下のようなイメージで、画像が切り替わっています。
前回の学習と同様に、ここからはコードを分解しながら解説を進めていきます。
コード解説 1：カルーセルの作成方法
カルーセルを作成する場合は、まずカルーセルの外枠となる要素に carousel クラス と slide クラス 、属性 data-ride="carousel" を追加します。
先程のテンプレートコードでは、以下のようになっていました。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<!-- コード省略… -->
</div>
次に、カルーセルの内枠として複数のスライドをまとめる要素には、carousel-inner クラス を追加します。各スライドには carousel-item クラス を追加し、初期画面で表示されるスライドには active クラス を加えておきます。
また、スライドの中に active クラスが存在しないと、カルーセル自体が表示されなくなるので注意が必要です。
では、テンプレートコードをもう一度、確認してみましょう。各スライドには carousel-item クラス が付与されており、複数のスライドを纏めている要素には、carousel-inner クラス が付与されているのが分かると思います。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<!-- カルーセルを纏めるクラス：carousel-inner -->
<div class="carousel-inner">
<!-- 1枚めのスライド -->
<div class="carousel-item active">
<!-- コード省略… -->
</div>
<!-- 2枚めのスライド -->
<div class="carousel-item">
<!-- コード省略… -->
</div>
<!-- 3枚めのスライド -->
<div class="carousel-item">
<!-- コード省略… -->
</div>
</div>
</div>
以上が、基本的なカルーセルの作成方法でした。
コード解説 2：コントローラーを表示させる方法
基本的なカルーセルの作成方法が理解できたら、次にカルーセルのコントローラーを表示させる実装方法を復習していきましょう。
コントローラーが付与されたテンプレートコードも、先程と同じ以下のリンクから確認できます。
テンプレートコードを確認すると、カルーセルコンポーネントのコードは以下のようになっています。
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
カルーセルにコントローラーを表示する場合は、carousel-inner クラスが設定されたカルーセルの内枠のあとに、2 つの a 要素を配置します。
このとき、carousel クラスを指定したカルーセルの外枠の ID と、コントローラーの a 要素の href 属性を一致させ、コントローラーを有効化します。
先程のテンプレートコードでは、以下のようになっていました。カルーセル外枠の要素の ID と、コントローラーを表示する 2 つの a 要素の href 属性が一致しているのがわかります。
<!-- カルーセルの外枠のID：carouselExampleControls -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- コード省略… -->
</div>
<!-- a要素の href属性：#carouselExampleControls -->
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- a要素の href属性：#carouselExampleControls -->
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
また、次へ送るコントローラーを作成する場合は、まず a 要素に carousel-control-next クラス を追加し、属性 data-slide="next" を加えて JavaScript 経由でスライドを次に送る機能を有効化します。
次に span 要素に carousel-control-next-icon クラス を追加し、「＞」アイコンを作成します。
次へ送るコントローラーと同じように、前に戻るコントローラーを作成する場合は、 a 要素に carousel-control-prev クラス を追加し、属性 data-slide="prev" を加えていきます。
次に span 要素に carousel-control-prev-icon クラス を追加し、「＜」アイコンを作成します。
<!-- 前に戻るコントローラー -->
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
コントローラーを付与したカルーセルコンポーネントの復習は以上です。
また、このレッスンで実装するスライドショーには、前回のカルーセル学習では扱っていない以下のオプションを使用します。
- カルーセルにインジケーターを表示する
- カルーセルにキャプションを表示する
演習課題に入る前に、この 2 つのオプションを実装するコードについて理解しておきましょう。
コード解説 3：インジケーターを表示させる方法
ここでは、カルーセルコンポーネントのオプションの一つである、インジケーターを表示させるコードについて解説していきます。
インジケーターが付与されたテンプレートコードも、Bootstrap の以下リンクから確認できます。
テンプレートコードを確認すると、インジケーターを付与するカルーセルコンポーネントのコードは以下のようになっています。
<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 active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</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 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>
<!-- コントローラー部分 -->
<!-- コード省略… -->
</div>
カルーセルにインジケーターを表示する場合は、carousel-inner クラスが設定されたカルーセル内枠の前に、 carousel-indicators クラス を設定した ol 要素を配置します。
このとき、carousel クラスを設定したカルーセル外枠の ID と、インジケーター内の li 要素の data-target 属性の値を一致させ、属性 data-slide-to={ スライド番号 } を追加します。
スライド番号には 0 からはじまる数値が入り、初期表示されるスライドに対応する li 要素には active クラス を加えます。
インジケーターを実装したカルーセルは、以下のように表示されます。
コード解説 4：キャプションを表示させる方法
それでは次に、カルーセルコンポーネントのオプションの一つである、キャプションを表示させるコードについて解説していきます。
キャプションが付与されたテンプレートコードも、Bootstrap の以下リンクから確認できます。
テンプレートコードを確認すると、キャプションを付与するカルーセルコンポーネントのコードは以下のようになっています。
<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
カルーセルの各スライドにキャプションを表示させる場合、carousel-item クラスが設定された各スライドの子要素に、carousel-caption クラス を追加します。
テンプレートコードでは、画面幅 md 以上でキャプションが表示されるように、Display ユーティリティの d-none クラス と d-md-block クラス を追加しています。
このように、端末サイズによってカルーセルのキャプション表示を切り替えることも可能なので、場合によっては Display ユーティリティの活用して柔軟にキャプション表示できるようにしておきましょう。
※ 本レッスンの演習課題では PC 表示、スマホ表示どちらでもキャプションを表示するので Display ユーティリティは使用していません。
カルーセルコンポーネントの復習と、今回のレッスンで使用するカルーセルオプションの解説は以上です。
演習課題：カルーセルを使ってメインビジュアルを作成しよう
それではレッスンの演習課題として、サービス紹介ページのメインビジュアルにスライドショーを実装してみましょう。
【TODO】
service_pageフォルダ配下にcssフォルダを作成し、その配下にservice.cssの CSS ファイルを作成してください。- 前のレッスンで作成した
service.htmlの HTML ファイルを編集できる状態にしてください。 - 【答え】に記載された見本コードを確認しながら、メインビジュアルのスライドショーを
service.htmlにコーディングしてください。 - 【答え】に記載された見本コードを確認しながら、スライドショー部分のレイアウトを調整する CSS コードを
service.cssにコーディングしてください。 - レッスンの「まとめ」に記載した公式リファレンスを参照して、各種ユーティリティの使い方を確認してください。
フォルダ階層のイメージは以下のようになります。
【答え】
完成版のコードはこちらになります。
service.html（完成コード：今回の演習課題分）
<!-- メインコンテンツ -->
<main>
<!-- スライドショー（ここから） -->
<div
id="myCarousel"
class="carousel slide mb-custom-6"
data-ride="carousel"
>
<!-- カルーセルオプション：インジケーター -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- カルーセル① -->
<div class="carousel-item carousel-custom-item active">
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption text-left">
<h5 class="carousel-caption-title">
キャリアアップのための<br />越境型IT学習サービス
</h5>
<p>Webマーケティング・コーディング・ファイナンスなどが学べます</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>新規登録して、学習を始める</a
>
</p>
</div>
</div>
<!-- カルーセル② -->
<div class="carousel-item carousel-custom-item">
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption">
<h5 class="carousel-caption-title">
あらゆる分野を横断的に<br />学べる越境型IT学習サービス
</h5>
<p>
フロントエンドコーディング、Webマーケティング・Webデザイン・ファイナンスなど、<br />横断的にあらゆる分野のITスキルを学習することができます。
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>サービス詳細を見る</a
>
</p>
</div>
</div>
<!-- カルーセル③ -->
<div class="carousel-item carousel-custom-item">
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption text-right">
<h5 class="carousel-caption-title">カルーセルタイトル</h5>
<p>
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<br />ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>ボタンテキスト</a
>
</p>
</div>
</div>
</div>
<!-- カルーセルオプション：コントローラー -->
<a
class="carousel-control-prev"
href="#myCarousel"
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="#myCarousel"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- スライドショー（ここまで） -->
</main>
それぞれ、コードの意味を理解しながら、以下の流れでコーディングを進めてください。
ステップ ①：CSS 読み込みリンクを実装する
下記のコードを Bootstrap の CSS 読み込み部分より下に追加します。
service.html（追加コード）
<!-- カスタムCSS -->
<link href="css/service.css" rel="stylesheet" />
ステップ ②：メインビジュアルの大枠を実装する
下記のコードをヘッダーの実装コードより下に追加します。
service.html（追加コード）
<!-- 追加コード：メインビジュアルの大枠を実装する -->
<!-- メインコンテンツ -->
<main>
<!-- スライドショー（ここから） -->
<div
id="myCarousel"
class="carousel slide mb-custom-6"
data-ride="carousel"
>
</div>
<!-- スライドショー（ここまで） -->
</main>
ステップ ③：カルーセルのインジケーターを実装する
下記のコードをカルーセルの外枠の中に実装します。
service.html（追加コード）
<!-- 追加コード：インジケーターを実装する -->
<!-- カルーセルオプション：インジケーター -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
ステップ ④：カルーセルの中身を実装する
下記のコードを、ステップ ③ で追加したコードの下に実装します。
service.html（追加コード）
<!-- 追加コード：カルーセルの外枠クラスの中に実装する -->
<div class="carousel-inner">
<!-- カルーセル① -->
<div class="carousel-item carousel-custom-item active">
</div>
<!-- カルーセル② -->
<div class="carousel-item carousel-custom-item">
</div>
<!-- カルーセル③ -->
<div class="carousel-item carousel-custom-item">
</div>
</div>
さらに、各カルーセル項目の中には、上から順に以下の SVG 画像を入れ込みます。
<!-- 追加コード：１つ目の「carousel-item」クラスの中に実装する -->
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption text-left">
<h5 class="carousel-caption-title">
キャリアアップのための<br />越境型IT学習サービス
</h5>
<p>Webマーケティング・コーディング・ファイナンスなどが学べます</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>新規登録して、学習を始める</a
>
</p>
</div>
<!-- 追加コード：２つ目の「carousel-item」クラスの中に実装する -->
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption">
<h5 class="carousel-caption-title">
あらゆる分野を横断的に<br />学べる越境型IT学習サービス
</h5>
<p>
フロントエンドコーディング、Webマーケティング・Webデザイン・ファイナンスなど、<br />横断的にあらゆる分野のITスキルを学習することができます。
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>サービス詳細を見る</a
>
</p>
</div>
<!-- 追加コード：３つ目の「carousel-item」クラスの中に実装する -->
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption text-right">
<h5 class="carousel-caption-title">カルーセルタイトル</h5>
<p>
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<br />ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>ボタンテキスト</a
>
</p>
</div>
ステップ ⑤：カルーセルのコントローラーを実装する
以下の追加コードをステップ ④ で追加した「carousel-inner」クラスの下に実装していきます。
service.html（追加コード）
<!-- 追加コード：「carousel-inner」クラスの下に実装する -->
<a
class="carousel-control-prev"
href="#carouselExampleControls"
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="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
ステップ ⑥：CSS を実装する
下記のコードを新規作成したservice.css のファイルに実装します。
service.css（追加コード）
body {
padding: 3rem 0;
color: #5a5a5a;
}
.mb-custom-6 {
margin-bottom: 4rem;
}
.carousel-custom-item {
height: 32rem;
}
.carousel-caption-title {
font-size: 1.75rem;
}
@media (min-width: 768px) {
.carousel-custom-caption {
bottom: 6rem;
}
.carousel-caption-title {
font-size: 2.5rem;
}
}
完成版のコード
もう一度、完成版のコードを提示しますので、同じように実装できているか確認してみましょう。
コメントは表示結果に直接影響を与えないので、記載の有無は問いません。表示結果が同じようになっていれば OK です。
service.html（完成コード：全体）
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<title>サービス紹介ページ</title>
</head>
<body>
<!-- ヘッダー -->
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">マナジョブ</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"
>学習コース <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">サービス内容</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
登録する
</button>
</form>
</div>
</nav>
</header>
<!-- メインコンテンツ -->
<main>
<!-- スライドショー（ここから） -->
<div
id="myCarousel"
class="carousel slide mb-custom-6"
data-ride="carousel"
>
<!-- カルーセルオプション：インジケーター -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- カルーセル① -->
<div class="carousel-item carousel-custom-item active">
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption text-left">
<h5 class="carousel-caption-title">
キャリアアップのための<br />越境型IT学習サービス
</h5>
<p>Webマーケティング・コーディング・ファイナンスなどが学べます</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>新規登録して、学習を始める</a
>
</p>
</div>
</div>
<!-- カルーセル② -->
<div class="carousel-item carousel-custom-item">
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption">
<h5 class="carousel-caption-title">
あらゆる分野を横断的に<br />学べる越境型IT学習サービス
</h5>
<p>
フロントエンドコーディング、Webマーケティング・Webデザイン・ファイナンスなど、<br />横断的にあらゆる分野のITスキルを学習することができます。
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>サービス詳細を見る</a
>
</p>
</div>
</div>
<!-- カルーセル③ -->
<div class="carousel-item carousel-custom-item">
<svg
class="bd-placeholder-img"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#777" />
</svg>
<!-- カルーセルオプション：キャプション -->
<div class="carousel-caption carousel-custom-caption text-right">
<h5 class="carousel-caption-title">カルーセルタイトル</h5>
<p>
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<br />ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button"
>ボタンテキスト</a
>
</p>
</div>
</div>
</div>
<!-- カルーセルオプション：コントローラー -->
<a
class="carousel-control-prev"
href="#myCarousel"
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="#myCarousel"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- スライドショー（ここまで） -->
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>
service.css（完成コード）
body {
padding: 3rem 0;
color: #5a5a5a;
}
.mb-custom-6 {
margin-bottom: 4rem;
}
.carousel-custom-item {
height: 32rem;
}
.carousel-caption-title {
font-size: 1.75rem;
}
@media (min-width: 768px) {
.carousel-custom-caption {
bottom: 6rem;
}
.carousel-caption-title {
font-size: 2.5rem;
}
}
【結果】
以下のようにスライドが自動で切り替わっていく、スライドショーが表示されたら OK です。
スマホサイズで表示した際も、以下のように表示されていれば OK です。
まとめ
このレッスンでは Bootstrap のカルーセルコンポーネントを使用したスライドショーの作成について学びました。
コードの解説を何度か読み返して理解を深め、演習課題にチャレンジしてみましょう！
最後に、今回のレッスンで確認した Bootstrap 公式のリファレンスをまとめておきますので、復習するときは以下の公式リファレンスも参考にしてください。
【公式リファレンス】
ノートをとる
メモが保存されました
メモ一覧を見る