【サンプル多数】HTMLのnavタグを使う方法を基本から丁寧に解説

（最終更新日：2023年9月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLのnavタグは何ができるのだろうか？」
「navタグの書き方を学びたい」
「navタグの具体的な使用例を見て理解したい」

✔当記事を読むことで得られる知識

navタグの基本的な使い方
navタグを活用するためのテクニック
navタグを用いた具体的な使用例

当記事では、HTMLのnavタグの基本的な使い方から、ナビゲーションバーの作成やレスポンシブデザインへの応用など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/09/15 13:59:03時点 Amazon調べ-詳細)

HTML入門とnavタグの概要

まずこちらでは、ウェブ開発とHTMLの基本、そしてHTMLタグの一部としてのnavタグについてお伝えします。

これらの理解は、ウェブページのナビゲーションを作成する上で必要な知識です。

ウェブ開発とHTMLの基本
HTMLタグの一部としてのnavタグ
navタグの定義と役割

ウェブ開発とHTMLの基本

ウェブ開発は、ウェブサイトやウェブアプリケーションの作成を含む広範な活動です。

その中心にあるのが、HTML（Hyper Text Markup Language）。

HTMLは、ウェブページの構造を定義するマークアップ言語です。

以下のようなタグを使い、HP上の文章をわかりやすく表現します。

<h1>タグ：一番大きな見出し
<h2>タグ：二番目に大きな見出し
<p>タグ：段落
<ul>タグ：リストブロック

HTMLタグの一部としてのnavタグ

このHTMLのタグのひとつに、navタグがあります。

navタグは、ウェブページ内の主要なナビゲーションリンクを囲むために使われるもの。

これは一般的にサイトのヘッダーやフッターに存在し、ユーザーがサイト内を簡単に移動できるようにします。

navタグの定義と役割

navタグは、主要なナビゲーションブロックをマークアップするためのもの。

文書の一部が現在のページやほかのページへのリンクを含むナビゲーションセクションを表すときに使われます。

以下のような形で提示されることが多いです。

メニューバー
目次
インデックス

navタグの詳細

こちらでは、navタグの具体的な使用例や設定可能な属性、そして使用に際しての注意点について深く掘り下げていきます。

これらの理解は、navタグの活用をさらに進めるために重要です。

navタグの具体的な使用例
navタグで設定可能な属性
navタグの使用に際しての注意点

navタグの具体的な使用例

navタグは、ウェブページ内の主要なナビゲーションリンクを表現します。

以下がその一例です。

<nav>
  <ul>
    <li><a href="#section1">セクション1</a></li>
    <li><a href="#section2">セクション2</a></li>
    <li><a href="#section3">セクション3</a></li>
  </ul>
</nav>

この例では、navタグ内にul（Unordered List）タグを使用してリンクのリストを作成。

各リンクはli（List Item）タグ内のa（Anchor）タグで指定しています。

navタグで設定可能な属性

navタグ自体には、属性を設定することは少ないといえます。

なぜならnavタグは、あくまでもナビゲーションのブロックを明確にするものだからです。

ただしnavタグ内にほかのHTML要素（例えば、aタグ）を含めるときは、それらの要素に多くの属性を設定します。

例えば、aタグにはhref属性を設定してリンク先を指定することが一般的です。

navタグの使用に際しての注意点

navタグは、主要なナビゲーションリンクを含むセクションを表すために使用されます。

そのため、全てのリンクをnavタグで囲む必要はありません。

個別の参照リンクやフッター内のリンクなどは、navタグではなくほかの適切なタグ（aタグやdivタグなど）でマークアップすることがおすすめです。

ナビゲーションバーとユーザーエクスペリエンス

ここでは、ウェブページのユーザーエクスペリエンスにおけるナビゲーションバーの重要性と、その設計における考慮点について説明します。

ユーザーがウェブサイトを効率的に、かつ快適に探索するためには、適切なナビゲーションが不可欠です。

