グローバルナビとサイドナビのレイアウト違いとスタイル例を完全ガイド！初心者でもわかるWebサイトのメニュー作り

グローバルナビとサイドナビのレイアウト違いとスタイル例

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

生徒

「ホームページを作るときによく見かけるメニューの配置方法で、グローバルナビとサイドナビって何が違うんですか？」

先生

「グローバルナビはページの上のほうに横並びで配置される主要なメニューで、サイドナビは画面の左右どちらかに縦並びで配置される補助的なメニューのことですよ。」

生徒

「それぞれのレイアウトの特徴や、具体的な書き方について詳しく知りたいです。」

先生

「それでは、基本的なレイアウトの違いから具体的なスタイル例まで順を追って見ていきましょう！」

1. グローバルナビゲーションとは何かその基本的な役割と特徴

ホームページやブログを閲覧しているときに、画面の最上部やヘッダーと呼ばれるエリアに横一列に並んでいるメニューを見たことがある人は多いでしょう。この最上部に配置される重要なメニューのことを、専門用語でグローバルナビゲーションと呼びます。ホームページ全体のどこに移動しても常に同じ場所へ表示されることが多く、訪問者が自分の見たい情報や目的のページへ迷わずスムーズにたどり着くための案内板としての極めて重要な役割を持っています。

例えば、企業のホームページであれば、会社概要やサービス紹介、お問い合わせといった主要なページへのリンクがこのグローバルナビにまとめられています。初心者の人が最初にウェブサイトの構造を設計する際にも、このグローバルナビを綺麗に横並びで配置できるようになることは必須のスキルとなります。ウェブサイト全体の使いやすさを大きく左右する要素であるため、デザイン性だけでなく、スマートフォンやパソコンなどどのような画面サイズであっても見やすく崩れない工夫が必要となります。

2. サイドナビゲーションとは何かその配置と便利な使い方

グローバルナビゲーションが画面の上部に横並びで配置されるのに対して、画面の左側あるいは右側の端に縦方向へずらりと並ぶように配置されるメニューのことを、サイドナビゲーションと呼びます。一般的にサイドバーと呼ばれることも多く、メインとなる記事コンテンツの脇に寄り添うように置かれるのが特徴です。グローバルナビゲーションよりもさらに細かいカテゴリー分けや、最近の投稿一覧、おすすめの記事、あるいはバナー画像などをすっきりと整理して配置するために非常に重宝されています。

特に情報の数が多くなる大規模なブログサイトや、たくさんのカテゴリーを持つニュースサイトなどでは、メインの文章を読む邪魔にならないようにしながら関連するページへ案内できるサイドナビが大変役立ちます。パソコンの大きな画面で見るときには画面の左右どちらかに縦に表示し、スマートフォンのような小さな画面で見るときには自動的に下へ回り込ませるなど、レイアウトを柔軟に変更するテクニックを覚えることで、どのような端末からアクセスしたユーザーにとっても使いやすいウェブサイトを構築することが可能になります。

3. グローバルナビとサイドナビのレイアウトの違いと選び方

グローバルナビゲーションとサイドナビゲーションの最も大きな違いは、画面上のどこに配置されるかという位置関係と、並べられた項目の方向が横か縦かという点にあります。上のほうに横長に配置されるグローバルナビは、サイト全体の大きな道案内として一番目立つ場所に置かれるため、すべてのページで共通して絶対に見てほしい主要なリンクを置くのに最適です。一方で、サイドに縦長に配置されるナビは、特定のページに関連する細かい情報や、補助的なリンクをたくさん並べたいときに威力を発揮します。

これから自分でホームページやブログを作る初心者の人は、自分が作ろうとしているウェブサイトの目的に合わせてどちらのメニュー形式を採用するか、あるいは両方を上手に組み合わせるかを考えることが大切です。例えば、シンプルでスッキリとしたデザインのポートフォリオサイトを作りたい場合はグローバルナビだけで十分に魅力を伝えることができますし、情報量が豊富なブログメディアを作りたい場合はサイドナビを一緒に取り入れることで、訪問者が他の記事を探しやすくなり滞在時間を長くする効果が期待できます。

