カードに画像を加える - Bootstrapのチュートリアル

このレッスンでは、カードに加えた 画像のスタイルについてご説明をします。 今、開いているドキュメントの 画像とテキストには まだカードの設定はしてありません。 ちょっと写真が大きいので 一回ブラウザで見ておきましょう。 大きな画像の下に テキストが書いています。 特にスタイルの設定をしていませんので レスポンシブにもなっていません。 こんな感じですね。 これをカードの中に入れていきます。 クラスでスタイルは設定していないものの div 要素とかその構成については カードにする想定で構成してあります。 ですから、まず一番外側ですね、 この div 要素のクラスに対して カードを設定します。 ペンギンが歪んでしまいましたけど 気にせずに この img 要素ですね。 ここにクラスを設定します。 このクラスは card-img- そして どこに配置するのかという 設定をします。 top、上にありますので top ということにします。 そうするとちゃんとカードに 収まります。 では、この h３はメインタイトルですので クラスは card-title それから、この英語のところ サブタイトルということにしましょう。 クラスで card-subtitle もう少しクラスを加えて 下の本文と間隔を開けましょう。 マージンボトムですね。 単位を３として ちょっとグレーにしましょう。 text-muted ということで グレーになります。 この本文のところですね、 これは ｐ要素ですけど ここにクラスで card-text と それから　この div 要素 body を設定するのを忘れていましたね。 クラスで card-body ということで 基本的な設定ができました。 一旦保存して確認してみましょう。 ファイルを保存します。 ウィンドウがフルサイズですと ペンギンの写真、大きいのですが カードはレスポンシブです。 ですからこのウィンドウ幅を縮めていくと カードの余白であるとか あるいはペンギンの写真ですね、 サイズもウィンドウの幅に応じて 変わっていきます。 画像の img 要素に設定したクラス card-img-top top があるなら bottom もあるだろうと その通りですね。 bottom としても 位置は動きません。 これは位置を変えるための クラスではないのですね。…