長いWebページやブログ記事を読んでいるとき、目次をクリックしたらパッとその場所に飛べたり、ボタン一つでページの先頭に戻れたりすると便利ですよね。

このようにページ内の特定の位置へ移動する機能は「アンカーリンク（ページ内リンク）」と呼ばれ、HTMLを使えば誰でも簡単に実装することができます。

「HTMLタグって難しそう…」と不安に思う方もいるかもしれませんが、ご安心ください。実は、たった2つのステップで設定できるとてもシンプルな仕組みなんです。

この記事では、初心者の方でもすぐに使えるように、アンカーリンクの基本的な書き方から、画像を使ったリンク、リンクがずれてしまう時の対処法まで、わかりやすく丁寧に解説します。

一緒に手を動かしながら、ユーザビリティの高い素敵なページを作っていきましょう。

アンカーリンク（ページ内リンク）とはどのような機能か

アンカーリンク（ページ内リンク）とはどのような機能か

まずは、アンカーリンク（ページ内リンク）が具体的にどのような機能なのか、その全体像を掴んでおきましょう。

簡単に言えば、読者を「ここを見てほしい！」という場所に瞬時に案内するガイドのような役割を果たします。仕組みさえ理解してしまえば、Webサイトの使いやすさをぐっと高めることができますよ。

ページ内の特定の位置へ瞬時にジャンプする仕組み

アンカーリンクとは、同じページの中にある「特定の場所」へジャンプさせる仕組みのことです。

通常のリンクは別のページへ移動しますが、アンカーリンクは「ページ内の指定した位置」へスクロールやジャンプを行います。

たとえば、長い文章の途中で「詳細はこちら」というリンクをクリックすると、同じページの下の方にある詳細説明の箇所へ瞬時に画面が切り替わる、といった動きです。読者がスクロールする手間を省けるため、ストレスなく情報を探せるようになります。

目次や「トップへ戻る」ボタンなどの活用事例

この機能は、Webサイトのさまざまな場所で活用されています。

もっとも身近な例としては、ブログ記事の冒頭にある「目次」が挙げられます。見出しをクリックすると、その本文まで自動的にスクロールしてくれますよね。

また、ページの右下によくある「トップへ戻る」ボタンもアンカーリンクの一種です。ほかにも、ランディングページ（LP）で「お申し込みフォームへ」ボタンを押すと、ページ下部のフォームまで移動するように設定されていることも多いです。これらはすべて、読者の利便性を考えて設置されています。

初心者でも簡単！HTMLによるアンカーリンクの基本的な書き方

初心者でも簡単！HTMLによるアンカーリンクの基本的な書き方

それでは、実際にHTMLを使ってアンカーリンクを設定する方法を見ていきましょう。

「難しそう」と感じるかもしれませんが、やることは「到着地点に目印をつける」ことと、「出発地点からその目印へリンクを貼る」ことの2つだけです。コピーして使えるサンプルも用意しましたので、ぜひ試してみてくださいね。

手順1：到着地点（ジャンプ先）のタグにid属性を設定する

まずは、リンクをクリックした後に移動したい場所（到着地点）の設定を行います。

見出しや段落などのHTMLタグに、id（アイディー）という属性を追加して、固有の名前（目印）を付けましょう。

例えば、見出しの場所に飛びたい場合は以下のように記述します。

<h2 id="section1">ここがジャンプ先の見出しです</h2>Code language: HTML, XML (xml)

このid="section1"の部分が、「ここはsection1という場所ですよ」という目印になります。id名は好きな名前で構いませんが、わかりやすい英数字を使うのがおすすめです。

手順2：出発地点（リンク元）のaタグに「#id名」を記述する

次に、リンクをクリックする場所（出発地点）の設定を行います。

ここでは、リンクを作るための<a>タグ（アンカータグ）を使用します。href属性に、先ほど設定したid名の前に「#（ハッシュ）」をつけて記述してください。

<a href="#section1">ここをクリックすると見出しへ飛びます</a>Code language: HTML, XML (xml)

このように#をつけることで、「このページ内のidを探してね」という指示になります。これで、クリックするとid="section1"の場所へジャンプする仕組みの完成です。

コピーして使えるHTML記述のサンプルコード

ここまでの手順をまとめた、基本的なHTMLコードのサンプルです。ご自身のWebサイトやブログのHTML編集画面にコピー＆ペーストして、動きを確認してみてください。

<!-- 出発地点（リンク元） -->
<p>
  <a href="#sample-jump">目的の場所へジャンプ！</a>
</p>

