このページでは、HTMLを使用してナビゲーションバーを作成する方法を詳しく解説します。

目次

• 基本的なナビゲーションバー
• インラインリストを使用したナビゲーションバー
• ドロップダウンメニュー付きナビゲーションバー
• 固定ナビゲーションバー
• レスポンシブ対応ナビゲーションバー

基本的なナビゲーションバー

最も基本的なナビゲーションバーは、HTMLのリスト（<ul>、<li>）とリンク（<a>）を使用して作成できます。

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>
    

インラインリストを使用したナビゲーションバー

デフォルトでは、リストアイテムは縦に並びますが、横に並べるためにインライン表示にすることができます。

<nav>
    <ul style="list-style: none; padding: 0;">
        <li style="display: inline; margin-right: 20px;"><a href="#">ホーム</a></li>
        <li style="display: inline; margin-right: 20px;"><a href="#">サービス</a></li>
        <li style="display: inline;"><a href="#">お問い合わせ</a></li>
    </ul>
</nav>
    

ドロップダウンメニュー付きナビゲーションバー

ドロップダウンメニューを追加するには、HTMLの<ul>と<li>のネストを使用します。

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li>
            <a href="#">サービス</a>
            <ul>
                <li><a href="#">Web開発</a></li>
                <li><a href="#">SEO対策</a></li>
            </ul>
        </li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>
    

固定ナビゲーションバー

スクロールしても常に画面上部に固定されるナビゲーションバーを作成できます。

<nav style="position: fixed; top: 0; width: 100%; background: #f8f8f8; padding: 10px;">
    <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="display: inline; margin-right: 20px;"><a href="#">ホーム</a></li>
        <li style="display: inline; margin-right: 20px;"><a href="#">サービス</a></li>
        <li style="display: inline;"><a href="#">お問い合わせ</a></li>
    </ul>
</nav>
    

レスポンシブ対応ナビゲーションバー

画面サイズに応じてレイアウトが変わるレスポンシブナビゲーションバーを作成するには、<button>を利用する方法もあります。

<nav>
    <button onclick="toggleMenu()">☰ メニュー</button>
    <ul id="menu" style="display: none;">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

<script>
function toggleMenu() {
    var menu = document.getElementById("menu");
    if (menu.style.display === "none") {
        menu.style.display = "block";
    } else {
        menu.style.display = "none";
    }
}
</script>