画像にカルーセルを使う - Bootstrapのチュートリアル

このレッスンでは画像に carousel を使って 自動的にスライドさせます。今この ドキュメント、ページには 写真が三つありますけれども 画面いっぱいに ３つの写真を広げることにしましょう。 ということで img の要素が３つあるんですけれども carousel を使うためにすでに div 要素が三重に入れ子になっています。 ここに後で class を設定するんですが その前に img の方、広げておきます。 class で ディスプレイの設定ですね。 class で d-block と。その上で 幅を 100%。w-100 という風にすると 画像がウィンドウいっぱいに広がります。 この同じ class を後二つに ペーストしましょう。コピーして ペースト。もう一つペーストと ではブラウザーで確認しときましょっか。 ファイルを保存します。 画像がウィンドウ一杯に広がりました。 ちょっと大きくしすぎると ぼけた感じになりますけれども とりあえずウィンドウ一杯のサイズで 画像が３つ配置されています。 これを carousel にします。 入れ子の div 要素を３つに 順に class を加えます。まず一番 外側ですね。これに class の carousel そして スライドさせますので、もう一つ class slide という class を設定します。 そしてアニメーションさせるために 必要なんですけれども data 属性で ride 、ここに carousel ですね という値を設定します。 次に２番目の div 要素ですね class で carousel- inner と。 carousel の内側ということですね。 次に３つ目。これは各 img 要素を 包んでいる div 要素なんですが これが carousel する項目になりますので class で carousel-item ということで これはそれでは あと２つコピーしましょう。 コピーして２つめにペースト そして３つ目にペーストですね。 あとどれか一つ、スタートの写真を アクティブにします。 ということで、通常は 一番最初でしょうね。 ここに carousel-item の後に active という class を指定します。 これで保存しましょう。 まず最初の写真ですね。…