<!-- 間に文章などが入ります -->
<div style="height: 500px;">（スクロール用の余白）</div>

<!-- 到着地点（ジャンプ先） -->
<h2 id="sample-jump">ここに到着します</h2>
<p>無事にジャンプできましたか？</p>Code language: HTML, XML (xml)

id名（ここではsample-jump）は、出発地点と到着地点で必ず同じものにしてくださいね。

応用編：さまざまなパターンのアンカーリンク設定方法

応用編：さまざまなパターンのアンカーリンク設定方法

基本の書き方がわかったところで、次は少し応用的な使い方をご紹介します。

アンカーリンクは、同じページ内だけでなく、別のページの特定の場所へ飛ばしたり、画像をボタン代わりにしたりと、アイデア次第で便利に使えます。いくつかのパターンを覚えておくと、Web制作の幅が広がりますよ。

サイト内の別のページの特定箇所へリンクを飛ばす方法

「記事A」から「記事B」の途中にある見出しへリンクを飛ばしたい場合もありますよね。

その場合は、リンク元のhref属性に「ページBのURL」と「#id名」を続けて記述します。

<a href="https://example.com/page-b.html#target-id">
  別ページの特定箇所へ飛ぶ
</a>Code language: HTML, XML (xml)

もちろん、リンク先（ページB）の該当箇所には、あらかじめ<h2 id="target-id">のようにidを設定しておく必要があります。これで、ページを開いた瞬間に指定の場所が表示されるようになります。

外部サイトの特定箇所へリンクを飛ばす方法

自分のサイト内だけでなく、外部サイトの特定の場所へリンクを貼ることも可能です。

基本的な書き方は、サイト内別ページへのリンクと同じです。相手先のページにidが設定されているかを確認し、そのURLの後ろに#id名をつけてリンクを作成します。

<a href="https://wikipedia.org/wiki/HTML#History">
  HTMLの歴史（Wikipedia）へ
</a>Code language: HTML, XML (xml)

ただし、外部サイトのid名は相手側が変更する可能性があるため、リンク切れには注意が必要ですね。Chromeのデベロッパーツールなどで相手先のidを確認すると良いでしょう。

ページの最上部（トップ）に戻るリンクを作る方法

長いページの最後によくある「トップへ戻る」ボタンも、実はアンカーリンクで作られています。

ページの一番上にある要素（例えば<body>タグやヘッダーのロゴなど）にidを付けて、そこへリンクさせるのが一般的です。

もし特別なidを設定していなくても、href="#"またはhref="#top"と記述するだけで、多くのブラウザではページの最上部へ戻る挙動をしてくれます。

<a href="#">ページトップへ戻る</a>Code language: HTML, XML (xml)

これならidの設定なしですぐに使えて便利ですね。

テキストではなく画像をアンカーリンクにする方法

テキストリンクだけでなく、画像やバナーをクリックしてページ内移動をさせたい場合もありますよね。

そのときは、<a>タグの中に<img>タグを入れて画像を囲んであげればOKです。

<a href="#contact-form">
  <img src="button.jpg" alt="お問い合わせはこちら">
</a>Code language: HTML, XML (xml)

こうすることで、画像全体がクリック可能なボタンとなり、クリックすると#contact-formの場所（お問い合わせフォームなど）へジャンプします。おしゃれなボタン画像を使えば、クリック率アップも期待できるでしょう。

アンカーリンクを設定する際の重要なルールと注意点

アンカーリンクを設定する際の重要なルールと注意点

アンカーリンクはとても便利ですが、正しく動作させるためにはいくつかのルールを守る必要があります。

特にid属性の使い方には決まりがあり、これを無視するとリンクが反応しなかったり、予期せぬ動きをしてしまったりします。ここで紹介する3つのルールは必ずチェックしておきましょう。

1つのページ内で同じid名を重複して使わない

最も重要なルールは、「1つのページ内で同じid名は1回しか使えない」ということです。

idは「固有の識別子」という意味なので、住所のように一つだけである必要があります。もし同じページ内にid="link1"が2つ以上あると、ブラウザはどちらに飛べばいいのか迷ってしまい、最初の1つ目にしか飛ばないなどの不具合が起きます。

id名は、section1、section2のように、それぞれ異なる名前を付けるように心がけましょう。

id名の先頭に数字を使わない

id名を決めるとき、先頭の文字には少し注意が必要です。実は現在のHTML5の仕様では、id名の先頭に「数字」を使ってもルール違反ではありません。

