記事内に商品プロモーションが含まれる場合があります
今回はHTMLでページ内でジャンプするリンクの作り方を解説します。「テキストや画像をクリックすると、ページ内の自分の好きな位置にジャンプできる」というものですね。覚えておくと目次やスキップボタンを作るのにとても便利です。以下の目次も今回紹介する方法で作られています。
1. ページ内リンクの書き方
ざっくりとしたイメージ
はじめにどのような仕組みでページ内リンクができるのかざっくりと説明しておきます。
まず「ここにジャンプしたい！」というタグにidを指定します。次に<a href="#id名">の形でリンクを作ります。
これだけでジャンプボタンの完成です。リンクをクリックすれば、指定したidのタグの位置までジャンプします。id="〜"を指定してジャンプ先にするのはどのタグでも問題ありません。見出しタグでもpタグでもdivタグでもOKです。
といってもなかなか分かりづらいかと思うので、以下で詳しく解説していきます。
手順1. 飛びたい位置のタグにidを指定する
ここに飛びたい！というタグにid名をつけます（すでにid名が指定されている場合は、追加したり書き換えたりする必要はありません）。例えば、あるh2見出しにジャンプしたければ、以下のように書きます。
<h2 id="example">これは見出しです。</h2>
ここではid名をexampleとしましたが、自分の好きな名前で構いません。
手順2. ジャンプボタンを作る
ジャンプボタンは通常のリンクと同じようにaタグで作りますが、URLのかわりにhref=”#ジャンプ先のid名”というように書きます。#をつけるのがポイントです。たとえば「ここをクリック！」という名前のジャンプボタンを作りたければ以下のように書きます。
<a href="#example">ここをクリック！</a>
これでジャンプボタンの完成です。実際にこのページに貼って試してみることにします↓。
2. 違うページの途中に飛ぶ方法
違うページの途中にジャンプしたいときは、次のように指定します。
手順1. 飛びたいページの飛びたいタグにidを指定
ここはさきほどと同じです。ジャンプしたい位置にあるタグにid名をつけます。
手順2. “ページのURL#id名”をリンク先としたaタグを作る
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>
これで新しいタブでページが開き、さらに指定位置までスキップしてくれます。
3. ジャンプボタンのデザインを変えたいときは？
通常のリンクタグと全く同じようにデザインを指定すればOKです。こちらの記事でリンクタグのデザインを変える方法を紹介しています。オシャレなスキップボタンを作りたい方は、ぜひ目を通してみてください。
