HTMLのページ内リンク【現役エンジニアが解説】
今回は、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タグに外部ページからジャンプできる”ほげに飛ぶ”ボタンを表示しています。