図表のスタイルを定める - Bootstrapのチュートリアル

このレッスンでは図表と そのキャプションにスタイルを定めます。 今開いているドキュメント、画像と それからキャプションにしようという予定の テキストがあるんですが、今のところ図表の フィギュアの要素を使っていません。 div 要素の中に img と p があるだけですね。 ですからまず div を 図表のフィギュアに書き換えましょう。 figure 要素ですね。 そしてそれを閉じる。 それから p 要素の方なんですが こちらキャプションですので figcaption ということにします。 そして閉じる。 この表示の方は さほど変わっていません。 ここにクラスを設定することにします。 その前に画像に クラスを定めましょうか。 画像のクラスです。 画像のクラス img の中の thumbnail としましょう。 そうすると画像の周りに プリントした写真のような縁がつきます。 この後 figure の方の クラスを加えていきます。 まず親のフィギュアなんですけど クラスは要素と同じです。 figure ということで 設定をします。 今のところ表示には 特に変化はありませんね。 そして今度は画像の方です。 この img-thumbnail に加えて figure-img これを設定すると この画像と文字の間隔が 少し変わります。 Enter キーでオートコンプリート、 コード補完で設定しますと 「皇帝ペンギンの子」 がちょっと下がりますね。 そしたら今度は figcaption の方です。 こちらにもクラスを 設定するんですけど figure-caption こちらは要素名とは違って 間にハイフンが入ります。 figure-caption ということで まだ設定しませんけど この文字のカラーが少し変わります。 それから文字の大きさも 少し変わりましたかね。 こんな感じになります。 このレッスンでは図表と そのキャプションにスタイルを定めました。 フィギュアにはクラス figure、 それからイメージ img には figure-img、 そしてキャプションには figure-caption を定めればいいということでした。