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

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第7回

　本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってかっこいい画面を作成する方法をご紹介します。前回は、モーダルダイアログ、ドロップダウン、プログレスバーや、ユーザの可視性を高めるためのパンくずリスト／ラベル／バッジなどを説明しました。今回は、アルバムなどでよく使われている、画像を左右にスライドさせて表示するカルーセルパネルや、モーダルダイアログなどをご紹介します。

対象読者

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

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

イメージ（画像）

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

Bootstrapのバージョンアップ

　Bootstrapは2014年11月に3.3.1がリリースされました。主な変更点は、次のとおりです。
 

• カルーセルパネルのパフォーマンス向上
• プログレスバーやリンクなどで使える便利な変数の追加

その他にも、JavaScriptのバグ修正やナビゲーションやパネル、ツールチップ、ボタンなどのアクセシビリティを向上なども追加されています。

本記事以降の連載では、最新バージョンである3.3.1で説明を行います。

基本の画像

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

画像のスタイル

スタイル	class属性の指定
角のある四角	img-rounded
円	img-circle
枠付き	img-thumbnail

リスト1　画像の表示（image.htmlの抜粋）

<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">

画像の表示

コメント付き画像

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

コメント付き画像

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

リスト2　コメント付き画像（mediaobject1.htmlの抜粋）

<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要素に配置します。

リスト3　リスト形式の画像（mediaobject2.htmlの抜粋）

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

リスト形式の画像

サムネイル画像

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

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

リスト4　サムネイル画像（thumbnails.htmlの抜粋）

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

サムネイル画像