Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

 本連載では、サーバーサイド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>
入力フォームのあるナビゲーションバー
入力フォームのあるナビゲーションバー

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

著者プロフィール

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

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

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

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

バックナンバー

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