ナビゲーションバーの作り方！初心者でもわかるHTMLとCSSの基本構成とスタイル装飾

ナビゲーションバーの基本構成とスタイルの付け方

先生と生徒の会話形式で理解しよう

生徒

「ウェブサイトのページ上部によくある、メニューが並んだバーを作りたいのですが、どうすればいいのでしょうか？」

先生

「それは『ナビゲーションバー（メニューバー）』といいます。HTMLで構造を作り、CSSで見た目を整えるのが基本ですよ。」

生徒

「難しそうですが、何から始めればいいですか？」

先生

「まずは、リストタグを使ってメニューの項目を並べることから始めましょう。一緒にコードを書いていきますね！」

1. ナビゲーションバーとは何か

ナビゲーションバーとは、ウェブサイトの最上部や左側に配置されている、そのサイト内の主要なページへ移動するための案内板のことです。例えば「ホーム」「会社概要」「サービス紹介」「お問い合わせ」といったリンクが並んでいるのを見たことはありませんか。あれがナビゲーションバーです。このバーがあることで、訪問者は迷わずに目的のページへ辿り着くことができます。

ウェブ制作において、ナビゲーションバーは「ウェブサイトの顔」とも言える非常に重要な要素です。これが使いやすいかどうかで、ウェブサイト全体の評価が決まると言っても過言ではありません。初心者の方は、まず「メニューはリンクの集合体である」ということを理解しましょう。HTMLというプログラミング言語の仲間を使って中身を作り、CSSという装飾用の言語で色や形を決めるという流れが、ウェブデザインの基本です。最初は難しく感じるかもしれませんが、一つひとつのパーツを組み立てるだけで、あなたのパソコン上に本格的なメニューが完成します。

2. リストタグを使った基本構成

ナビゲーションバーの中身を作るには、ulタグとliタグという「リスト（箇条書き）」を作る仕組みを使うのが一般的です。ウェブブラウザは、これらを「関連した項目のまとまり」として認識してくれます。


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

ブラウザ表示

このようにnavタグで囲むことで、ここがウェブサイトの案内役であることを宣言します。aタグはリンクを作るための魔法のタグで、クリックすると別のページへ飛ぶ機能を持っています。まずはこの「箱」を作るイメージを持ってみてください。箇条書きのリストが、ウェブデザインの世界ではメニューに化けるのです。

3. 横並びにするCSSのテクニック

リストのままでは縦に並んでしまいますが、ナビゲーションバーは一般的に横並びです。ここでCSSの出番です。リストの形を崩して横に一列に並べるためには、display: flexという現代的な手法を使うのが最も簡単でスマートです。


<style>
    nav ul {
        display: flex;
        list-style: none;
        padding: 0;
    }
    nav li {
        margin-right: 20px;
    }
</style>

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">会社概要</a></li>
    </ul>
</nav>

ブラウザ表示

display: flexという命令は、中の要素を横に並べてくれる便利な魔法の言葉です。また、list-style: noneを使うことで、箇条書き特有の「点（黒丸）」を消しています。これだけで、メニューらしい見た目になってきますよね。初心者の方も、この「箱を横に並べる」という考え方をマスターすれば、ウェブ制作の楽しさが一気に広がります。

4. 色と背景でバーをデザインする

次に、メニュー全体をバー（帯状）に見せるために背景色をつけます。背景に色を塗るだけで、画面の上部で独立したエリアが完成し、ウェブサイトらしい雰囲気が醸し出されます。


<style>
    nav {
        background-color: #333;
        padding: 15px;
    }
    nav a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }
</style>

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

ブラウザ表示

ここで使ったtext-decoration: noneは、リンク特有の「下線」を消すための設定です。ナビゲーションバーでは、下線がないほうが見やすくスッキリとした印象になるため、よく使われます。色を変えるだけで、あなたのウェブサイトはグッとプロっぽくなります。配色のコツとしては、背景を濃い色にして、文字を白くするだけで非常に視認性が高まり、読みやすくなります。

5. ホバーエフェクトで反応を作る

ウェブサイトのメニューにマウスを乗せると、色が変わる仕掛けを見たことはありませんか。これは「ホバー（hover）」という機能です。利用者が「どこを指しているのか」を分かりやすくするための大切な工夫です。


<style>
    nav a {
        color: white;
        transition: 0.3s;
    }
    nav a:hover {
        color: #ffcc00;
        text-decoration: underline;
    }
</style>

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
    </ul>
</nav>

ブラウザ表示

:hoverという命令を書くだけで、マウスを乗せたときの動きを定義できます。transition: 0.3sを加えると、色がパッと変わるのではなく、滑らかに変化するようになり、操作の心地よさが上がります。こうした「わずかな動き」が、ウェブサイトを使うユーザーにとっての安心感やワクワク感に繋がります。初心者の方がまず最初に実装するアニメーションとしても、このホバーエフェクトは最適です。

6. レスポンシブ対応の考え方

最後に、スマートフォン対応について触れておきましょう。画面が小さいスマホでは、横並びのメニューは窮屈になってしまいます。画面幅に応じて縦並びに変えるために「メディアクエリ」という仕組みを使います。


<style>
    @media (max-width: 600px) {
        nav ul {
            flex-direction: column;
        }
    }
</style>

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
    </ul>
</nav>

ブラウザ表示

@media (max-width: 600px)という命令は、画面幅が600ピクセルより小さいときだけ中の設定を有効にするという意味です。これにより、パソコンで見るときは横並び、スマホで見るときは縦並びという、賢いメニューが作れます。ウェブ制作において、この柔軟な対応は必須スキルです。最初から完璧を目指す必要はありません。まずは横並びのメニューが作れたら、次にこのスマホ対応に挑戦してみてください。あなたのウェブサイトが多くのデバイスで見られるようになると、喜びもひとしおですよ。

7. デザインを洗練させるコツ

ナビゲーションバーをより美しく見せるためには、余白の使い方が鍵となります。メニュー同士の間隔を少し広めに取るだけで、サイト全体に余裕が生まれ、非常に高級感が出るようになります。また、文字のフォントや太さを調整することも忘れないでください。細かいことですが、こうした丁寧な作り込みがウェブサイトの信頼感を生みます。

プログラミング未経験でパソコンを触るのも緊張するかもしれませんが、こうして少しずつタグや命令を書いているうちに、いつの間にか「自分で作れた！」という実感が持てるようになります。エラーが出たら、書き間違いがないか一つひとつ確認するだけで大丈夫です。それがプログラミング上達の最も確実な道ですから。ぜひ、このナビゲーションバーをスタート地点にして、色々なページを繋げてみてください。あなたのウェブサイト作りの旅を心から応援しています。

2026年最新スキルアップ・実践セミナー