Bootstrapでナビゲーションの表示と非表示を切り替える方法完全ガイド
生徒
「スマホで見ると、メニューがぐちゃっと崩れてしまうのですが、どうすればいいですか？」
先生
「それは画面の大きさに応じて、ナビゲーションの表示と非表示を切り替えていないのが原因ですね」
生徒
「画面の大きさで、表示を変えることができるんですか？」
先生
「Bootstrapの表示と可視性、レスポンシブユーティリティを使えば、とても簡単にできますよ」
1. ナビゲーションが崩れる原因を知ろう
Bootstrapでナビゲーションメニューを作ったとき、パソコンでは問題なく見えるのに、スマートフォンやタブレットで見ると表示が崩れることがあります。これは画面の横幅が小さくなることで、メニューの文字やボタンが入りきらなくなるためです。
このような状態を防ぐためには、画面サイズに応じて「表示する」「隠す」を切り替える設計が重要です。Bootstrapには、レスポンシブユーティリティと呼ばれる便利な仕組みが用意されています。
2. Bootstrapの表示と可視性の基本
Bootstrapでは、表示や非表示を切り替えるための専用クラスが用意されています。これらを使うことで、CSSを一から書かなくても、簡単にナビゲーションの制御ができます。
たとえば、ある要素を「常に非表示」にしたり、「特定の画面サイズだけ表示」したりできます。これが表示と可視性の基本的な考え方です。
3. 画面サイズごとの考え方を理解しよう
Bootstrapでは、画面サイズをいくつかの段階に分けて考えます。スマートフォン、タブレット、ノートパソコン、デスクトップパソコンといった具合です。
初心者の方は、まず「小さい画面」と「大きい画面」がある、という理解で問題ありません。ナビゲーションは小さい画面では隠して、大きい画面では表示する、という設計がよく使われます。
4. ナビゲーションを画面サイズで切り替える例
ここでは、Bootstrapを使ってナビゲーションの表示と非表示を切り替える、基本的なHTMLの例を見てみましょう。
<nav class="d-none d-md-block">
<ul class="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>
</nav>
この例では、小さい画面ではナビゲーションが非表示になり、中くらい以上の画面で表示されます。これにより、スマートフォンでのメニュー崩れを防ぐことができます。
5. ハンバーガーメニューでの切り替え設計
スマートフォンでは、ナビゲーションをそのまま表示するのではなく、ボタンを押すとメニューが開く形がよく使われます。これをハンバーガーメニューと呼びます。
<button class="btn btn-primary d-md-none">
メニュー
</button>
このように、ボタン自体も画面サイズによって表示を切り替えることで、無駄な表示を減らし、使いやすいナビゲーションになります。
6. 表示と非表示を組み合わせた設計例
ナビゲーションでは、表示する要素と隠す要素を組み合わせて設計することが重要です。次の例では、大きい画面用と小さい画面用のメニューを分けています。
<div class="d-none d-lg-block">
<p>パソコン用ナビゲーション</p>
</div>
<div class="d-lg-none">
<p>スマートフォン用ナビゲーション</p>
</div>
このように分けることで、それぞれの画面に最適なメニュー構成を作ることができます。
7. メニュー崩れを防ぐための考え方
メニュー崩れを防ぐためには、最初からレスポンシブを意識した設計が大切です。後から直そうとすると、どこを修正すればいいのかわからなくなりがちです。
Bootstrapの表示と可視性、レスポンシブユーティリティを使えば、初心者でも安心してナビゲーションを作ることができます。
8. 初心者が意識すると失敗しにくいポイント
最初は完璧を目指さず、「小さい画面では隠す」「大きい画面では表示する」という基本だけを意識しましょう。それだけでも、ナビゲーションの見た目は大きく改善します。
Bootstrapを使ったナビゲーションの表示と非表示切り替えは、Web制作の基礎としてとても重要な考え方です。
まとめ
本記事では、Bootstrapを使ってナビゲーションの表示と非表示を画面サイズごとに切り替える方法について、基礎から丁寧に解説してきました。パソコンでは問題なく表示されているナビゲーションが、スマートフォンやタブレットになると崩れてしまう原因は、画面の横幅が変化することにあります。この問題を解決するためには、レスポンシブデザインの考え方を理解し、Bootstrapが用意している表示と可視性のクラスを正しく使うことが重要です。
Bootstrapには、画面サイズに応じて要素を表示したり非表示にしたりできる便利なクラスが多数用意されています。d-noneやd-md-block、d-lg-noneといったクラスを組み合わせることで、特定の画面サイズだけナビゲーションを表示することができます。これにより、小さい画面ではメニューを隠してハンバーガーメニューだけを表示し、大きい画面では横並びのナビゲーションを表示する、といった実践的な設計が可能になります。
ナビゲーションはWebサイトの使いやすさを大きく左右する重要な要素です。表示が崩れてしまうと、ユーザーは目的のページにたどり着けず、サイトから離れてしまう可能性があります。そのため、最初からレスポンシブを意識した設計を行い、画面サイズごとの見え方を想像しながらHTMLを書くことが大切です。Bootstrapを使えば、CSSを一から書かなくても、クラスを指定するだけで柔軟なレイアウト調整ができます。
また、ナビゲーションの表示と非表示を切り替える考え方は、メニューだけでなく、ボタンや画像、テキストブロックなど、さまざまな要素に応用できます。たとえば、スマートフォンでは不要な装飾を隠し、パソコンでは情報量を増やすといった工夫も可能です。このような設計を意識することで、どの端末からアクセスしても快適に閲覧できるWebサイトを作ることができます。
初心者の方は、まず小さい画面と大きい画面の違いを意識し、どの要素を表示し、どの要素を隠すのかを紙に書き出してみると理解しやすくなります。その上でBootstrapのレスポンシブユーティリティを使えば、ナビゲーションの表示と非表示を無理なく実装できます。今回学んだ内容は、Bootstrapによるレスポンシブデザインの基本として、今後のWeb制作でも必ず役立つ知識です。
まとめとしてのサンプルプログラム
<nav class="d-none d-md-block bg-light p-3">
<ul class="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>
<li class="nav-item">
<a class="nav-link" href="#">お問い合わせ</a>
</li>
</ul>
</nav>
<button class="btn btn-primary d-md-none">
メニュー
</button>
上記のサンプルでは、中くらい以上の画面ではナビゲーションを表示し、小さい画面ではメニューボタンのみを表示しています。このように表示と非表示を切り替えることで、画面サイズに合ったナビゲーション設計が実現できます。
生徒
「Bootstrapを使うと、画面サイズごとに表示を切り替えられるという意味が、やっとわかってきました」
先生
「それは良いですね。まずは小さい画面と大きい画面の違いを意識できれば十分です」
生徒
「d-noneやd-md-blockを組み合わせるだけで、メニューが崩れなくなるのが驚きでした」
先生
「Bootstrapの強みは、難しいCSSを書かなくても、実用的なレスポンシブ対応ができる点です」
生徒
「ナビゲーション以外にも、ボタンや画像にも応用できそうですね」
先生
「その通りです。今回学んだ考え方を応用すれば、どんなページでも柔軟に対応できますよ」
生徒
「まずは基本を意識して、画面サイズごとの表示を考えながら作ってみます」
先生
「それが一番の近道です。少しずつ慣れていきましょう」
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
