Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/01/05 14:00

 本連載では、サーバーサイド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>
サムネイル画像
サムネイル画像

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:業務Webアプリケーションエンジニアのための「Bootstrap」入門
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5