SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

  • 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>
リストアイテムの有効/無効化
リストアイテムの有効/無効化

次のページ
パネル

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
業務Webアプリケーションエンジニアのための「Bootstrap」入門連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8223 2014/11/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング