【初心者向け】HTMLでページ内リンク（アンカーリンク）を作る方法！仕組みから劇的変化のCSSまで解説

「ページが長くなってきたから目次を作りたい」

「『ページトップへ戻る』ボタンを設置したい」

ブログやWebサイトを作っていると、同じページ内の特定の場所に一瞬でジャンプさせたい場面がよくありますよね。これは「ページ内リンク（アンカーリンク）」と呼ばれる機能です。

一見難しそうに見えますが、仕組みさえわかればたった2つのコードをセットで書くだけで簡単に実装できます！

今回は、HTMLでの基本的な書き方から、別のページへ飛ばす応用技、そして一瞬で画面が切り替わるのではなく「ぬるっと滑らかに動かす」CSSのテクニックまで、初心者向けに分かりやすく解説します。

ページ内リンクの基本は「2つのセット」

ページ内リンクを作るには、「ジャンプ元（クリックする場所）」と「ジャンプ先（移動する目的地）」の2つを用意する必要があります。

① ジャンプ先（目的地）に「id」をつける

まずは、移動させたい見出しなどのタグに、目印となる好きな名前の id を指定します。

<h2 id="section1">ここが目的地です</h2>

② ジャンプ元（リンク）のhrefに「#id名」を書く

次に、リンクをクリックする側に <a> タグを使い、href 属性の中に先ほど決めたid名の頭に #（シャープ） をつけて指定します。

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

これで、リンクをクリックした時に id="section1" がついた場所まで一瞬でスクロールするようになります。

実践的なコード例（目次から各セクションへ）

よくある「目次」から「各コンテンツ」へジャンプさせる具体的なコード例です。全体のイメージを掴んでみてください。

<!-- 目次（ジャンプ元） -->
<div class="mokuji">
  <p>目次</p>
  <ul>
    <li><a href="#about">1. 私たちについて</a></li>
    <li><a href="#services">2. サービス内容</a></li>
    <li><a href="#contact">3. お問い合わせ</a></li>
  </ul>
</div>

<hr>

<!-- コンテンツ（ジャンプ先） -->
<section id="about">
  <h2>1. 私たちについて</h2>
  <p>ここに会社概要などの文章が入ります。</p>
</section>

<section id="services">
  <h2>2. サービス内容</h2>
  <p>ここに提供しているサービスの説明が入ります。</p>
</section>

<section id="contact">
  <h2>3. お問い合わせ</h2>
  <p>ここにお問い合わせフォームなどが入ります。</p>
</section>

覚えておくと便利な3つの応用テクニック

基本がマスターできたら、さらに便利になる応用技もチェックしておきましょう！

1. 「ページの一番上に戻る」ボタンの作り方

ブログの右下によくある「ページトップへ戻る」ボタンは、新しくidを作らなくても、# または #top と書くだけで自動的にページ最上部へ戻ってくれます。

<a href="#">ページトップへ戻る</a>

2. 別ページの「特定の場所」へ直接リンクさせる

同じページ内だけでなく、「別のページの、あのセクションに直接飛ばしたい！」という時もありますよね。その場合は、URLの末尾に #id名 をくっつければOKです。

<!-- 別ページの「サービス内容」へ直接ジャンプ -->
<a href="https://example.com/page.html#services">他ページのサービス内容を見る</a>

3. 【おすすめ】スクロールを「ぬるっと」滑らかにするCSS

デフォルトのページ内リンクは、クリックした瞬間に「パッ」と画面が切り替わります。これだと読者が「どこに移動したの？」と迷ってしまうことがあります。

CSSに以下の1行を追加するだけで、画面がスーッと滑らかにスクロール（スムーススクロール）するようになり、サイトの快適さがグッと上がります！

html {
  scroll-behavior: smooth;
}

⚠️ 失敗しないための注意点：id名に日本語はNG！

id名は自由に決められますが、id="お問い合わせ" のように日本語（全角文字）を使うのは絶対に避けましょう。

WebブラウザやSNSでURLが共有された際に、日本語部分が「%E3%81%8A%E5%93%A1…」のように長い記号に文字化けし、リンクが正常に動かなくなる原因になります。

💡 おすすめの命名ルール

id名は必ず半角英数字とハイフン（-）やアンダースコア（_）を使い、id="contact" や id="sec-01" のように誰が見ても分かりやすい英語で指定するのが鉄則です。

まとめ：ページ内リンクで読者に優しいブログを作ろう

ページ内リンクのポイントを振り返りましょう。

• ジャンプ先には id="〇〇" をつける

• ジャンプ元には href="#〇〇" を指定する（#を忘れない！）

• id名には日本語を使わず、半角英数字にする

• CSSの scroll-behavior: smooth; でさらに見やすく

長い記事でも、適切なページ内リンク（目次など）があるだけで、読みたい情報にすぐアクセスできるようになります。読者の離脱を防ぎ、満足度を上げるためにも、ぜひあなたのブログで活用してみてくださいね！