【Bootstrap】Navbarの使い方・カスタマイズ方法を徹底解説

こんにちは、フリーランスエンジニア兼ライターのワキザカ サンシロウです。

皆さんは、Bootstrapを使ってナビゲーションバーを作る方法を知っていますか?WEBアプリ・WEBサービスを作るとき、ヘッダにナビゲーションバーを作るケースは多いですよね。そこで今回は、

  • Bootstrapとは
  • 【最新版】Boobstrap4を使う方法
  • Boobstrapでナビゲーションバーを作る方法
  • 合わせて覚えておくと便利な他部品の使い方

といったように、基礎的なことから応用的な方法まで、徹底的に解説します!

Bootstrapとは

まず、Bootstrapについて簡単に解説します。Bootstrapは、WEBサイトやWEBページを効率よく開発するためのWEBフレームワークです。(WEBフレームワークって何?という方は、先にこちらの記事をご覧ください。)

HTML・CSS・JavaScriptから構成される、最も有名なWEBフレームワークですね。WEBページでよく使われるフォーム・ボタン・メニューなどの部品がテンプレートとして用意されています。

また、レスポンシブ対応がされているため、Bootstrapを使うだけでパソコン、iPad、スマホなど画面サイズに自動対応した画面を作ることができます。WEB開発をするときは必須のフレームワークなので、使い方を覚えておくと便利です!

【最新版】Boobstrap4を使う方法

次に、Bootstrap4を使う方法について解説します。Bootstrap4は、2018年2月にリリースされた最新バージョンのBootstrapです。最新のデザインを取り入れたバージョンになっているので、今から使う方はBootstrap4がおすすめです。

最新版Bootstrap4の概要・使い方については以下で詳しく解説しているので、まだ使ったことがない方は先にこちらを見てみてくださいね!

Bootstrapとは?最新版のBootstrap4の使い方についても徹底解説!
更新日 : 2019年5月6日

ナビゲーションバーの使い方

次に、ナビゲーションバーの使い方について解説します。

基礎的な使い方

まずは、基礎的な使い方について解説します。ナビゲーションバーはclassに「navbar」「navbar-expand-〇〇」「navbar-色名」「bg-色名」を指定して、次のように使います。

サンプルコード:

画像:実行結果

「<nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3">」でサイズをsm(タブレット用サイズ)、色にdark(黒色)を指定して、ナビゲーションバーを作っています。このように、簡単にナビゲーションバーを使うことができます。

ドロップダウンリストを使う方法

次に、ドロップダウンリストを使う方法について解説します。classにそれぞれ以下を設定することで、ドロップダウンリストを使うことができます。

  • メニューのliタグに「dropdown」を指定
  • 表示名のaタグに「dropdown-toggle」を指定
  • クリックメニュー名のdivタグに「ropdown-menu」を指定
  • クリックメニューの項目を指定するaタグに「dropdown-item」を指定

言葉だけでは伝わりにくいので、先ほどのサンプルの「エクスポート」のメニューをドロップダウンリストに変更したサンプルを用意しました。

サンプルコード:

画像:実行結果

ドロップダウンリストを使うケースはよくあるので、覚えておくと便利です!

色を指定する方法

次に、色を指定する方法について解説します。Boostrapでは色の名前を指定するだけで、簡単に色を使うことができます。

Bootstrapで指定できる色イメージ:

画像:色イメージ

ナビゲーションバーでも「navbar-色名」「bg-色名」を指定するだけで、簡単に色を変更することができます。

サンプルコード:

画像:実行結果

このように、簡単に色を変更することができます。色のバリエーションが最初から多いのは、便利ですね。

表示位置を左寄せ・中央寄せ・右寄せにする方法

次に、表示位置を左寄せ・中央寄せ・右寄せにする方法を解説します。ナビゲーションバーは、次のようにclassを指定することで、メニューの表示位置を変更することができます。

  • 左寄せ  :justify-content-start
  • 中央寄せ :justify-content-center
  • 右寄せ  :justify-content-end  

それぞれ設定したサンプルを用意しました。

サンプルコード:

画像:実行結果

このように、簡単に表示位置を変更することができます。

フォームの要素を追加する方法

次に、フォームの要素を追加する方法について解説します。

ナビゲーションバーを書いた後に、form-inlineクラスを指定したdivタグを追加して、divタグ中にフォームの要素(テキストボックス・ボタンなど)を追加することで、簡単にナビゲーションバーの中にフォームを追加することができます。

サンプルコード:

画像:実行結果

このように、簡単にフォームを追加することができます。

トグルの位置を指定する方法

次に、トグルの位置を指定する方法について解説します。トグルの位置は、「<a class="navbar-brand" href="#">Navbar</a>」を書く位置によって左、右を指定することができます。

サンプルコード:

画像:実行結果

ヘッダを固定する方法

次に、ヘッダを固定する方法について解説します。navタグのclassに「sticky-top」を指定するだけで、簡単に位置を固定することができます。

サンプルコード:

画像:実行結果(スクロール前)

画像:実行結果(下にスクロール後)

ヘッダを固定するケースはよくあるので、覚えておくと便利です!

合わせて覚えておくと便利な他部品の使い方

ここまでナビゲーションバーの使い方をメインに解説をしてきましたが、ナビゲーションバー以外にも便利な使い方がたくさんあります。テキストボックス・ドロップダウンリスト・チェックボックス・ラジオボタン・ボタンなど、他の部品を使って作っていくケースがほとんどです。

Bootstrapさえ入れておけばHTMLコードを書いてすぐに使えるので、覚えておくのがおすすめです!


【Bootstrap超入門】ボタンの種類・使い方について徹底解説!
更新日 : 2019年7月7日

まとめ

今回は、ナビゲーションバー使い方・カスタマイズ方法について徹底的に解説しました!ナビゲーションバーはアプリを作るときに使うケースが多いので、覚えておくと便利です。使い方も簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説