[Bootstrap]グローバルナビゲーションのコンポーネント”Navbar”の使い方
今回は Bootstrap を使って、グローバルナビゲーションを作成します。
Bootstrap を使ってグローバルナビゲーションを作成するには。
Navbar を使います。
これを使うことで、レスポンシブ対応となり、画面が小さいときには3本線のアイコンに変わります。
Navbar でグローバルナビゲーションを作成するには、まず領域を nav で囲み、
class=”navbar” を指定することで、ナビゲーションバーの使用を宣言します。
このときに、色の指定ができますが、
navbar-default なら、白背景ベースのナビゲーションバーとなり、
navbar-inverse を指定すると、黒背景ベースのナビゲーションバーとなります。
領域指定の構文は、デフォルトの色の指定で行うのなら
1 2 3 |
<nav class="navbar navbar-default"> </nav> |
この領域の中にナビゲーションメニューを設置していきます。
まずはナビゲーションヘッダー領域を指定します。
これはdiv で領域を設定し、class=”navbar-header”を指定します。
この領域にはロゴ画像や3本線のアイコン、通称ハンバーガーメニューを設置します。
ハンバーガーメニューボタンの構文は
1 2 3 4 5 |
<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> |
となります。
3本線を構成しているのが
1 2 3 |
<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> |
の部分になります。
ハンバーガーメニューボタンは、スマホなどの小さい画面のときに、
ナビゲーションメニューをたたんで表示するのに使われます。
なお、PCでの画面などのように大きな画面の場合、
グローバルナビゲーションメニューが表示されます。
次に、ナビゲーションメニューを作成します。
まず、メニュー領域を div で設定し、
ウインドウサイズでハンバーガーメニューボタンと
グローバルナビゲーションメニューに切り替わるように
class=”collapse” と class=”navbar-collapse” を設定します。
構文は
1 2 3 |
<div id="任意のID" class="collapse navbar-collapse"> </div> |
となります。
この中にメニューを作成します。
まず、ul タグにナビゲーションを使用するために class=”nav” を指定し、
ナビゲーションバーの使用をするために class=”navbar-nav”を指定します。
構文としては
1 2 3 4 5 |
<ul class="nav navbar-nav"> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></li> </ul> |
というようになります。
ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。
Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。
PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。
Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。
今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。
ゼロから作成する場合
1 |
html:5 |
として展開するととして展開すると
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </html> |
というようにベースのコードが作成されます。
ubuntu の場合、tab キーで展開します。
次に Bootstrap のライブラリの読み込みです。
ダウンロードして読み込む方法と、ネットから読み込む方法がありますが、
今回はネットから読み込む方法CDNの方法を使います。
1 |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> |
でCSSファイルの読み込みをします。
1 |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> |
で javascript を読み込みます。
この2つがないと Bootstrap は機能しません。
次に、グローバルナビゲーションの領域を設定します。
色はわかりやすくするために、黒にします。
1 |
nav.navbar.navbar-inverse |
を展開することで
1 2 3 |
<nav class="navbar navbar-inverse"> </nav> |
を作成します。
次に、ナビゲーションヘッダーを div で作成します。
1 |
div.navbar-header |
を展開し、
1 2 3 |
<div class="navbar-header"> </div> |
を作成します。
この中にメニューを作成します。
まずはハンバーガーメニューボタンを作成します。
1 |
btn.navbar-toggle[type=button data-toggle=collapse data-target=#gnav]>span.icon-bar*3 |
を展開することで
1 2 3 4 5 |
<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> |
を簡単に作成できます。
Emmet では *3 とすれば3つ作成することができます。
class=”” は .クラス名で記述し、id=”” の場合は #ID名で記述します。
[] の中には data-toggle などのパラメータを記述します。
複数の場合は半角スペースで区切って記述します。
今回の gnav というIDは、このハンバーガーメニューボタンに格納する領域の divのID になります。
わかりやすく global navigation の略で gnav としました。
次に格納する項目を作成します。
1 |
div#gnav.collapse.navbar-collapse |
を展開し、
1 2 3 |
<div id="gnav" class="collapse navbar-collapse"> </div> |
を作成します。
この中に格納するリストを記述します。
1 |
ul.nav.navbar-nav>(li>a{LIst $})*3 |
を展開し、
1 2 3 4 5 |
<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> |
を作成します。
Emmet では複数のクラスを指定するときには
.クラス名1.クラス名2
というように続けて書くようにします。
また、連番を作りたいときには $ を使用します。
これでグローバルナビゲーションができているので、ctrl + shirt + h で確認してみましょう。
これでハンバーガーメニューボタンが作成されているのがわかります。
画面を拡大すると、作成したリストが表示されるのがわかります。
また、ナビゲーションヘッダーに class=”navbar-brand” を設定することでサイト名を表示することもできます。
例えば、
1 |
a.navbar-brand{BootstrapTest} |
を展開し
1 |
<a href="" class="navbar-brand">BootstrapTest</a> |
とすると、サイト名が表示されます。
それでは、今回の要点をまとめてみましょう。
・bootstrapのNavbar を使い、グローバルナビゲーションを作成すると、スマホサイズの画面ではハンバーガーメニューになる
・Navbar を使うには class=”navbar” を指定する。
・Navbar の背景色は、navbar-defaultで白背景ベース、navbar-inverseで黒背景ベースにできる。
・class=”navbar-brand” を指定してサイト名をナビゲーションヘッダーに表示できる。
少々複雑ですが、Emmet を使うことで比較的簡単にグローバルナビゲーションの作成ができます。