[Bootstrap]ナビゲーションのコンポーネント”Navs”の使い方　

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

今回は、Bootstrapで用意されているナビゲーションについての解説です。

ナビゲーションは、
タブ型のナビゲーション
ピル型ナビゲーション
の２つがあります。

どちらも、class=”nav” でナビゲーションであることを指定し、
タブ型のナビゲーションなら class=”nav-tabs” を指定し、
ピル型ナビゲーションなら、class=”nav-pills” を指定します。

なお、ピル型ナビゲーションのときに、class=”nav-stacked”を追加すると、
縦並びのピル型のナビゲーションにすることができます。

タブ型ナビゲーションの構文は

<ul class="nav nav-tabs">
  <li class="active"><a href="#">menu 1</a></li>
  <li><a href="#">menu 2</a></li>
  <li><a href="#">Blomenu 3</a></li>
</ul>

<li><a href="#">Blomenu 3</a></li>

</ul>

というようになります。

ピル型ナビゲーションの構文は

<ul class="nav nav-pills">
  <li class="active"><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

</ul>

というようになります。

これらは、どちらも li要素に class=”active” を追加することで、現在選択中であることを表示できます。

これらの２つのナビゲーションは外部リンクの方法になります。

ページ内での移動をするナビゲーションを作るには、
まず、表示したいものの領域を div で囲み、class=”tab-content”を指定します。

そして表示したいものを div で囲み、class=”tab-pane” を指定し、id をつけておきます。

そして、リンクボタンにタブ型なら、data-toggle=”tab”を指定し、
ピル型なら、data-toggle=”pill”を指定します。
このときに href=”” に先ほど設定した id をリンク先として指定しておきます。

ソースを見たほうがわかりやすいので、みてみましょう。

まず表示したいものについてです。

<div class="tab-content">
  <div class="tab-pane active" id="tab1">Tab1 のコンテンツ</div>
  <div class="tab-pane" id="tab2">Tab2 のコンテンツ</div>
  <div class="tab-pane" id="tab3">Tab3 のコンテンツ</div>
</div>

<div class="tab-pane active" id="tab1">Tab1 のコンテンツ</div>

<div class="tab-pane" id="tab2">Tab2 のコンテンツ</div>

<div class="tab-pane" id="tab3">Tab3 のコンテンツ</div>

</div>

というように作成します。

id=”” の中身は任意のものでOKです。

次に、ナビゲーション部分を作成します。

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
  <li><a href="#tab2" data-toggle="tab">tab2</a></li>
  <li><a href="#tab3" data-toggle="tab">tab3</a></li>
</ul>

</ul>

注意点としては、href=”” に指定する id を先ほど定義したものと同じにすることです。

これで同じ画面内での移動ができるようになります。

次にドロップダウンメニューの作成です。
このドロップダウンメニューを使うことで、カテゴリごとのメニューなどを簡単につくれます。

作り方は、ドロップダウンメニューにするリストの li 要素に class=”dropdown”を指定します。

そして、ドロップダウンメニューとなる a要素に
class=”dropdown-toggle”
data-toggle=”dropdown”
の２つを追加します。

そしてドロップダウンメニューであることをわかりやすくするために▼のアイコンを表示します。
これは span 要素に class=”caret”を指定することで表現できます。

ソースで例をみると

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">カテゴリー１</a></li>
            <li><a href="#">カテゴリー２</a></li>
            <li><a href="#">カテゴリー３</a></li>
        </ul>
</li>

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<li><a href="#">カテゴリー１</a></li>

<li><a href="#">カテゴリー２</a></li>

<li><a href="#">カテゴリー３</a></li>

</ul>

</li>

というようになります。

ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、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 は機能しません。

また、ページ内遷移には jQuery が必要なため

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

を追記することでライブラリを読み込みます。

まずは、タブ型ナビゲーションを作成してみましょう。

Emmet を使い、簡単に記述して展開していきます。

ul.nav.nav-tabs>(li.active>a{Tab 1})+(li>a{Tab $@2})*3

1	ul.nav.nav-tabs>(li.active>a{Tab 1})+(li>a{Tab $@2})*3

を展開すると

<ul class="nav nav-tabs">
  <li class="active"><a href="">Tab 1</a></li>
  <li><a href="">Tab 2</a></li>
  <li><a href="">Tab 3</a></li>
  <li><a href="">Tab 4</a></li>
</ul>

</ul>

となります。

Emmet で、
連番指定のときに番号を指定したい場合には $@開始番号　とすることで指定ができます。

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

このようにタブ型ナビゲーションができているのがわかります。

次にページ内遷移のためのピル型ナビゲーションを作成してみましょう。

まず、表示するものを作成します。

