Day 3: リンクとナビゲーション

今日学ぶこと

ハイパーリンクの仕組みと<a>要素
絶対パスと相対パス
ページ内リンクとアンカー
ナビゲーションの作成

ハイパーリンクとは

Webの「Web」は「蜘蛛の巣」という意味です。ハイパーリンクは、この蜘蛛の巣のようにページ同士を結びつける仕組みです。HTMLの「HT」（HyperText）は、まさにこのリンク機能を指しています。

flowchart TB
    subgraph Web["🌐 Webのリンク構造"]
        A["ページA"]
        B["ページB"]
        C["ページC"]
        D["外部サイト"]
    end
    A -->|"リンク"| B
    A -->|"リンク"| C
    B -->|"リンク"| D
    C -->|"リンク"| A
    style A fill:#3b82f6,color:#fff
    style B fill:#8b5cf6,color:#fff
    style C fill:#22c55e,color:#fff
    style D fill:#f59e0b,color:#fff

`<a>` 要素の基本

リンクは<a>（anchor）要素で作成します。

<a href="https://developer.mozilla.org">MDN Web Docs</a>

主要な属性

属性	説明	例
`href`	リンク先のURL	`"https://example.com"`
`target`	リンクの開き方	`"_blank"`（新しいタブ）
`rel`	リンク先との関係	`"noopener noreferrer"`
`title`	ツールチップテキスト	`"詳細を見る"`
`download`	ファイルのダウンロード	`"file.pdf"`

target属性の値

<!-- 同じタブで開く（デフォルト） -->
<a href="page.html">同じタブ</a>

<!-- 新しいタブで開く -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    新しいタブで開く
</a>

セキュリティ: target="_blank"を使う場合は、必ずrel="noopener noreferrer"を追加しましょう。これにより、リンク先のページから元のページを操作されるセキュリティリスクを防げます。

絶対パスと相対パス

絶対パス（Absolute Path）

完全なURLを指定します。外部サイトへのリンクに使います。

<a href="https://www.google.com">Google</a>
<a href="https://developer.mozilla.org/ja/">MDN</a>

相対パス（Relative Path）

現在のファイルからの位置を指定します。自分のサイト内のリンクに使います。

プロジェクト/
├── index.html          ← 現在のファイル
├── about.html
├── blog/
│   ├── index.html
│   └── post1.html
└── images/
    └── logo.png

<!-- index.html からのリンク -->
<a href="about.html">About</a>
<a href="blog/index.html">Blog</a>
<a href="blog/post1.html">記事1</a>

<!-- blog/post1.html からのリンク -->
<a href="../index.html">ホーム</a>
<a href="../about.html">About</a>
<a href="index.html">Blog一覧</a>

flowchart TB
    subgraph Paths["パスの種類"]
        Abs["絶対パス<br>https://example.com/page.html<br>完全なURL"]
        Rel["相対パス<br>../page.html<br>現在位置から"]
        Root["ルート相対パス<br>/page.html<br>ルートから"]
    end
    style Abs fill:#3b82f6,color:#fff
    style Rel fill:#22c55e,color:#fff
    style Root fill:#f59e0b,color:#fff

パスの種類	例	用途
絶対パス	`https://example.com/page.html`	外部サイト
相対パス	`../about.html`	サイト内（柔軟）
ルート相対パス	`/about.html`	サイト内（ルートから）

ページ内リンク（アンカー）

id属性を使って、ページ内の特定の場所にジャンプできます。

<!-- リンク元 -->
<nav>
    <a href="#section1">セクション1へ</a>
    <a href="#section2">セクション2へ</a>
    <a href="#top">ページトップへ</a>
</nav>

<!-- リンク先 -->
<h2 id="section1">セクション1</h2>
<p>セクション1の内容...</p>

<h2 id="section2">セクション2</h2>
<p>セクション2の内容...</p>

他のページの特定セクションへのリンク

<a href="about.html#team">チーム紹介セクションへ</a>

