Bootstrapで画像をアルバムみたいにカッコよく表示しよう

対象読者

　本記事は、次の方を対象にしています。

• HTML5／CSS／JavaScriptを使ってWebアプリケーションの画面作成ができる方
• デザインに自信のない方

イメージ（画像）

　業務アプリケーションでは、商品や製品などの情報を表示するとき、文字や数値による説明だけでなく画像を使用するとぐっと分かりやすくなります。また、その画像に説明を加えて、商品一覧などリスト形式にする場合などもよくあります。ここでは、Bootstrapでの画像の表示について説明します。

基本の画像

　画像を表示するときのスタイルを指定するには、img要素のclass属性に以下の値を設定します。また、画像のサイズをデバイス幅に応じて拡大縮小するには、class属性に"img-responsive"を指定します。

<img src="images/sample.jpg" class="img-rounded img-responsive">
<img src="images/sample.jpg" class="img-circle img-responsive">
<img src="images/sample.jpg" class="img-thumbnail img-responsive">

画像の表示

コメント付き画像

　たとえば商品の説明などは、次のサンプルのように画像に説明を加えると分かりやすくなります。

コメント付き画像

　このサンプルのコードは次のとおりです。

<div class="media">
    <!-- 1.画像の配置 -->
    <a class="media-left" href="#">
        <img class="media-object" src="images/list1.jpg">
    </a>
    <!-- 2.画像の説明 -->
    <div class="media-body">
        <h4 class="media-heading">商品1</h4>
        <p>商品1の説明です</p>
    </div>
</div>
<hr />
<div class="media">
    <!-- 2.画像の説明 -->
    <div class="media-body">
        <h4 class="media-heading">商品2</h4>
        <p>商品2の説明です</p>
    </div>
    <!-- 1.画像の配置 -->
    <a class="media-right" href="#">
        <img class="media-object" src="images/list2.jpg">
    </a>
</div>

　コードの説明は次のとおりです。

1.画像の配置

　画像を配置するときは、div要素のclass属性に"media"を指定します。そして配置する画像のimg要素のclass属性に"media-object"を指定します。ここで画像を左寄せにしたいときはclass属性に"media-left"、右寄せにしたいときはclass属性に"media-right"を指定します。

2.画像の説明

　画像につけるコメントなどの情報はclass属性に"media-body"を指定したdiv要素内に配置します。ヘッダ情報をつけたいときはclass属性に"media-heading"を指定します。

リスト形式の画像

　商品一覧のようにコメント付きの画像をリスト形式で表示するには、ul要素のclass属性に"media-list"を指定します。表示したい画像はclass属性に"media"を指定したli要素に配置します。

<ul class="media-list">
    <li class="media">
    ～中略～
    </li>
    <li class="media">
    ～中略～
    </li>
</ul>

リスト形式の画像

サムネイル画像

　サムネイルとはたくさんの画像を一覧表示するために縮小された画像のことです。モバイル端末などで大量の画像を一度に表示するのは、リソースに負荷がかかりますので、サムネイルを作成すると良いでしょう。サムネイルを使用するには、画像を配置するa要素のclass属性に"thumbnail"を指定します。

　サムネイル画像の配置方法は、Bootstrapのグリッドシステムを使用します。グリッドシステムの詳細については、第一回の連載を参考にしてください。

<div class="row">
    <div class="col-md-1">
        <a href="#" class="thumbnail">
            <img src="images/list1.jpg">
        </a>
    </div>
    ～中略～
</div>

サムネイル画像