ナビゲーションメニュー（グローバルナビ）の基本とデザイン例・HTML&CSSコード解説

Webページを訪れたユーザーが「どこに何があるのか」を直感的に理解するために欠かせないのが、ナビゲーションメニュー、いわゆる「グローバルナビ」です。サイト全体の構造を示すこのメニューは、使いやすさやデザイン性を大きく左右します。本記事では、ナビゲーションメニューの役割や基本構成を解説したうえで、複数のデザイン例とそのHTML・CSSコードを紹介します。Web制作初心者の方でも実装できるよう、ていねいに解説していますので、ぜひ参考にしてみてください。

ナビゲーションメニュー（グローバルナビ）とは？

ナビゲーションメニューとは、Webサイトの主要なページへのリンクを一覧で表示した部分を指します。特にサイトの全ページに共通して表示されるメニューを「グローバルナビゲーション（通称：グロナビ）」と呼びます。

グローバルナビの目的は以下の通りです。

  • ユーザーが迷わず目的のページにたどり着けるようにすること
  • サイトの構造を視覚的に整理すること
  • ユーザー体験（UX）を向上させること

例えば、企業サイトでは「会社概要」「サービス」「採用情報」「お問い合わせ」といったメニューがよく見られます。ECサイトでは「商品カテゴリ」「ランキング」「カート」「マイページ」などが一般的です。

ナビゲーションメニューの基本的な構造（HTML）

最もシンプルなグローバルナビゲーションのHTMLは、以下のようになります。

<nav class="global-nav">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">会社情報</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

HTMLでは<nav>タグを使ってナビゲーションであることを明示し、その中に<ul>（リスト）と<li>（項目）、<a>（リンク）で構成します。とてもシンプルですが、ここからCSSを加えることで多様なスタイルに変化させることが可能です。

デザイン例①：横並びナビゲーション（ベーシック）

HTML

<nav class="nav-basic">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">会社情報</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

CSS

.nav-basic ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
}

.nav-basic li {
  margin: 0;
}

.nav-basic a {
  display: block;
  padding: 15px 25px;
  color: white;
  text-decoration: none;
}

.nav-basic a:hover {
  background-color: #555;
}

解説

このスタイルは横並びの基本形で、黒背景に白文字、ホバー時に背景色が変化します。企業サイトやポートフォリオなどにおすすめです。

デザイン例②：ドロップダウン付きナビゲーション

HTML

<nav class="nav-dropdown">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li>
      <a href="#">サービス</a>
      <ul class="dropdown">
        <li><a href="#">Web制作</a></li>
        <li><a href="#">SEO対策</a></li>
      </ul>
    </li>
    <li><a href="#">会社情報</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

CSS

.nav-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  display: flex;
  position: relative;
}

.nav-dropdown li {
  position: relative;
}

.nav-dropdown > ul > li > a {
  display: block;
  padding: 15px 25px;
  color: white;
  text-decoration: none;
}

.nav-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  flex-direction: column;
  width: 200px;
}

.nav-dropdown li:hover .dropdown {
  display: flex;
}

.nav-dropdown .dropdown a {
  padding: 10px;
  color: white;
}

.nav-dropdown .dropdown a:hover {
  background-color: #666;
}

解説

マウスを当てるとサブメニューが表示される「ドロップダウン式」です。多階層構造のサイトやサービス紹介のあるWebサイトに適しています。

デザイン例③：ハンバーガーメニュー（スマホ対応）

HTML

<nav class="nav-hamburger">
  <button class="menu-toggle">☰</button>
  <ul class="menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">会社情報</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

CSS

.nav-hamburger .menu {
  display: none;
  flex-direction: column;
  background: #333;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-hamburger .menu a {
  padding: 15px;
  color: white;
  text-decoration: none;
}

.nav-hamburger .menu a:hover {
  background-color: #555;
}

.menu-toggle {
  background: none;
  border: none;
  font-size: 24px;
  color: #333;
  margin: 10px;
  cursor: pointer;
}

/* JSで class="open" が追加された時に表示 */
.nav-hamburger .menu.open {
  display: flex;
}

JavaScript（動作用）

<script>
  const toggle = document.querySelector('.menu-toggle');
  const menu = document.querySelector('.menu');

  toggle.addEventListener('click', () => {
    menu.classList.toggle('open');
  });
</script>

解説

スマートフォンなど狭い画面で有効な「ハンバーガーメニュー」。クリックでメニューが開閉するようにJavaScriptを少しだけ使っています。レスポンシブ対応の基本としてよく使われます。

どのナビゲーションメニューを選ぶべきか？

サイトの目的や構成によって最適なナビゲーションデザインは変わります。

用途おすすめデザイン
シンプルな企業サイト横並びナビ（ベーシック）
サービスが多いサイトドロップダウンナビ
スマホ対応が必要ハンバーガーメニュー

ユーザーの使いやすさを第一に考えて、デザインだけでなくナビゲーションの構成そのものも工夫しましょう。

まとめ

ナビゲーションメニューは、Webサイトの「道しるべ」となる重要な要素です。見た目を整えるだけでなく、ユーザーが迷わない設計が求められます。本記事で紹介したベーシックな構造やデザインをベースに、自分のサイトに合ったナビゲーションメニューを実装してみてください。HTMLとCSSの基本を押さえておけば、さまざまなカスタマイズも可能になります。ぜひこの機会に挑戦してみましょう！

タイトルとURLをコピーしました