【入門編】nav要素の定義と使用基準 – HTML実践ガイド HTML X Facebook はてブ LINE Pinterest コピー 2026.07.10 「ここがナビゲーションです！」とブラウザに伝える魔法のタグ、` `の正しい使い方 Webサイトを作っていると、必ずと言っていいほどお世話になるのが「メニュー」ですよね。ロゴの横に並んだリンクや、ハンバーガーメニューなど、ユーザーを目的のページへ案内する大切な役割です。 HTMLには、そんな大事な場所を「ここがナビゲーションですよ！」とブラウザに教えてあげるための` `という特別なタグが用意されています。 でも、初心者の頃って「とにかくリンクを全部` `で囲めばいいのかな？」と迷ってしまいませんか？ 実は、この` `、使い方にはちょっとした「作法」があるんです。今日は、その心地よい距離感を一緒に学んでいきましょう。 — ` `は、Webサイトの「案内板」です 街を歩いているとき、駅のホームやショッピングモールの入り口に「案内板（マップ）」がありますよね。あそこには「トイレ」「出口」「レストラン街」といった、主要な行き先が書かれています。 ` `要素も全く同じです。ページ内の「主要なリンク」をまとめるための「案内板」だと考えてみてください。 どんな時に使うの？ 主に、以下のような場所で使います。 サイト全体のメニュー（ヘッダーにあるやつですね） 目次（長い記事の途中に置く、あのリンク集です） ページネーション（「前のページ」「次のページ」のようなボタン） これらはすべて、ユーザーが「次にどこへ行けばいいか」を判断するための大切な案内です。 — すべてのリンクを ` ` に入れちゃダメ？ ここで一番つまずきやすいポイントが、「フッターにあるプライバシーポリシーや利用規約のリンクも` `で囲むべき？」という疑問です。 結論から言うと、「あまりに小さなリンクの集まりまで` `に入れる必要はない」というのが、今のWeb制作の現場でのスタンダードです。 なぜなら、ブラウザやスクリーンリーダー（視覚障がいのある方が使う読み上げソフト）は、` `を見つけると「おっ、ここは重要なメニューだな」と認識して、読み上げの優先度を上げたりします。全部のリンクを` `にしてしまうと、本当に大切なメニューが埋もれてしまい、ユーザーにとってはかえって「案内板だらけでどこを見ればいいかわからない！」という状況になってしまうんです。 「主要な行き先だけを案内板に載せる」。これがスマートなWebサイトを作るコツですよ。 — 実践！ わかりやすい ` ` の書き方 では、実際にコードで見てみましょう。まずは一番よくある「ヘッダーメニュー」の例です。 私のポートフォリオ ホーム 制作実績 私について ちょっとしたプロのテクニック：`aria-label` 上のコードに `aria-label=”メインメニュー”` という謎の属性が入っていますよね。これは、視覚障がいのある方が使うツールに対して「これはメインメニューですよ」と、より親切に伝えるための「補足説明」です。 もしページ内に` `が複数ある場合（例えばヘッダーとフッターの両方にある場合）、これをつけると「どっちが何のメニューか」をブラウザがちゃんと理解してくれるようになります。これを入れるだけで、あなたのコードはグッと優しく、プロフェッショナルなものになります。 — まとめ：迷ったら「これは案内板か？」と考えてみる ここまで読んでみて、いかがでしたか？ ` `は、ただの「リンクを囲む箱」ではなく、「ユーザーを迷わせないための優しい案内板」なんです。 メインの移動手段なら ` ` で囲む 細かいリンク（プライバシーポリシーなど）は ` 複数の ` ` があるときは `aria-label` で名前を付けてあげる これさえ覚えておけば、もう怖くありません！ Web制作は、ルールを覚えることも大切ですが、それ以上に「使う人がどう感じるか」を想像することが一番の近道です。まずは小さな一歩から、HTMLに命を吹き込んでいきましょう。あなたの書くコードが、誰かの役に立つことを応援しています！
HTML
コメント