KB)本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってカッコいい画面を作成する方法をご紹介します。前回は、業務アプリケーションで表示するさまざまな情報やデータをわかりやすく表示するための文字/テーブル/ページネーション/アラートなどのUIコントロールについて説明しました。今回は、複数ページにわたる業務アプリケーションを作るうえで欠かせないナビゲーションバーを説明します。本記事は、次の方を対象にしています。HTML5/CSS/JavaScriptを使ってWebアプリケーションの画面作成ができる方デザインに自信のない方ナビゲーションバーとはBootstrapでメニューを作成するときは、ナビゲーションバーを使います。ナビゲーションバーとは、ウェブアプリがどのような機能をもっているかのメニューや、検索フォームなどをもち、ページのヘッダやフッタなどに配置するものです。スマートフォンなど表示幅の狭いモバイル端末では、ナビゲーションバーのメニューの詳細を省略して、ユーザが必要に応じてタップすることで、メニューを表示させるよう制御することもできます。基本のナビゲーションバーまずは次のような、基本のナビゲーションバーを配置する例を説明します。基本のナビゲーションバーサンプルコードは次のとおりです。&lt;/div&gt;&lt;/nav&gt;コードの説明は次のとおりです。1.ナビゲーションバーの作成ナビゲーションバーを作成するには、nav要素を使います。nav要素のclass属性に"navbar"を指定します。ナビゲーションバーはWebアプリのイメージに合わせて配色を変えることができます。配色は以下の設定ができます。説明navbar-default淡色ナビゲーションバーnavbar-inverse濃色ナビゲーションバーclass属性に"navbar-inverse"を指定すると、次のように黒い背景のナビゲーションバーが配置されます。ヘッダ情報ナビゲーションバーにヘッダ情報を指定するには、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"を指定します。