カルーセルにキャプションを入れる - Bootstrapのチュートリアル

このレッスンでは carousel の画像に キャプションを加えます。 画像は今すでにこちらのウィンドウで carousel で動いていますね。 それから今の写真だとちょっと 見にくいですけれども 次へ、前へ、それから現在の画像の インディケーターというものも 配置されています。そしてキャプション用の 文字が、この下にとりあえず置いてあります、 タイトルと（不明瞭）、これ 意味ないですけれども 意味をなしてないんですが あたり用のテキストですね。 これを画像ごとに付け加えたいと思います。 さてその場合には、まずこれが 最初の画像ですね。 img 要素、その下に加えていきます。 div で class carousel-caption です。 そして閉じましょう。 h5 と　それから p 要素 これが最初の画像の テキストという想定です。 インデントを整えましょう。 このインデントはちょっと 狂ってますね、ここですか。 では次、２つ目の画像ですね。 これはまた img 要素のあとに div 要素作って コピーしちゃいましょうか。 コピーして ペーストして 閉じます。そしたらこれをまたコピーして ３番目の画像にも使ってしまいましょう。 コピーして、そして img の要素の後に ペーストと。 少しスクロールします。 項目２のテキストですね、これは ここに入ります。 この時にずれちゃうんですね。 インデントを整えます。 それから３番目の h5 と p 要素 それをここに 入れます。今度はずれてないですね。 ということでキャプションが 入りましたので保存しましょう。 ファイルを保存します。 ウィンドウを少し狭くしますと キャプションが上がってきましたね。 項目１。このコントロールで 先行きましょう。 項目２、項目３と キャプションがちゃんと入りました。 もっとも幅を狭くした時 さらに これだと写真が見えないですね。 写真がメインである場合には これぐらいだったらもうキャプションは 消してしまいたいということで ブレークポイントを設けて、一定の 幅よりも小さくなったら キャプションは 出さないようにしましょう。 キャプションの div 要素はこの class carousel-caption ですね。 これに対してさらに class を加えます。 表示の class です。…