【HTML】ページ内リンクの作り方：記事の途中に飛ばすには？

記事内に商品プロモーションが含まれる場合があります

今回はHTMLでページ内でジャンプするリンクの作り方を解説します。「テキストや画像をクリックすると、ページ内の自分の好きな位置にジャンプできる」というものですね。覚えておくと目次やスキップボタンを作るのにとても便利です。以下の目次も今回紹介する方法で作られています。

1. ページ内リンクの書き方

はじめにどのような仕組みでページ内リンクができるのかざっくりと説明しておきます。

まず「ここにジャンプしたい！」というタグにidを指定します。次に<a href="#id名">の形でリンクを作ります。

これだけでジャンプボタンの完成です。リンクをクリックすれば、指定したidのタグの位置までジャンプします。id="〜"を指定してジャンプ先にするのはどのタグでも問題ありません。見出しタグでもpタグでもdivタグでもOKです。

ここに飛びたい！というタグにid名をつけます（すでにid名が指定されている場合は、追加したり書き換えたりする必要はありません）。例えば、あるh2見出しにジャンプしたければ、以下のように書きます。

<h2 id="example">これは見出しです。</h2>

ここではid名をexampleとしましたが、自分の好きな名前で構いません。

ジャンプボタンは通常のリンクと同じようにaタグで作りますが、URLのかわりにhref="#ジャンプ先のid名"というように書きます。#をつけるのがポイントです。たとえば「ここをクリック！」という名前のジャンプボタンを作りたければ以下のように書きます。

<a href="#example">ここをクリック！</a>

これでジャンプボタンの完成です。実際にこのページに貼って試してみることにします。

これは見出しです。

問題なく飛ぶことができました。

違うページの途中にジャンプしたいときは、次のように指定します。

ここはさきほどと同じです。ジャンプしたい位置にあるタグにid名をつけます。

a href="〜"の中を「飛びたいページのURL#id名」とします。<a href="https://saruwakakun.com#example">というような感じですね。

<a href="https://saruwakakun.com#example">ここをクリック！</a>

これで指定したURLのページ内に飛び、さらに#のついたidのタグの位置までジャンプしてくれます。

新しいタブを開いたうえでページの途中にジャンプしたければ、aタグにtarget="_blank"を追加します。

<a href="https://saruwakakun.com#example" target="_blank">ここをクリック！</a>

これで新しいタブでページが開き、さらに指定位置までスキップしてくれます。

通常のリンクタグと全く同じようにデザインを指定すればOKです。以下の記事でリンクタグのデザインを変える方法を紹介しています。オシャレなスキップボタンを作りたい方は、ぜひ目を通してみてください。

この記事も参考になるかもしれません。