例

    <a href="#section1">セクション1へ移動</a>
    <h2 id="section1">セクション1</h2>
    

テキストを使ったアンカーリンク

リンクのテキストは自由に設定できます。

例

    <a href="#content">こちらをクリックして内容へ</a>
    <p id="content">ここがリンク先の内容です。</p>
    

id属性を使ったアンカーリンク

id属性を使うことで、ページ内の特定の要素にリンクを設定できます。idはページ内で一意である必要があります。

例

    <a href="#about">概要へ移動</a>
    <div id="about">
        <h2>概要</h2>
        <p>このページはHTMLのページ内リンクの説明をしています。</p>
    </div>
    

name属性を使ったアンカーリンク（非推奨）

以前はname属性を使ったアンカーが一般的でしたが、現在はid属性が推奨されています。

例（非推奨）

    <a name="old_link"></a>
    <a href="#old_link">このリンクをクリック</a>
    

トップへ戻るリンクの作成

長いページでは、ページの先頭に戻るリンクを用意すると便利です。

例

    <a href="#top">トップへ戻る</a>
    

複数のリンクを組み合わせる

ページ内のさまざまなセクションへリンクを作成し、ナビゲーションを作ることもできます。

例

    <nav>
        <a href="#section1">セクション1</a> |
        <a href="#section2">セクション2</a>
    </nav>

    <h2 id="section1">セクション1</h2>
    <p>ここにセクション1の内容が入ります。</p>

    <h2 id="section2">セクション2</h2>
    <p>ここにセクション2の内容が入ります。</p>
    

CSSやJavaScriptと組み合わせる

ページ内リンクはCSSやJavaScriptと組み合わせることで、より滑らかな動作を実現できます。

CSSを使う例

特定のセクションに移動したときに背景色を変更する。

    <style>
        #target:target {
            background-color: yellow;
        }
    </style>

    <a href="#target">ターゲットへ移動</a>
    <p id="target">このセクションが強調されます。</p>
    

JavaScriptを使う例

スムーズスクロールを実装するには、JavaScriptを使います。

    <script>
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                target.scrollIntoView({ behavior: 'smooth' });
            });
        });
    </script>
    

まとめ

ページ内リンクは、長いページのナビゲーションを向上させる便利な機能です。基本的な方法から、CSSやJavaScriptを活用した応用までさまざまな使い方があります。ぜひ活用してみてください。