ただ、例えばid="1st-section"のように数字から始めてしまうと、CSSやJavaScriptで指定する際に特殊な書き方が必要になり、扱いづらくなってしまうんです。

スムーズにアンカーリンクを機能させるためにも、HTMLのid名はid="section-1"のようにアルファベット（英字）で始めるのがおすすめです。余計なトラブルを避けるため、英字から始める習慣をつけておくと安心ですね。

id名にスペースや全角文字を使わない

id名には、半角英数字とハイフン（-）、アンダースコア（_）を使うのが基本です。HTML5の仕様上は日本語も使えますが、予期せぬトラブルを避けるためにも、全角文字は使わないほうが安心でしょう。

特に、スペース（空白）を含めるのはルール違反なので注意してくださいね。

  • NG例：id="my section"（スペースは禁止されています）
  • 非推奨例：id="目次"（日本語は避けたほうが無難です）

スペースが含まれていると、せっかく設定したHTMLのアンカーリンクが正しく機能しない原因になります。id="my-section"のように、単語をつなげたいときはハイフンを使うのが一般的で安全な書き方ですよ。

アンカーリンクがずれる・動かない時の原因と対処法

アンカーリンクがずれる・動かない時の原因と対処法

「設定したはずなのに、思った位置に止まらない…」「クリックしても何も起きない」といったトラブルは、アンカーリンクの実装でよくある悩みです。

特に、画面上部にメニューが固定されているサイトでは「位置ずれ」が頻発します。ここでは、そんなトラブルの原因と、すぐにできる解決策をご紹介します。

リンク先が固定ヘッダーの下に隠れてしまう場合（位置ずれ）

画面の上部にヘッダーメニューを固定（position: fixedなど）しているサイトでは、アンカーリンクでジャンプした際、移動先の見出しがヘッダーの裏に隠れてしまうことがあります。

これは、ブラウザが「画面の最上端」に合わせて移動しようとするのに対し、ヘッダーがその上にかぶさっているために起こります。

せっかく移動したのに見出しが見えないと、読者は「どこに来たの？」と混乱してしまいますよね。この「位置ずれ」はCSSで調整する必要があります。

CSSのpaddingやmarginを使った位置調整のテクニック

位置ずれを直すには、CSSのscroll-padding-topプロパティを使うのが最も簡単でおすすめです。

htmlタグに対して、ヘッダーの高さ分の余白を設定します。

html {
  scroll-padding-top: 100px; /* ヘッダーの高さに合わせる */
}Code language: CSS (css)

これだけで、ページ内リンクで移動した際、上部に100pxのスペースを空けて止まってくれるようになります。全ページに一括で適用できるので、とても便利なテクニックですよ。

リンク元のhref属性に「#」を付け忘れている

リンクをクリックしても全く反応しない場合、まずは基本的な記述ミスを疑ってみましょう。

よくあるのが、リンク元のhref属性に「#（ハッシュ）」を付け忘れているケースです。

  • × href="section1"
  • ○ href="#section1"

「#」がないと、ブラウザは「section1」という名前のファイルを探しにいってしまい、ページ内ジャンプとして機能しません。小さな記号ですが、とても重要な役割を持っています。

スペルミスや閉じタグの記述漏れを確認する

id名のスペルミスも意外と多い原因です。

例えば、ジャンプ先をid="contact"としたのに、リンク元でhref="#contatc"と書いてしまっていませんか？ 一文字でも違うと動きません。

また、<a>タグや<div>タグの閉じ忘れ（</a>や</div>がない）もHTMLの構造を崩し、動作不良の原因になります。コードエディタの検索機能などを使って、出発地点と到着地点の記述が完全に一致しているか確認してみましょう。

ユーザー体験を向上させる「スムーススクロール」の実装

ユーザー体験を向上させる「スムーススクロール」の実装

標準のアンカーリンクは、クリックすると「パッ」と瞬時に画面が切り替わります。これでも機能としては十分ですが、よりユーザーに親切な設計にするなら「スムーススクロール」の導入がおすすめです。

ここでは、JavaScriptを使わずにCSSだけで簡単に実装できる方法をご紹介します。

一瞬でジャンプせず「するっと」スクロールさせるメリット

スムーススクロールとは、ページ内を移動する際に、スルスルっと滑らかにスクロールする動きのことです。

瞬時に画面が切り替わると、読者は「今、ページのどのあたりに移動したんだろう？」と位置関係を見失ってしまうことがあります。

滑らかに移動することで、「下の方にスクロールしたんだな」と感覚的に理解でき、サイト全体の操作感もリッチで心地よいものになります。ユーザー体験（UX）を向上させるための、ちょっとした気遣いと言えますね。

