HTMLでグローバルメニューを簡単に作る方法！基本タグと構造をわかりやすく解説

Webサイトを訪れた際、ページの上部に表示されるメニューを見たことがあるでしょう。これが「グローバルメニュー」と呼ばれるものです。この記事では、HTMLを使用してグローバルメニューを作成する方法を初心者にもわかりやすく解説します。基本的なタグの種類や構造、CSSによるデザインの調整を中心に説明し、レスポンシブ対応のグローバルメニューについては次回の記事で詳しく解説します。

1 HTMLのグローバルメニューとは？
2 グローバルメニューの基本構造
- 2.1 グローバルメニューのHTML基本構造
3 グローバルメニューを装飾するCSS
- 3.1 基本的なスタイル設定
4 まとめ
- 4.1 重要ポイントのおさらい

HTMLのグローバルメニューとは？

Webサイトを訪れたとき、ページの上部に表示されるナビゲーションメニューを見たことがあるでしょう。これは「グローバルメニュー」と呼ばれ、サイト全体の主要なページへアクセスできる重要な要素です。

グローバルメニューがあることで、訪問者は迷わずに目的のページへ移動できます。また、サイトの構造を理解しやすくなり、ユーザーの利便性が向上します。

この記事では、HTMLを使ってグローバルメニューを作成する方法をわかりやすく解説します。HTMLタグの基本構造や、実装時のポイントを詳しく紹介するので、初心者の方でも簡単に理解できます。

グローバルメニューの基本構造

グローバルメニューは、HTMLの<nav>タグを使用して作成します。<nav>タグは「ナビゲーション」を意味し、サイト内のリンクをまとめるために使用されます。

See the Pen Untitled by yuki (@yuki_web) on CodePen.

グローバルメニューのHTML基本構造

以下が基本的なHTMLのグローバルメニューの構造です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>グローバルメニューの基本</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">サービス</a></li>
                <li><a href="#">会社情報</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

このコードでは、<nav>タグ内に<ul>（リスト）を作成し、<li>（リスト項目）を並べています。そして、各リスト項目に<a>タグを使ってリンクを設定しています。

グローバルメニューを装飾するCSS

HTMLだけではシンプルなリストが表示されるだけなので、見栄えをよくするためにCSSでデザインを整えます。

基本的なスタイル設定

以下のCSSを適用すると、横並びのナビゲーションメニューが作成できます。

nav {
    background-color: #333;
    padding: 10px 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    transition: 0.3s;
}

nav ul li a:hover {
    background-color: #555;
    border-radius: 5px;
}

このCSSでは、以下のポイントを押さえています。