SHOEISHA iD

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

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

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

Bootstrapのモーダルダイアログやプログレスバーを使ってユーザーにやさしいWebアプリにしよう

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

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

ドロップダウン

 モバイル端末などの画面が小さいデバイスの場合は、多くの情報を一度に表示すると、分かりにくくなります。そのため、必要に応じて情報が表示されると便利です。ここでは、タップ/クリックするとドロップダウンするコントロールの説明をします。

基本のドロップダウン

 ドロップダウンを作成するには、div要素のclass属性に"dropdown"を指定します。ドロップダウンでは、div要素にボタンとタップ/クリックしたときに表示されるリストをそれぞれ作成します。ボタンは、button要素のclass属性に"btn"と"dropdown-toggle"を指定し、data-toggle属性を"dropdown"に指定します。これで、ボタンをクリックまたはタップしたときに自動的にドロップダウンが有効になります。

 ドロップダウンメニューであることが分かるように「▼」を表示するには、span要素のclass属性に"caret"を指定します。

 ドロップダウンしたときに表示されるメニューは、ul要素のclass属性に"dropdown-menu"を指定したリストに設定します。

リスト3 ドロップダウン(dropdown1.htmlの抜粋)
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        アカウント管理<span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">アカウント新規登録</a></li>
        <li><a href="#">アカウント変更</a></li>
        <li><a href="#">アカウント削除</a></li>
    </ul>
</div>
基本のドロップダウン
基本のドロップダウン

ヘッダ付きのドロップダウン

 業務アプリでは、ドロップダウンに含めるアイテムに階層をつけたい場合もあります。その場合は、ドロップダウンのアイテムにヘッダ情報をつけます。

 ヘッダ情報は、ul要素内のli要素のclass属性に"dropdown-header"を指定します。ドロップダウンに区切り線を入れるときは、li要素のclass属性に"divider"を指定します。

リスト4 ヘッダ付きのドロップダウン(dropdown2.htmlの抜粋)
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        アカウント管理<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">個別登録</li>
        <li><a href="#">アカウント新規登録</a></li>
        <li><a href="#">アカウント変更</a></li>
        <li><a href="#">アカウント削除</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">一括登録</li>
        <li><a href="#">csv一括登録</a></li>
        <li><a href="#">csv一括削除</a></li>
    </ul>
</div>
ヘッダ付きのドロップダウン
ヘッダ付きのドロップダウン

プログレスバー

 業務アプリケーションのなかで、データベースのデータを検索して情報を表示したり、ネットワーク上の他サーバから情報を取得したりする場合などは処理に時間がかかることがあります。ここではアプリケーションが処理待ち状態のとき、進捗をユーザに知らせるためのプログレスバーについて説明します。

基本のプログレスバー

 プログレスバーを表示するときは、div要素に"progress"を指定します。プログレスバーの各値は以下の属性に指定します。幅はstyle属性にします。たとえば、次のサンプルは0~100までのプログレスバーで進捗が70%のときの例です。

プログレスバーの属性
属性
現在の値 aria-valuenow
最小値 aria-valuemin
最大値 aria-valuemax
リスト5 画像(progressbars1.htmlの抜粋)
<div class="progress">
    <div class="progress-bar" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>
画像
画像

 プログレスバーのスタイルを変えるにはclass属性に以下の属性を指定します。

プログレスバーのスタイル
用途 class属性の指定
成功 progress-bar-success
情報 progress-bar-info 水色
注意 progress-bar-warning オレンジ
警告 progress-bar-danger
リスト6 プログレスバーのスタイル(progressbars1.htmlの抜粋)
<div class="progress">
    <div class="progress-bar progress-bar-success" >~中略</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" >~中略</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" >~中略</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" >~中略</div>
</div>
プログレスバーのスタイル
プログレスバーのスタイル

 プログレスバーの画像をストライプにすることもできます。ストライプにするには、class属性に”progress-bar-striped”を指定します。さらに”active”を指定するとストライプ部分がアニメーションで回転します。

ストライプのプログレスバー
ストライプのプログレスバー

積み上げプログレスバー

 ユーザの1つの操作で、複数の処理が実行されるときは1つのプログレスバーに複数の進捗を積み上げることができます。たとえば、次のサンプルでは35%と20%と10%の進捗を表示した例です。

リスト7 積み上げプログレスバー(progressbars2.htmlの抜粋)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%"
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
  </div>
</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 Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング