メディアオブジェクトを使う - Bootstrapのチュートリアル

このレッスンでは media オブジェクトを 使ってレイアウトしてみます。 今このページに配置されているのは 画像とテキストですね。 テキストの方は h5 と p、 p が２つありますけど 特にスタイルはまだ 設定されていません。 メディアオブジェクトというのは この様な画像とテキストなどを 決まった形で配置するのに 適しています。 では早速メディアオブジェクトを使って レイアウトしてみましょう。 まずこの一番大本の div ですね。 これをクラスを定めて media というふうにします。 早速レイアウトが 変わって来ましたね。 そうしたら今度は image の後ですね。 image の後のテキストの部分、 ここは div にして class は media-body というふうにします。 そしたら、インデントを整えて 閉じましょう。 早速レイアウトが変わっていますけど ちょっと画像とテキストがくっついてますね。 ということですので イメージ、img のほうにクラスを加えて マージン right ですね。 単位は３ぐらいでいいでしょう。 マージン right が m になってないですね。 m にすると画像の右に 単位３の間隔が開きました。 さらにこの media オブジェクトの中で 画像の位置を簡単に変えることができます。 今は左の上にありますね。 これを例えば align-self です。 そして center というふうにすると 垂直方向、真ん中にきます。 それから最後に持っていきたい、 下に持っていきたいという場合には end ということで 下に持っていくことができます。 さらにではこの align-self-end は取ってしまって そして img の位置を div 要素、 media-body の後に 持っていきます。 この div 要素の後ですね。 そうすると位置が今度は 画像が右に寄ります。 ということなので マージンは right じゃまずいですね。 left ということにしましょう。 こんな風に揃えることもできます。 これは取り消して 左上に戻しましょう。 取り消して、 取り消して、 良さそうですね。 これで作業を進めることにします。 media オブジェクトを 入れ子にすることができます。 この media から始まる部分ですね。 それから…