div.tab-content>(div.tab-pane.active#tab1{Tab 1 のコンテンツです})+(div.tab-pane#tab${Tab $@2 のコンテンツです})*3

1	div.tab-content>(div.tab-pane.active#tab1{Tab 1 のコンテンツです})+(div.tab-pane#tab${Tab $@2 のコンテンツです})*3

Emmet でクラスを複数指定するときには、
.active.tab-pane
というように並べて記述します。

また、同じ階層に作成するときには + を使います。

これを展開すると

<div class="tab-content">
  <div class="tab-pane active" id="tab1">Tab 1 のコンテンツです</div>
  <div class="tab-pane" id="tab1">Tab 2 のコンテンツです</div>
  <div class="tab-pane" id="tab2">Tab 3 のコンテンツです</div>
  <div class="tab-pane" id="tab3">Tab 4 のコンテンツです</div>
</div>

<div class="tab-pane active" id="tab1">Tab 1 のコンテンツです</div>

<div class="tab-pane" id="tab1">Tab 2 のコンテンツです</div>

<div class="tab-pane" id="tab2">Tab 3 のコンテンツです</div>

<div class="tab-pane" id="tab3">Tab 4 のコンテンツです</div>

</div>

となります。

次に、ナビゲーション部分を作成します。

ピル型のナビゲーションを作成するには
リンクを生成する a要素にdata-toggle=”pill”を追加します。

ul.nav.nav-pills>(li.active>a[href=#tab1 data-toggle=pill]{Page Tab1})+(li>a[href=#tab$@2 data-toggle=pill]{Page Tab$@2})*3

1	ul.nav.nav-pills>(li.active>a[href=#tab1 data-toggle=pill]{Page Tab1})+(li>a[href=#tab$@2 data-toggle=pill]{Page Tab$@2})*3

を展開し

<ul class="nav nav-pills">
  <li class="active"><a href="#tab1" data-toggle="pill">Page Tab1</a></li>
  <li><a href="#tab2" data-toggle="pill">Page Tab2</a></li>
  <li><a href="#tab3" data-toggle="pill">Page Tab3</a></li>
  <li><a href="#tab4" data-toggle="pill">Page Tab4</a></li>
</ul>

</ul>

を作成します。

これでピル型ナビゲーションができましたのでプレビューを ctrl + shift + h で見てみましょう。

プレビューを表示し、ピル型のナビゲーションをクリックすると、内容が変更されるのがわかります。

次に、ドロップダウンメニューを追加してみましょう。

今回はタブ型で作成し、３つめのタブをドロップダウンメニューにします。
少々長いですが、展開すると複雑な入れ子も簡単にできます。

ul.nav.nav-tabs>(li>a{Tab $})*2+li.active.dropdown>a.dropdown-toggle[data-toggle=dropdown]{DwopDown }>span.caret+ul.dropdown-menu>(li>a{カテゴリー $})*3

1	ul.nav.nav-tabs>(li>a{Tab $})2+li.active.dropdown>a.dropdown-toggle[data-toggle=dropdown]{DwopDown }>span.caret+ul.dropdown-menu>(li>a{カテゴリー $})3

これを展開すると

<ul class="nav nav-tabs">
  <li><a href="">Tab 1</a></li>
  <li><a href="">Tab 2</a></li>
  <li class="active dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">DwopDown
      <span class="caret"></span>
      <ul class="dropdown-menu">
        <li><a href="">カテゴリー 1</a></li>
        <li><a href="">カテゴリー 2</a></li>
        <li><a href="">カテゴリー 3</a></li>
      </ul>
    </a></li>
</ul>

<li class="active dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">DwopDown

<li><a href="">カテゴリー 1</a></li>

<li><a href="">カテゴリー 2</a></li>

<li><a href="">カテゴリー 3</a></li>

</ul>

</a></li>

</ul>

というように入れ子の構造が出来上がります。

これを ctrl + shift + h でプレビューを見てみましょう。

このように、タブの３つめでドロップダウンメニューが作成できているのがわかります。

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

・ナビゲーションを作成するには ul要素に class=”nav” を指定する。
・タブ型のナビゲーションなら class=”nav-tabs” を指定する。
・ピル型ナビゲーションなら、class=”nav-pills” を指定する。
・ル型ナビゲーションのときに、class=”nav-stacked”を追加すると、縦並びになる。
・ページ内での移動をするナビゲーションを作るには、まず、表示したいものの領域を div で囲み、class=”tab-content”を指定。
・そして表示したいものを div で囲み、class=”tab-pane” を指定し、id をつけておく。
・そして、リンクボタンにタブ型なら、data-toggle=”tab”を指定し、ピル型なら、data-toggle=”pill”を指定。
・href=”” に設定した id をリンク先として指定。
・ドロップダウンメニューをつくるには、ドロップダウンメニューにするリストの li 要素に class=”dropdown”を指定。
・ドロップダウンメニューとなる a要素に、class=”dropdown-toggle”と　data-toggle=”dropdown”の２つを追加。
・▼のアイコンは、span 要素に class=”caret”を指定することで作成。

このようにナビゲーションを作成することで、よりカテゴライズしたコンテンツへの簡単なリンクを作成することができます。