Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Bootstrapでリスト/パネル/タブ使って情報をすっきり整理しよう

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

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

 本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってかっこいい画面を作成する方法をご紹介します。前回は、業務アプリケーションのメニュー作成にかかせないナビゲーションバーを説明しました。メニューを作ることで、業務アプリケーションがもつ機能を一目瞭然で整理できるため、ユーザの操作ミスや分かりにくさを減らすことができたと思います。業務アプリケーションは機能だけでなく、表示する情報も多く複雑で、雑多になりがちです。今回は、さまざまな情報を効果的に分かりやすく伝えるリスト/パネル/タブを説明します。

目次

対象読者

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

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

リスト

 業務アプリケーションのコンテンツでまとまりのある情報をあらわすときは、リスト形式にすると分かりやすくなります。ここでは、リストグループの使い方を説明します。

基本のリストグループ

 リストグループを作成するには、ul要素を使います。ul要素のclass属性に"list-group"を指定します。リストのアイテムは、li要素のclass属性に"list-group-item"を指定します。

リスト1 リストグループ(listgroup1.htmlの抜粋)
<ul class="list-group">
    <li class="list-group-item">商品1</li>
    <li class="list-group-item">商品2</li>
    <li class="list-group-item">商品3</li>
</ul>
基本のリストグループ
基本のリストグループ

 リストグループのアイテムの内容に応じてスタイルを変えるには、class属性に以下の属性を指定します。

リストのスタイル
用途 class属性の指定
成功 list-group-item-success
情報 list-group-item-info 水色
注意 list-group-item-warning オレンジ
警告 list-group-item-danger
リスト2 リストのスタイル指定(listgroup2.htmlの抜粋)
<ul class="list-group">
    <li class="list-group-item list-group-item-success">成功</li>
    <li class="list-group-item list-group-item-info">情報</li>
    <li class="list-group-item list-group-item-warning">注意</li>
    <li class="list-group-item list-group-item-danger">警告</li>
</ul>
リストグループのスタイル
リストグループのスタイル

有効化/無効化

 リストグループのアイテムを有効にしたり無効にしたりすることもできます。有効にするときはclass属性に"active"、無効にするときはclass属性に"disable"を指定します。有効/無効化すると背景色が変わります。

リスト3 リストグループの有効化と無効化(listgroup1.htmlの抜粋)
<div class="list-group">
    <a href="#" class="list-group-item active">受信ボックス
        <span class="badge">5</span>
    </a>
    <a href="#" class="list-group-item">送信ボックス</a>
    <a href="#" class="list-group-item disabled">ごみ箱</a>
</div>
リストアイテムの有効/無効化
リストアイテムの有効/無効化

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

著者プロフィール

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

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

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

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

バックナンバー

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