4. HTMLとCSSを使った基本的なグローバルナビのスタイル例

実際にHTMLとCSSを使って、画面の上部にすっきりと横並びで表示されるグローバルナビゲーションのスタイルを作ってみましょう。ホームページのメニューを作る際には、箇条書きを表すリストタグを組み合わせて記述するのが一般的です。CSSで横並びのレイアウトを指定することで、きれいなメニューバーに仕上げることができます。


<style>
    .global-nav {
        background-color: #333;
        padding: 10px;
    }
    .global-nav ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
    }
    .global-nav li {
        margin-right: 20px;
    }
    .global-nav a {
        color: #fff;
        text-decoration: none;
    }
</style>

<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>

ブラウザ表示

5. HTMLとCSSを使った縦並びサイドナビのスタイル例

次に、画面の横側に配置して縦方向へ項目をきれいに並べるサイドナビゲーションのスタイルを作ってみましょう。リストタグを使って項目を縦に積み上げ、枠線や背景色を工夫することで、独立したメニューボックスとしての見栄えを整えることができます。


<style>
    .side-nav {
        width: 200px;
        background-color: #f4f4f4;
        padding: 15px;
        border: 1px solid #ddd;
    }
    .side-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .side-nav li {
        margin-bottom: 10px;
    }
    .side-nav a {
        color: #333;
        text-decoration: none;
    }
</style>

<aside class="side-nav">
    <p class="fw-bold">メニュー</p>
    <ul>
        <li><a href="#">新着情報</a></li>
        <li><a href="#">人気記事</a></li>
        <li><a href="#">カテゴリー</a></li>
        <li><a href="#">プロフィール</a></li>
    </ul>
</aside>

ブラウザ表示

6. グローバルナビとサイドナビを組み合わせたレイアウト例

実際の本格的なウェブサイトでは、上部にグローバルナビを配置して大きなページ移動をできるようにしつつ、ページの下層部分ではメインの記事の横にサイドナビを配置して詳細な情報を探せるようにするなど、両方のメニューを上手に組み合わせて使っているケースが多く見られます。複数のレイアウト要素を綺麗に配置するための書き方を確認してみましょう。


<style>
    .container-layout {
        display: flex;
        gap: 20px;
        margin-top: 15px;
    }
    .main-content {
        flex: 1;
        background-color: #fff;
        padding: 15px;
        border: 1px solid #ccc;
    }
    .side-bar {
        width: 180px;
        background-color: #e9e9e9;
        padding: 15px;
    }
</style>

<header style="background-color: #0056b3; color: #fff; padding: 10px;">
    上部グローバルナビエリア
</header>
<div class="container-layout">
    <main class="main-content">
        <p>ここにメインの記事や文章が表示されます。</p>
    </main>
    <aside class="side-bar">
        <p>サイドナビエリア</p>
    </aside>
</div>

ブラウザ表示

上部グローバルナビエリア

ここにメインの記事や文章が表示されます。

7. 初心者がナビゲーションを作る際に気をつけるべきポイント

プログラミングを始めたばかりの初心者の人が、グローバルナビゲーションやサイドナビゲーションをご自身のウェブサイトに実装する際には、いくつか知っておくと便利な大切なポイントがあります。まず一番大切なのは、スマートフォンなどの小さな画面で見たときにメニューが画面からはみ出してしまわないように配慮することです。パソコンの大きな画面とスマホの小さな画面の両方で綺麗に表示されるように設計することをレスポンシブ対応と呼びますが、この考え方を意識するだけでウェブサイトの完成度がぐっと上がります。

また、文字の色と背景の色とのコントラストをしっかりとつけて、文字が読みにくくならないように工夫することも訪問者に対する親切心につながります。リンクにマウスのカーソルを合わせたときに色がふわっと変わるような小さな装飾を加えるだけでも、操作している実感が湧きやすくなり、より使いやすいメニューに仕上げることができます。今回ご紹介した基本的な書き方やスタイル例を参考にしながら、ご自身の作りたいホームページのイメージに合わせて自由にアレンジしてみてください。

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