[Bootstrap] IMG関連のスタイルおよびカスタマイズのまとめ

公開: 2015年8月1日（土）

Twitter Bootstrap3のimgタグ関連の機能の使い方やカスタマイズのまとめです。

レスポンシブデザインで画像を使う
画像の角丸化
画像を円形にする
画像に枠を付ける
画像のリンク化
画像にテキストを回り込ませる
画像にテキストを必ず回り込ませる

レスポンシブデザインでイメージファイルを使う

レスポンシブデザインのサイトで、イメージファイルもレスポンシブ化するには、.img-responsiveクラスをimgタグに設定します。そうすると、イメージファイルの横幅を自動的にカラム幅に合わせてくれます。

<img class='img-responsive' src='...'>

角丸

角丸ならイメージファイルを編集しなくとも、Bootstrapで対応してくれます。

<img class='img-rounded' src='...'>

初期設定では.img-roundedのborder-radiusは6pxに設定されています。これをカスタマイズし、任意の曲率に設定したい場合、CSSを上書きします。

下の例ではいくつかのクラスを用意し、ラウンドを20pxに設定しています。

<style type='text/css'>
.img-rounded-3px{ border-radius: 3px; }
.img-rounded-10px{ border-radius: 10px; }
.img-rounded-20px{ border-radius: 20px; }
</style>
<img class='img-rounded img-rounded-20px' src='...'>

.img-responsiveクラスと同時に使えば角丸かつレスポンシブとなります。

サークル

画像を円形にしてくれるクラスもあります。

<img class='img-circle' src='...'>

ただし、元画像が正方形でないと真円にはなりません。

レスポンシブ対応するには.img-responsiveクラスと同時に使います。

枠付

<img class='img-thumbnail' src='...'>

枠付きもカスタマイズ可能。.img-thumnailクラスのスタイルは以下の通りです。

.img-thumbnail {
  display: inline-block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

なので、paddingやborderの値を変えれば、枠線のスタイルを変更することができます。以下は新たに枠線色やpadding幅を変更したクラスを用意し、初期スタイルを上書きした例。

<style type='text/css'>
.img-thumbnail-dotted {
  padding: 2px;
  border: 1px dotted #555;
  border-radius: 2px;
}
</style>
<img class='img-thumbnail img-thumbnail-dotted' src='...'>

レスポンシブ対応するには.img-responsiveクラスと同時に使います。

サムネイル画像をリンクにする

サムネイル画像をリンクにしたい場合、画像ではなくaタグに.thumbnailクラスを設定します。a.thumbnailはwidthが100％なので、必ず.col-xx-nクラスで囲む。a.thumbnailの内側のimgタグは.img-responsiveクラスを設定しなくとも、レスポンシブイメージとなります。

<div class='row'>
<div class='col-xs-2 col-md-2'>
<a href='#' class='thumbnail'><img src='...' alt='...'></a>
</div>
</div>

画像にテキストを回り込ませる

画像にテキストを回り込ませたい場合は、imgタグに.pull-leftか.pull-rightクラスを追加し、marginを設定します。

画像を左側に配置し、テキストを右側に回り込ませたい場合は.pull-left、画像を右側に配置し、テキストを左側に回り込ませたい場合は.pull-rightです。.pull-leftの場合のmarginは右と下に、.pull-rightの場合のmarginは左と下に設けます。また、.img-responsiveクラスも追加します。

こうしておくと、画面の横幅が画像の横幅より小さい時は、画像は画面と同じ横幅まで広がり、それ以外の時はテキストが周囲に回りこんでくれます。

なお、.pull-leftおよび.pull-rightのfloatを解除するには.clearfixクラスを使います。

<img class='pull-left img-responsive' style='padding:0;margin:0 15px 15px 0;' src='...'>
<p>このテキストは回り込ませる。</p>
<p class='clearfix'>このテキストまで回り込ませる。</p>
<h2>この見出しは回り込ませたくない</h2>

上記のようにすると、h2から回り込みが解除されます。

左寄せの場合

<img class='pull-left img-responsive' style='margin:0 15px 15px 0;' src='...'>
<p>このテキストが画像右側に回りこむ</p>

右寄せの場合

<img class='pull-right img-responsive' style='margin:0 0 15px 15px;' src='...'>
<p>このテキストが画像左側に回りこむ</p>

画面サイズにかかわらず必ずテキストが回り込むようにする

さて、上記の回り込みは画面サイズが画像サイズより小さい場合、テキストの回り込みは解除され、画像は画面いっぱいに広がる設定でした。

しかしながら、画面や画像の大きさに関わらず、必ずテキストを回り込ませたいという場合もあると思います。

この章は小さなスマホでも回りこみが解除されないようにしてあります。bootstrapのグリッドシステムでは、.col-xs-nは画面サイズがどれだけ小さくとも、直前のカラムの下にもぐりこませない時に使うクラスですが、これを使って回り込みの固定を行います。

<div class='row'>
<div class='col-xs-12'>
<img class='pull-left col-xs-5' style='padding:0;margin:0 15px 0 0;' src='...'>
<p>このテキストが回りこむ</p>
</div>
</div>

.col-xs-nクラスはpaddingが四方に設定されているので、これをいったん0にしてからmarginでテキストとの距離を設けています。

Twitter Bootstrap

Pocket