【HTML】ページ内で特定の場所にジャンプする方法

同じページ内の特定の場所にジャンプする事をアンカーリンクと言います。

ページ内に表示する情報が多い場合に、目印(アンカー)を作って、見たい情報にすぐにジャンプして移動する事が出来ます。

例:ターゲットにジャンプ

このサイトでも目次を使用したページに使用しています。

 

まず、飛ばしたい特定の場所(ジャンプ先)に目印(アンカー)を作成します。
以下のように、タグにID属性をつけ任意の名前を付けます。ここでは”target”としています。

<div id="target">ターゲット</div>

次に、ジャンプさせるアンカータグを作成します。

<a>タグを使用しhref属性のURL部分に、先ほど書いたジャンプ先の目印(アンカー)の先頭に#をつけます。

<a href="#target">ターゲットにジャンプ</a>

※ジャンプ先の目印(アンカー)重複してはいけません。複数目印があると、ドの目印にジャンプすればよいかわからなくなります。

これで完成です。

例:ターゲット

<

タイトルとURLをコピーしました