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

CodeZine / 2014年11月5日 14時0分

ピルナビゲーションの無効化

 本連載では、サーバーサイド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>
リストアイテムの有効/無効化




CodeZine

トピックスRSS

ランキング