【HTML】ページ内リンクを導入しよう

目次

ページ内リンクとは

ページ内リンクとは、クリックするとページ内の別の場所に飛んでくれるリンクのことを指します。例えば、下の画像のように、目次のリンクをクリックすると、対応したコンテンツがある部分まで飛んでくれたのが分かります。


ページ内リンクの作り方

作り方はいたって簡単で、飛び先のコンテンツにidを付け、aタグのhref属性の値にそのidを入れるだけでOKです。idの前にはシャープ(#)を付けるようにしましょう。


別ページの途中に飛ぶ

同じページではなくて、別のページの途中にジャンプさせたい場合は、aタグのhref属性の値を「(ジャンプ先のサイトのURL)#(id名)」とします。前の例と違うのは、#の前にサイトのURLをくっつけただけですね。


ページ内リンクをスクロールさせる

ページ内リンクをスクロールさせるにはjQueryが必要なので、詳しくはこちらの記事で解説しています。

【jQuery】ページ内リンクをスムースにスクロールさせる方法