ナビゲーションバーの重要性
サイトマップとナビゲーションバーの関連性

ナビゲーションバーの重要性

ナビゲーションバーは、ウェブサイトのユーザビリティとユーザーエクスペリエンスに大きく影響します。

ユーザーはナビゲーションバーを使用してサイト内を移動し、情報を探すからです。

わかりやすい、使いやすいナビゲーションバーは、ユーザーが求める情報にすばやくアクセスできるようにし、サイト全体の滞在時間を延ばす可能性があります。

サイトマップとナビゲーションバーの関連性

サイトマップはウェブサイトの全体構造を、ナビゲーションバーはその構造の一部を表示します。

そのため、ナビゲーションバーの設計にあたっては、サイトマップを参考にすることが重要です。

サイトマップを基にナビゲーションバーを作成することで、ユーザーがサイトの構造を理解しやすくなります。

実践：navタグを使用したナビゲーションバーの作成

こちらでは、navタグを使用してナビゲーションバーを実際に作成する方法を探っていきましょう。

これには基本的なHTML構造の理解だけでなく、ほかのタグとの組み合わせなど、さまざまな要素が含まれます。

基本的なナビゲーションバーのHTML構造
aタグ、ulタグ、liタグと組み合わせた使用例
ドロップダウンメニューを含むナビゲーションバーの作成
navタグの具体的な使用例

基本的なナビゲーションバーのHTML構造

ナビゲーションバーのHTML構造は比較的シンプルです。

navタグを使用してナビゲーションバーのセクションを定義して、その中にリンク（通常はaタグ）を含むリスト（ulまたはolタグ）を配置します。

この構造は、ほとんどのウェブサイトに見られ、学びやすく、カスタマイズが容易です。

aタグ、ulタグ、liタグと組み合わせた使用例

navタグの中に、aタグ（アンカータグ）、ulタグ（順不同リスト）、liタグ（リストアイテム）を組み合わせて使用することが一般的です。

例えば、以下のようなコードになります。

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

3つのリンク（Home、About、Contact）を含むナビゲーションバーを生成する例です。

ドロップダウンメニューを含むナビゲーションバーの作成

複雑なサイトでは、ナビゲーションバーにドロップダウンメニューを含めることがあります。

これは、サブメニューを表示するために使用され、主要なメニューアイテムの下に配置するもの。

これを達成するためには、HTMLとCSSの両方の知識が必要です。

navタグの具体的な使用例

実際のウェブサイトでnavタグがどのように使用されているかを確認することで、理解を深められます。

例えば、有名なウェブサイトや学習サイトを訪問し、そのページソースを見てみましょう。

navタグがどのように配置され、どの要素と組み合わせられているかを見ることで、自分のプロジェクトにどのように応用できるかのアイデアを得られるはずです。

CSSとnavタグの組み合わせ

このセクションでは、CSSとnavタグを組み合わせてナビゲーションバーをどのようにスタイリングし、レスポンシブにするかを学びます。

具体的には以下のトピックを扱います。

CSSを使用したナビゲーションバーのスタイリング
メディアクエリを用いたレスポンシブなナビゲーションバー

CSSを使用したナビゲーションバーのスタイリング

HTMLだけでは、ウェブページは非常に基本的な見た目しか持ちません。

ここで、CSSが重要な役割を果たします。

CSSは、ウェブページの見た目と体験を制御するためのスタイルシート言語。

navタグとCSSを組み合わせることで、見た目をカスタマイズし、ユーザーにより良い体験を提供することができます。

例えば、リンクの色やフォント、マウスオーバー時の効果などを変更できます。

/* ナビゲーションバーの項目 */
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

メディアクエリを用いたレスポンシブなナビゲーションバー

CSSのメディアクエリを用いることで、レスポンシブデザインを実現可能です。

レスポンシブデザインとは、デバイスの種類や画面のサイズによって、ウェブページの表示が自動的に調整されるデザインのこと。