CSS（scroll-behavior）だけで簡単に実装する方法

以前はjQueryなどのプログラムが必要でしたが、現在はCSSを1行追加するだけで実装できます。

htmlタグに対して、scroll-behavior: smooth;を指定するだけです。

html {
  scroll-behavior: smooth;
}Code language: CSS (css)

たったこれだけで、サイト内のすべてのアンカーリンクが滑らかな動きに変わります。簡単すぎて驚かれるかもしれませんが、最新のブラウザではこれで十分対応可能です。ぜひ試してみてください。

アンカーリンクの設置がSEOに与えるメリット

アンカーリンクの設置がSEOに与えるメリット

アンカーリンクを適切に設置することは、読者にとって便利であるだけでなく、SEO（検索エンジン最適化）の観点からも良い効果が期待できます。

Googleなどの検索エンジンは「ユーザーにとって使いやすいサイト」を高く評価します。アンカーリンクがどのようにSEOに貢献するのか、そのメリットを知っておきましょう。

ユーザーの利便性（UX）向上と離脱率の改善

長い記事の場合、読者が求めている情報になかなか辿り着けないと、すぐに「戻る」ボタンを押して離脱してしまうことがあります。

しかし、冒頭に目次（アンカーリンク）があれば、読者は知りたい情報へすぐにアクセスできます。「この記事は便利だ」と感じてもらえれば、滞在時間が延びたり、他のページも読んでくれたりと、サイトの評価につながる行動が増えるでしょう。

ユーザー満足度を高めることは、結果としてSEOの評価アップにも繋がっていくのです。

検索結果画面にページ内リンクが表示される可能性

適切に設定されたアンカーリンクは、Googleの検索結果画面（SERPs）に「スニペット」として表示されることがあります。

検索結果の説明文の下に、記事内の見出しへのリンクが並んで表示されているのを見たことはありませんか？ あれが表示されると、検索画面での占有面積が広がり、クリック率が大幅に向上する可能性があります。

Googleがページの内容を正しく理解し、構造化されていると判断した場合に表示されやすくなるため、適切なid設定と見出し構成はとても大切です。

まとめ

まとめ

今回は、HTMLを使ったアンカーリンク（ページ内リンク）の設定方法について解説しました。

アンカーリンクは、読者を目的の情報へスムーズに案内するための「道しるべ」です。
基本は「ジャンプ先にidを付ける」「リンク元に#idを書く」という2つのステップだけ。これさえ覚えておけば、目次の作成やトップへ戻るボタンの実装など、さまざまな場面で活用できます。

また、固定ヘッダーによる位置ずれの調整や、スムーススクロールによる演出を加えることで、さらに使いやすいWebサイトになります。

まずは簡単なテキストリンクから試してみて、徐々に応用テクニックを取り入れてみてくださいね。読者にとって快適なページ作りを応援しています！

アンカーリンク htmlについてよくある質問

アンカーリンク htmlについてよくある質問

アンカーリンクを設定する際によくある疑問をまとめました。実装時の参考にしてください。

  • Q. アンカーリンクがどうしても動きません。何を確認すべきですか？
    • A. まずはスペルミスがないか確認しましょう。特にリンク元の「#」の付け忘れや、id名の大文字・小文字の違い（例：#Section1とid="section1"は別物）がよくある原因です。また、id名がページ内で重複していないかもチェックしてください。
  • Q. 別のページの途中へリンクする場合、新しいタブで開くことはできますか？
    • A. はい、可能です。<a>タグにtarget="_blank"属性を追加してください。例：<a href="page.html#target" target="_blank">と記述すれば、新しいタブで指定の位置が開きます。
  • Q. id名は日本語でも大丈夫ですか？
    • A. 動作する場合もありますが、推奨されません。古いブラウザや一部の環境で文字化けして動かなくなるリスクがあります。基本的には半角英数字とハイフン（-）を使用することをおすすめします。
  • Q. スムーススクロールが効かないブラウザはありますか？
    • A. scroll-behavior: smooth;は、Safariの古いバージョンなど一部の環境では対応していない場合があります。ただ、その場合でも通常の「瞬時にジャンプ」する動作になるだけで、リンク自体が壊れることはないので安心してください。
  • Q. 1つの要素に複数のidを付けることはできますか？
    • A. いいえ、できません。1つのHTMLタグに設定できるidは1つだけです。もし複数の目印が必要な場合は、親要素（外側のdivタグなど）に別のidを設定するなどの工夫が必要です。