HTMLのページ内リンク【現役エンジニアが解説】

PROGRAM

今回は、HTMLのページ内リンクについて、リンク前の準備とリンクの作り方に分け、簡単に解説していきます。

リンク前の準備

ページ内リンクでは、まずジャンプ先のタグにidを設定します。

ジャンプ先は、通常であれば、h2タグのような見出しのタグとなることが多いです。

<h2 id="hoge">ほげ</h2>

上記のコードでは、ほげと書かれたh2タグに、ページ内リンク用にhogeというidを設定しています。

リンクの作り方

ページ内リンクでは、aタグのhref属性に”#ジャンプ先のタグのid”を設定します。

また、name属性に”ジャンプ先のタグのid”のみを指定してもリンクを作ることができます。

<a href="#hoge">ほげに飛ぶ</a>

上記のコードでは、先程のhogeというidを持つh2タグにジャンプできる”ほげに飛ぶ”ボタンを表示しています。

外からのリンク

ページ内リンクで設定したタグの位置に外部ページからジャンプすることも可能です。

外部ページからタグの位置にジャンプするには、URLの末尾に”#ジャンプ先のタグのid”を追記します。

<a href="https://example.com/hoge#hoge">ほげに飛ぶ</a>

上記のコードでは、先程のhogeというidを持つh2タグに外部ページからジャンプできる”ほげに飛ぶ”ボタンを表示しています。