HTMLだけで同一ページ内の特定の場所にジャンプする方法

リンクが埋め込まれた見出しなどをクリックした時に、その見出しの場所までジャンプするようなサイトを見たことはありませんか。

今回はそのような同一ページ内の特定の場所にジャンプする方法を詳しく解説していきます。

Contents

結論：HTMLのid属性を使ってサイトの特定の場所にジャンプする

同一ページ内の特定の場所にジャンプするにはHTMLのid属性を使う必要があります。

サイトを制作する上ではCSSやJavaScriptといった言語を使用するときもありますが、今回のような仕様にはHTMLだけで完結させることが出来ます。

それではHTMLだけを使って同一ページ内の特定の場所にジャンプする詳しい方法を解説していきます。

今回、使うことになるid名ですが、同じid名は1ページに1つしか指定できないという特徴があります。

そのような特徴のあるid属性を使うことによって、HTMLだけを使って特定の場所にジャンプすることができる仕様を作ることが出来ます。

今回、必要な知識はこの程度ですが、id属性についてもっと詳しく知りたいという方はclass属性、id属性の違いって？それぞれの使い方を簡単解説で詳しく解説していますので、参考にしてみてください。

id属性をもっと詳しく知りたい方はこちら

id属性に関しての解説が終わったところで具体的なHTMLだけで特定の場所にジャンプするコードを紹介していきます。

まずはリンクが埋め込まれたテキストを作っていきます。

下記のコードを見てください。

<header>
<div>
  <p><a href=#link1>LINK1</a></p>
</div>
</header>

headerタグで囲んだdivタグの中にpタグで作ったテキストにaタグでリンクを埋め込みました。

aタグではどのようなリンクを埋め込むかを決められるhref属性を指定できます。

このhref属性では一般的には埋め込みたいサイトのURLやファイル名を入れますが、今回はその部分にid名である『#link1』を入れました。

このように記述することでテキストである『LINK1』をクリックした時にid名『link1』の場所へとジャンプすることが出来ます。

それではここからはid名が『link1』であるリンク先の記述について解説していきます。

1ではリンクが埋め込まれたテキストを作ることが出来ました。次にそのテキストをクリックした時にジャンする場所を作っていきます。

下記のコードを見てください。

<header>
<div>
  <p><a href=#link1>LINK1</a></p>
</div>
</header>
<main>
  <h2 id="link1">MAIN1</h2>
</main>

mainタグでid名『link1』を指定したh2タグを囲みました。

このように先述したaタグのhref属性に指定されているid名のタグを用意すると、そこにジャンプさせることが出来るようになります。

今回で言うと、テキストである『LINK1』をクリックした場合、h2タグに囲まれているテキストである『MAIN1』までジャンプすることが出来ます。

仮に『LINK1』をクリックする時に『MAIN1』が画面になく、スクロールをしなければ映らない位置にあった時にはクリック一つで、スクロールをして『MAIN1』の部分までジャンプします。

今回はHTMLだけで特定の場所にジャンプする方法について解説してきました。id属性を使う方法ですが、そんなに難しくなく、取り組むことが可能になっています。

しかし、この仕様自体は良く使われるものではあるので、ここで使い方をマスターし、いざ使う時にスムーズに特定の場所にジャンプするコードを記述しましょう。