Bootstrapでカッコいいナビゲーションバーを表示しよう

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

　本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってカッコいい画面を作成する方法をご紹介します。前回は、業務アプリケーションで表示するさまざまな情報やデータをわかりやすく表示するための文字／テーブル／ページネーション／アラートなどのUIコントロールについて説明しました。今回は、複数ページにわたる業務アプリケーションを作るうえで欠かせないナビゲーションバーを説明します。

対象読者

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

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

ナビゲーションバーとは

　Bootstrapでメニューを作成するときは、ナビゲーションバーを使います。ナビゲーションバーとは、ウェブアプリがどのような機能をもっているかのメニューや、検索フォームなどをもち、ページのヘッダやフッタなどに配置するものです。また、スマートフォンなど表示幅の狭いモバイル端末では、ナビゲーションバーのメニューの詳細を省略して、ユーザが必要に応じてタップすることで、メニューを表示させるよう制御することもできます。

基本のナビゲーションバー

　まずは次のような、基本のナビゲーションバーを配置する例を説明します。

基本のナビゲーションバー

　サンプルコードは次のとおりです。

リスト1 ナビゲーションバー（navibar1.htmlの抜粋）

<!-- 1.ナビゲーションバーの設定 -->
<nav class="navbar navbar-default">
    <div class="container">
        <!-- 2.ヘッダ情報 -->
        <div class="navbar-header">
            <a class="navbar-brand">在庫管理システム</a>
        </div>
        <!-- 3.リストの配置 -->
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">本部からのお知らせ</a></li>
            <li><a href="#">在庫確認</a></li>
            <li><a href="#">入出庫登録</a></li>
        </ul>
        <!-- 4.ボタン -->
        <button type="button" class="btn btn-default navbar-btn">
            <span class="glyphicon glyphicon-envelope"></span>
        </button>
    </div>
</nav>

　コードの説明は次のとおりです。

1．ナビゲーションバーの作成

　ナビゲーションバーを作成するには、nav要素を使います。nav要素のclass属性に"navbar"を指定します。ナビゲーションバーはWebアプリのイメージに合わせて配色を変えることができます。

　配色は以下の設定ができます。

ナビゲーションバーの配色

class属性の設定値	説明
navbar-default	淡色ナビゲーションバー
navbar-inverse	濃色ナビゲーションバー

　class属性に"navbar-inverse"を指定すると、次のように黒い背景のナビゲーションバーが配置されます。

濃色のナビゲーションバー

2. ヘッダ情報

　ナビゲーションバーにヘッダ情報を指定するには、div要素のclass属性に"navbar-header"を指定します。ヘッダ情報の中に、Webアプリの名前などを表示させたいときは、class属性に"navbar-brand"を指定します。

3.リストの配置

　リストを配置するには、ul要素のclass属性に"nav"と"navbar-nav"を指定します。メニューをクリックするとリンクするようにするにはli要素内のa要素でリンク先URLを指定します。

4.ボタンの配置

　ボタンを配置するには、button要素のclass属性に"btn"と"navbar-btn"を指定します。このサンプルコードでは、ボタンの中に封筒のグリフアイコンを表示しています。ボタンの詳細については、連載の第2回を参考にしてください。

入力フォーム

　メニューに検索フォームなどを配置することもできます。ナビゲーションバーの入力フォームは、form要素のclass属性に"navbar-form"を指定します。なお、ナビゲーションバーのなかに任意の文字列を表示したいときは、p要素のclass属性に"navbar-text"を指定します。

リスト2 入力フォームのあるナビゲーションバー（navibar2.htmlの抜粋）

<p class="navbar-text">在庫検索</p>
<form class="navbar-form">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="キーワード">
    </div>
    <button type="submit" class="btn btn-info">検索</button>
</form>

入力フォームのあるナビゲーションバー