ナビゲーションメニューを作ってみよう（header内 nav）

作成ファイル・保存場所

作成した html-basic フォルダの中に html11.html というファイル名で保存してください。

目的

Webページの上部に配置されるナビゲーションメニュー（<nav>）の基本構造を学び、<header> 内に組み込んで使えるようになる。あわせて、ページ内リンクの基礎も習得する。

指示

以下の条件に従って、ナビゲーション付きのページを作成してください。

タイトルは「HTML課題11」とすること
<header> の中に <h1>（サイト名）と <nav> を含めること
<nav> の中にリンク（<a href="#〜">）をリスト形式（<ul>＋<li>）で3つ記述すること
<main> に各リンク先となる見出し（`〜）を設置し、内容を簡単に書いておくこと

ナビゲーションのリンク例

トップページ → href="#home"（見出し：id="home"）
サービス紹介 → href="#services"（見出し：id="services"）
お問い合わせ → href="#contact"（見出し：id="contact"）

チェックポイント

<header> の中に <nav> が正しく配置されているか
<ul>・<li> でナビゲーションが構造化されているか
各リンクがページ内の該当見出し（id指定）に対応しているか
見出しの順序や階層（<h1>→<h2>）が自然であるか
<section>でのグルーピングができているか
構文ミスやタグの閉じ忘れがないか

要素名がわからない場合は、HTML要素一覧を参照してみましょう

HTMLの解答例

header要素内にnav要素を配置するグローバルナビゲーションの作り方。とても大事なUIです。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML課題11</title>
</head>

<body>

    <!-- サイトのヘッダーとナビゲーション -->
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#">トップページ</a></li>
                <li><a href="#services">サービス紹介</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <!-- メインコンテンツ -->
    <main>

        <section>
            <h2 id="services">サービス紹介</h2>
            <p>ここでは提供しているサービスを簡単に紹介します。</p>
        </section>

        <section>
            <h2 id="contact">お問い合わせ</h2>
            <p>ご不明点などはお問い合わせください。</p>
        </section>

    </main>

    <!-- サイト全体のフッター -->
    <footer>
        <p><small>&copy; 2025 MySite</small></p>
    </footer>

</body>

</html>

完成イメージ

プレビューするには、画面上で右クリックし、Open with Live Serverを起動。（プラグインのLive Serverが必要です)