navタグ -ナビゲーションメニューを定義する｜HTML辞典
<nav>タグとは？
<nav>タグは、HTML文書内でナビゲーションメニューを定義するためのタグです。
主にサイト内のページリンクやパンくずリストなどを含めるのに適しています。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<nav> は開始タグ（<nav>）と閉じタグ（</nav>）の両方が必要です。
基本的な記述方法
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/services">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>使用できる主な属性
<nav>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <nav class="main-nav">...</nav> |
id | 一意の識別子を設定 | <nav id="global-nav">...</nav> |
style | インラインスタイルを適用 | <nav style="background-color: #eee;">...</nav> |
CSSを使ったデザイン変更
nav {
background-color: #333;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-right: 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}適切な使用例
✅ グローバルナビゲーションとして使用
<header>
<nav>
<ul>
<li><a href="/">トップ</a></li>
<li><a href="/services">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>✅ フッター内のナビゲーションとして使用
<footer>
<nav>
<ul>
<li><a href="/privacy-policy">プライバシーポリシー</a></li>
<li><a href="/terms">利用規約</a></li>
</ul>
</nav>
</footer>適切でない使用例（誤った使い方）
❌ 単なるリストのグループ化に使用するのはNG<nav> は ナビゲーションのリンクを含む要素 に使うべきであり、単なるリストのグループ化には適していません。
<!-- NG: メニュー以外のリストに <nav> を使用 -->
<nav>
<ul>
<li>会社情報</li>
<li>事業内容</li>
<li>連絡先</li>
</ul>
</nav>✅ 正しい書き方（<div> を使用）
<div>
<ul>
<li>会社情報</li>
<li>事業内容</li>
<li>連絡先</li>
</ul>
</div><nav>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<nav> | ナビゲーションを定義 | 意味を持つブロック | メニュー、パンくずリスト |
<header> | ヘッダーの定義 | タイトルやロゴを含む | Webサイトや記事のヘッダー |
<footer> | フッターの定義 | 著作権情報やリンクを含む | Webサイトのフッター |
<div> | 汎用的なグループ化 | 意味を持たない | レイアウトやCSS適用 |
使用上の注意点
✅ <nav> はナビゲーション専用に使用する<nav> の中には サイト内のページリンク を含めるのが適切です。
✅ ユーザーの操作性を考慮してデザインする
- メニューが分かりやすくなるように、適切なスタイルを設定する。
- モバイル対応（レスポンシブデザイン）を考慮する。
関連タグ
まとめ
<nav>タグは、HTML文書内で ナビゲーションメニューを定義するためのタグ です。
グローバルナビゲーション、サイドメニュー、フッターメニューなどに適しており、 単なるリストのグループ化には使用せず、ナビゲーションリンク専用に使用するのが推奨されます。
