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

このレッスンでは画像にスタイルを定めて レイアウトしてみます。 今このページには 画像が３つ、写真がありますね。 上に２つ小さいものがあって 下にすごく大きいのがあります。 それぞれは div 要素の中に入っていて 上の２つは こちらの div ですね。 それから下の１つ大きいのは、こちらの div 要素ということになっています。 まず大きいほうから 片付けていきましょう。 こちらはソースが指定してあるだけなんですが ここにクラスを指定します。 class でまずは img- 画像のクラスは多く img- になっています。 fluid という設定にします。 そうすると画像が この幅に収まってしまったんですね。 というようにこれ、 レスポンシブになっています。 ですから幅を狭めれば どんどん小さくなるということですね。 それからもう１つ、 img- でご紹介したいのが サムネールです。 これもやはりレスポンシブなんですけど ちょっと違うのは プリントした写真のように 白い縁が周りについているんですね。 細い縁がついていますので サムネールという名前がついています。 では今度は上の２つです。 こちらはやはりクラスを設定していって 今写真デフォルトでは角が 四角なっていますね、角張っています。 これを丸めるというクラスがありまして class の rounded というものです。 そうすると右と左 比べてみるとわかりますけど ちょっとこの角が丸くなっていますね。 両方とも同じようにしましょう。 こちらもそれでは class の rounded ということで両方とも 角が丸くなりました。 それから上の２つ小さいので 位置の調整ができます。 右の画像からいってみますけど ここで float の設定にします。 そして今右側の画像なんですけど float-left を選択しますと 左に行って右にあったものが 右に寄せられちゃうんですね。 そしてじゃあこちら、 右に寄せられてしまった方は 改めて float-right とすれば今度は右端にくっつきます。 では一旦保存して これをブラウザーで確認してみましょう。 Dreamweaver ではファイルから リアルタイムプレビューということで 確認ができます。 下の大きい画像もブラウザーの フルの幅で見ると…