【HTML】アンカー要素とid属性でページ内リンクを実装する方法

リンクテキストや画像をクリックしたときに同じページ内のある場所までスクロールしてほしい！という時にはページ内リンクを使うことになるでしょう。

今回はアンカー要素<a>タグとid属性を活用して簡単にページ内リンクを実装する方法について説明します。

ページ内リンクの実装方法

では実際にページ内リンクを作ってみましょう。

サンプルコード

ページ内リンクのサンプルコードはこちら。

<a href="#anker">このリンクをクリックすると...</a>

...

<div id="anker">
  ここまでスクロールダウンするよ
</div>

id値は任意で変更可能

先程のサンプルコードではankerというid値を使いましたが、これは任意で好きな文字に設定することが出来ます。

<!-- id値は自分で決めて良い -->
<div id="hogehoge">
  ここまでスクロールアップするよ
</div>

<!-- id値に合わせてhrefのパスも書き換える -->
<a href="#hogehoge">このリンクをクリックすると...</a>

なぜid属性を使うのか？

ページ内リンクの行き先の指定にはid属性以外を用いることは出来ません。

id属性はページ内リンクに限らずHTMLのルールにおいて「ページ内で唯一の要素（ユニーク、一意いちいとも言う）」を識別するための役割を持っています。

ページ内リンクの行き先は明確に「どこに行くか？」を指定しないと正確に動作しないため、id属性がその特性を活かして利用されています。

HTML5以前はname属性がidの代わりを果たしていた

HTML5以前のバージョンのHTMLではページ内リンクの行き先を指定する属性にid属性ではなくname属性を使う仕様になっていました。

<a href="#anker">このリンクをクリックすると...</a>

...

<!-- かつてはname属性が使われていた（現在は非推奨） -->
<div name="anker">
  ここまでスクロールダウンするよ
</div>

今となっては過去の話しなので、現在進行系でHTMLを学習している方は流し見る程度でOKです♪

豆知識

ページ内リンクをクリックした後はURLにフラグメントが付与される

ページ内リンクをクリックするとURLにはフラグメントが付与されます。

このフラグメントによりブラウザは注目する要素を判断でき、スクロールして画面内に収まるようにスクロールしています。

なお、フラグメントが追加されたURLであればページ遷移とページ内リンクを同時に実行可能です。

複数のページ内リンクを作りたい

ページ内リンクを複数作りたい場合には、その分の<a>とid属性を持つ要素を用意する必要があります。

<a href="#part01">ジョジョの奇妙な冒険</a>
<a href="#part02">ジョジョの奇妙な冒険</a>
<a href="#part03">ジョジョの奇妙な冒険</a>
<a href="#part04">ジョジョの奇妙な冒険</a>
<a href="#part05">ジョジョの奇妙な冒険</a>
<a href="#part06">ジョジョの奇妙な冒険</a>

...

<p id="part01">ファントムブラッド</p>
<p id="part02">戦闘潮流</p>
<p id="part03">スターダストクルセイダース</p>
<p id="part04">ダイヤモンドは砕けない</p>
<p id="part05">黄金の風</p>
<p id="part06">ストーンオーシャン</p>

ページ内リンクがうまく動かないときは…

ページ内リンクが正しく動作しないときに考えられる原因には下記があります。

• id値とhref属性の文字列が一致していない
• 同じid値を持つ要素が2つ以上存在している
• aタグのhref属性に#記号を入れ忘れている

「ページ内リンクを作ったのにうまく動いてくれないなー」という時は、一度チェックしてみましょう！

おまけ

ページ内リンクは様々なシーンで活用されます。

例えばこの記事内の各見出しには固有のid値が割り振ってあり、右サイドバーに表示される目次はid値に対応したhref属性が付与されています。

それにより目次をクリックすることで該当する見出まで自動でスクロールすることが出来ます。

このようにページ内リンクはユーザビリティを向上するシーンで特によく使われるのでぜひ覚えてみてください！