[Bootstrap]グローバルナビゲーションのコンポーネント”Navbar”の使い方

更新：2017/12/05
ライター：IBC

今回は Bootstrap を使って、グローバルナビゲーションを作成します。

Bootstrap を使ってグローバルナビゲーションを作成するには。
Navbar を使います。

これを使うことで、レスポンシブ対応となり、画面が小さいときには３本線のアイコンに変わります。

Navbar でグローバルナビゲーションを作成するには、まず領域を nav で囲み、
class=”navbar” を指定することで、ナビゲーションバーの使用を宣言します。

このときに、色の指定ができますが、
navbar-default　なら、白背景ベースのナビゲーションバーとなり、

navbar-inverse　を指定すると、黒背景ベースのナビゲーションバーとなります。

領域指定の構文は、デフォルトの色の指定で行うのなら

<nav class="navbar navbar-default">

</nav>

</nav>

この領域の中にナビゲーションメニューを設置していきます。

まずはナビゲーションヘッダー領域を指定します。
これはdiv で領域を設定し、class=”navbar-header”を指定します。
この領域にはロゴ画像や３本線のアイコン、通称ハンバーガーメニューを設置します。

ハンバーガーメニューボタンの構文は

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#任意のID">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

</button>

となります。

３本線を構成しているのが

<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

の部分になります。

ハンバーガーメニューボタンは、スマホなどの小さい画面のときに、
ナビゲーションメニューをたたんで表示するのに使われます。
なお、PCでの画面などのように大きな画面の場合、
グローバルナビゲーションメニューが表示されます。

次に、ナビゲーションメニューを作成します。

まず、メニュー領域を div で設定し、
ウインドウサイズでハンバーガーメニューボタンと
グローバルナビゲーションメニューに切り替わるように
class=”collapse”　と class=”navbar-collapse” を設定します。

構文は

<div id="任意のID" class="collapse navbar-collapse">

</div>

</div>

となります。

この中にメニューを作成します。

まず、ul タグにナビゲーションを使用するために class=”nav” を指定し、
ナビゲーションバーの使用をするために class=”navbar-nav”を指定します。

構文としては

    <ul class="nav navbar-nav">
      <li><a href="">メニュー1</a></li>
      <li><a href="">メニュー2</a></li>
      <li><a href="">メニュー3</a></li>
    </ul>

</ul>

というようになります。

ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。

なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

html:5

html:5

として展開するととして展開すると

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</html>

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

次に Bootstrap のライブラリの読み込みです。
ダウンロードして読み込む方法と、ネットから読み込む方法がありますが、
今回はネットから読み込む方法CDNの方法を使います。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

1	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

でCSSファイルの読み込みをします。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

1	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

で javascript を読み込みます。

この２つがないと Bootstrap は機能しません。

次に、グローバルナビゲーションの領域を設定します。
色はわかりやすくするために、黒にします。

nav.navbar.navbar-inverse

1	nav.navbar.navbar-inverse

を展開することで

<nav class="navbar navbar-inverse">

</nav>

</nav>

を作成します。

次に、ナビゲーションヘッダーを div で作成します。

  div.navbar-header

1	div.navbar-header

を展開し、

  <div class="navbar-header">

  </div>

</div>

を作成します。

この中にメニューを作成します。

まずはハンバーガーメニューボタンを作成します。

    btn.navbar-toggle[type=button data-toggle=collapse data-target=#gnav]>span.icon-bar*3

1	btn.navbar-toggle[type=button data-toggle=collapse data-target=#gnav]>span.icon-bar*3

を展開することで

    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#gnav">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

</button>

を簡単に作成できます。

Emmet では *3 とすれば３つ作成することができます。
class=”” は .クラス名で記述し、id=”” の場合は #ID名で記述します。

[] の中には data-toggle などのパラメータを記述します。
複数の場合は半角スペースで区切って記述します。

今回の gnav というIDは、このハンバーガーメニューボタンに格納する領域の　divのID になります。
わかりやすく global navigation の略で gnav としました。

次に格納する項目を作成します。

  div#gnav.collapse.navbar-collapse

1	div#gnav.collapse.navbar-collapse

を展開し、

  <div id="gnav" class="collapse navbar-collapse">

  </div>

</div>

を作成します。

この中に格納するリストを記述します。

    ul.nav.navbar-nav>(li>a{LIst $})*3

1	ul.nav.navbar-nav>(li>a{LIst $})*3

を展開し、

    <ul class="nav navbar-nav">
      <li><a href="">LIst 1</a></li>
      <li><a href="">LIst 2</a></li>
      <li><a href="">LIst 3</a></li>
    </ul>

</ul>

を作成します。

Emmet では複数のクラスを指定するときには
.クラス名１.クラス名２
というように続けて書くようにします。

また、連番を作りたいときには $ を使用します。

これでグローバルナビゲーションができているので、ctrl + shirt + h で確認してみましょう。

これでハンバーガーメニューボタンが作成されているのがわかります。

画面を拡大すると、作成したリストが表示されるのがわかります。

また、ナビゲーションヘッダーに class=”navbar-brand” を設定することでサイト名を表示することもできます。

例えば、

a.navbar-brand{BootstrapTest}

1	a.navbar-brand{BootstrapTest}

を展開し

<a href="" class="navbar-brand">BootstrapTest</a>

1	<a href="" class="navbar-brand">BootstrapTest</a>

とすると、サイト名が表示されます。

それでは、今回の要点をまとめてみましょう。

・bootstrapのNavbar を使い、グローバルナビゲーションを作成すると、スマホサイズの画面ではハンバーガーメニューになる
・Navbar を使うには　class=”navbar” を指定する。
・Navbar の背景色は、navbar-defaultで白背景ベース、navbar-inverseで黒背景ベースにできる。
・class=”navbar-brand” を指定してサイト名をナビゲーションヘッダーに表示できる。

少々複雑ですが、Emmet を使うことで比較的簡単にグローバルナビゲーションの作成ができます。