メディアクエリを用いて、デバイスの画面幅に基づいてスタイルを適用することが可能です。

これにより、スマートフォン、タブレット、デスクトップなど、さまざまなデバイスで最適な表示を提供できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブナビゲーションバー</title>
    <style>
        /* 基本的なナビゲーションバーのスタイル */
        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* メディアクエリ */
        @media screen and (max-width: 600px) {
            .navbar a {
                float: none;
                width: 100%;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#home">ホーム</a>
        <a href="#news">ニュース</a>
        <a href="#contact">連絡先</a>
        <a href="#about">私たちについて</a>
    </div>
</body>
</html>

HTMLとCSSで作るナビゲーションバーサンプル5選

具体的なナビゲーションバーのサンプルをご紹介します。

コードを見ることで、よりイメージが湧きやすくなるでしょう。

ホリゾンタルナビゲーションバー
バーティカルナビゲーションバー
固定ナビゲーションバー
メガメニューナビゲーション
ハンバーガーメニュー

ホリゾンタルナビゲーションバー

これは最も一般的に見られるタイプで、ウェブページの上部に水平に配置されます。

主要なメニューアイテムが左から右に並ぶ形式となっており、ドロップダウンメニューを持つこともあります。

<nav class="horizontal-navbar">
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
</nav>

<style>
    .horizontal-navbar {
        background-color: #333;
        overflow: hidden;
    }
    .horizontal-navbar a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    .horizontal-navbar a:hover {
        background-color: #ddd;
        color: black;
    }
</style>

バーティカルナビゲーションバー

サイドバー形式で、ウェブページの左側または右側に縦に配置されることが多いです。

ダッシュボードや管理パネルでよく見られるナビゲーションバーになります。

<nav class="vertical-navbar">
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
</nav>

<style>
    .vertical-navbar {
        background-color: #333;
        width: 200px;
        height: 100vh;
    }
    .vertical-navbar a {
        display: block;
        color: white;
        padding: 16px;
        text-decoration: none;
    }
    .vertical-navbar a:hover {
        background-color: #ddd;
        color: black;
    }
</style>

固定ナビゲーションバー

スクロールしてもページの特定の位置（通常は上部）に固定され続けるナビゲーションバー。

ユーザがいつでも主要なナビゲーションリンクにアクセスできるため、ユーザビリティを向上させる効果があります。

.horizontal-navbar {
    background-color: #333;
    overflow: hidden;
    position: fixed; 
    top: 0;
    width: 100%;
}

メガメニューナビゲーション

メニューアイテムをホバーまたはクリックすると、大きなドロップダウンメニューが展開されるタイプのナビゲーション。

サブカテゴリや関連するコンテンツ、画像など、多くの情報を一度に表示できます。

<nav class="mega-menu">
    <div class="dropdown">
        <button class="dropbtn">Services</button>
        <div class="dropdown-content">
            <div class="row">
                <div class="column">
                    <h3>Category 1</h3>
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
                <div class="column">
                    <h3>Category 2</h3>
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
        </div>
    </div>
</nav>

<style>
    .dropbtn {
        background-color: #333;
        color: white;
        padding: 16px;
        border: none;
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    .dropdown:hover .dropdown-content {
        display: block;
    }
    .column {
        float: left;
        width: 100px;
    }
</style>

ハンバーガーメニュー

ハンバーガーメニューは、主にモバイルデバイスで使用される小さなアイコン（通常は3本の水平線）。

このアイコンをタップすると、主要なナビゲーションリンクが展開またはスライドアウトされる形式です。

<nav class="hamburger-menu">
    ☰
    <div class="menu-items">
        <a href="#">Home</a>
        <a href="#">News</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
    </div>
</nav>

<style>
    .hamburger-menu .menu-items {
        display: none;
    }
    .hamburger-menu:hover .menu-items {
        display: block;
    }
</style>