ポイント: id属性の値はページ内でユニーク（重複しない）でなければなりません。

メールリンクと電話リンク

メールリンク

<a href="mailto:info@example.com">メールを送る</a>

<!-- 件名と本文を指定 -->
<a href="mailto:info@example.com?subject=お問い合わせ&body=こんにちは">
    お問い合わせ
</a>

電話リンク

<a href="tel:+81-3-1234-5678">03-1234-5678</a>

スキーム	用途	例
`https://`	Webページ	`https://example.com`
`mailto:`	メール	`mailto:info@example.com`
`tel:`	電話	`tel:+81-3-1234-5678`
`#`	ページ内	`#section1`

ナビゲーションの作成

Webサイトには通常、主要なページへのナビゲーションがあります。

<nav>
    <a href="index.html">ホーム</a> |
    <a href="about.html">概要</a> |
    <a href="blog/index.html">ブログ</a> |
    <a href="contact.html">お問い合わせ</a>
</nav>

<nav>要素: ナビゲーションリンクのグループを示すセマンティック要素です。Day 8で詳しく学びます。

リンクのアクセシビリティ

良いリンクテキスト

<!-- ✅ 良い例: リンク先がわかる -->
<a href="guide.html">HTMLガイドを読む</a>

<!-- ❌ 悪い例: リンク先がわからない -->
<a href="guide.html">こちら</a>をクリック

ポイント	良い例	悪い例
リンクテキスト	`HTMLガイドを読む`	`こちら`
説明的	`料金プランの詳細`	`詳しくはこちら`
簡潔	`ダウンロード`	`ここをクリックしてダウンロードしてください`

実践: シンプルなWebサイト

3ページ構成のWebサイトを作ってみましょう。

index.html（ホーム）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>マイサイト - ホーム</title>
</head>
<body>
    <nav>
        <a href="index.html">ホーム</a> |
        <a href="about.html">自己紹介</a> |
        <a href="links.html">リンク集</a>
    </nav>

    <h1>マイサイトへようこそ</h1>
    <p>このサイトはHTMLの練習で作成しました。</p>

    <h2>コンテンツ</h2>
    <ul>
        <li><a href="about.html">自己紹介ページ</a></li>
        <li><a href="links.html">おすすめリンク集</a></li>
    </ul>
</body>
</html>

about.html（自己紹介）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>マイサイト - 自己紹介</title>
</head>
<body>
    <nav>
        <a href="index.html">ホーム</a> |
        <a href="about.html">自己紹介</a> |
        <a href="links.html">リンク集</a>
    </nav>

    <h1>自己紹介</h1>
    <p>HTMLを勉強中のWebデベロッパー見習いです。</p>

    <h2 id="hobby">趣味</h2>
    <p>プログラミングと読書が好きです。</p>

    <p><a href="index.html">← ホームに戻る</a></p>
</body>
</html>

まとめ

概念	説明
`<a href="">`	ハイパーリンクを作成する
絶対パス	完全なURL（外部サイト向け）
相対パス	現在位置からの相対URL（サイト内向け）
`#id`	ページ内リンク
`mailto:` / `tel:`	メール・電話リンク
`target="_blank"`	新しいタブで開く

重要ポイント

リンクはWebの核心的な機能
外部リンクは絶対パス、内部リンクは相対パスが基本
target="_blank"には**rel="noopener noreferrer"**を忘れずに
リンクテキストは説明的にする（アクセシビリティ）

練習問題

問題1: 基本

3ページ構成のWebサイトを作成し、各ページから他のすべてのページにリンクを張ってください。

問題2: 応用

長いページ（5つ以上のセクション）を作成し、ページ上部に目次をつけてください。各目次項目はページ内リンクで対応するセクションにジャンプするようにしましょう。

チャレンジ問題

メールリンクに件名と本文を事前設定して、「フィードバックを送る」リンクを作成してください。

参考リンク

次回予告: Day 4では「画像とメディア」について学びます。Webページに画像、音声、動画を埋め込む方法をマスターしましょう。