Bootstrapナビゲーションバー完全入門！折りたたみ（navbar-togglerとcollapse）の仕組みをやさしく解説
生徒
「スマホで見ると、Bootstrapのナビゲーションバーがボタンに変わるのはどうしてですか？」
先生
「それは、折りたたみ機能という仕組みを使っているからです。」
生徒
「折りたたみって、何がどう動いているんですか？」
先生
「では、navbar-togglerとcollapseの役割を、順番に見ていきましょう。」
1. Bootstrapのナビゲーションバーとは？
Bootstrapのナビゲーションバーは、Webページの上部に表示されるメニューのことです。ホームやお問い合わせなど、ページ移動の入口になります。パソコンでは横並び、スマートフォンではコンパクトに表示されるのが特徴です。
この自動調整を行っているのが、Bootstrapのレスポンシブ対応と呼ばれる仕組みです。画面の大きさに合わせて見た目が変わるので、初心者でも安心して使えます。
2. 折りたたみ表示が必要な理由
スマートフォンの画面は小さいため、メニューを横に並べると文字が読みにくくなります。そこでBootstrapでは、メニューを一度しまって、ボタンを押したときだけ表示する仕組みを用意しています。
この動きは、引き出しに例えるとわかりやすいです。普段は閉まっていて、必要なときだけ開くことで、画面をスッキリ保てます。
3. navbar-togglerの役割
navbar-togglerは、折りたたまれたメニューを開くためのボタンです。スマホ表示になると、三本線のアイコンが表示されます。このボタンを押すことで、メニューが表示されます。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">サイト名</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
buttonタグがスイッチの役割をしており、押すと次に説明するcollapseが動きます。
4. collapseの役割
collapseは、実際に折りたたまれる中身を担当します。メニューの一覧部分を囲む箱だと考えると理解しやすいです。
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">ホーム</a></li>
<li class="nav-item"><a class="nav-link" href="#">会社概要</a></li>
<li class="nav-item"><a class="nav-link" href="#">お問い合わせ</a></li>
</ul>
</div>
この部分が、開いたり閉じたりする本体です。
5. data属性でつながる仕組み
navbar-togglerとcollapseは、data属性という目印でつながっています。data-bs-targetに書かれた名前と、collapse側のidが一致すると、正しく動きます。
これは、リモコンとテレビの関係に似ています。番号が合っていないと操作できません。
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu"></button>
<div class="collapse" id="menu"></div>
6. 初期化で大切なポイント
Bootstrapの折りたたみ機能は、JavaScriptが動いてはじめて使えます。そのため、BootstrapのJavaScriptファイルが正しく読み込まれていないと、ボタンを押しても反応しません。
動かないときは、読み込み忘れや記述ミスを確認することが大切です。
7. よくある間違いと注意点
初心者がつまずきやすいのは、idの書き間違いや、navbar-expandの指定忘れです。これがないと、画面サイズによる切り替えが正しく行われません。
また、クラス名は大文字と小文字を区別するため、正確に書く必要があります。
8. 折りたたみを理解するとできること
この仕組みを理解すると、スマホでも使いやすいメニューを自分で作れるようになります。Bootstrapのナビゲーションバーは、多くのWebサイトで使われている基本機能です。
難しそうに見えても、役割ごとに分けて考えれば、とてもシンプルな構造です。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
