Twitter Bootstrap 3 の基本　navbarのサンプル

大抵のWebサイトについているナビゲーション。特にヘッダー部分に位置するナビゲーションは、
サイト全体を行き来する上でよく使い、グローバルナビゲーションなんて言われていたりしますね。
今回はそのナビゲーションを実装することができる「navbar」クラスをピックアップしてみていきたいと思います。

今回のソースコード

まずは全体のソースコードを下に示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">練習</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="gnav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">MENU 1</a></li>
                    <li><a href="#">MENU 2</a></li>
                    <li><a href="#">MENU 3</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
        <h1>BootStrapの練習です。</h1>
    </div><!-- /container -->
</body>
</html>

ブラウザで表示すると以下のようになります。

ウィンドウサイズを小さくすると、以下のようになります。

どちらもヘッダー部にナビゲーションメニューが出てきたことがわかると思います。
それではこのソースを細かく紐解いていきましょう。

navタグ

まずは11行目

11	`<nav` `class="navbar navbar-default"></b>`

の記述。
「nav」タグは、HTML5から導入されたナビゲーションをくくるセクションを括るタグです。
このタグで括られている部分がナビゲーションになることになります。
「nav」タグのクラスには「navbar」「navbar-default」が付いています。
「navbar」はナビゲーションの外枠を、
「navbar-default」はナビゲーションの文字色や背景色といった内枠の
スタイルを定義しています。
この２つのクラスはグローバルナビゲーション用のクラスとしてセットで覚えちゃってよいと思います。

この２つに追加でいくつか追加できるクラスがあります。
「navbar-fixed-top」
「navbar-fixed-bottom」
「navbar-inverse」
「navbar-static-top」
などです。クラスを変えてみて、変化を見てみてください。

navbar-header

続いて12行目。

12	`<div` `class="navbar-header">`

ここで括られている部分は、基本的に「ウィンドウが小さくなっても(なったら)表示される項目」になります。
このdiv内の要素を見てみると、
13行目に

13	`<a` `class="navbar-brand"` `href="#">練習</a>`

とあり、これがメニュー一番左の「練習」という文字になります。
ここにサイトの名前やロゴを入れてあげるというのが、この「navbar-brand」クラスの役割になります。
次の14行目からbuttonタグが記述されていますが、ここで注意したいポイントは４つ。
まず、「class=”navbar-toggle”」の記述。
これでナビゲーションのトグルボタンを作成することを指定します。
次に、「data-toggle=”collapse”」の記述。
「collapse」は折りたたむなどの意味があります。これでトグルした際に、メニューを開閉することを指定します。
３つめは「data-target=”#gnav”」
ここで、どこを開閉するかを指定します（gnavというIDが付いているブロックを開閉します）。
最後の４つめは、「」の記述。
これで、トグルボタンに表示するバーの数を決めているのです。
今回は３回この記述をしているのでバーは３本表示されています。