HTMLページ内のリンクから自分で指定する特定の場所までジャンプできるようにしたいので指定方法を勉強してみました。
「ページ内で特定の場所にジャンプ」
「ページ内から別のページの特定の場所にジャンプ」
2つの指定方法を勉強するために、HTMLでページ内の特定の場所にジャンプする記述を実際に試しながら記事にしたので指定する流れも同時に参考にできるかと思います。
HTMLページ内で特定の場所にジャンプするには
HTMLページ内で特定の場所にジャンプするには、ページ内でジャンプする「出発点」と「到着点」にidを指定します。
「出発点」と「到達点」の間でジャンプする例としては、以下の画像のように、ヘッダーメニューのリンクをクリックしたら、メニュー下の各セクションの見出しを特定の場所としてジャンプするというイメージです。
HTMLページ内のヘッダーメニューを特定の場所までジャンプする出発点にした場合、ヘッダーメニューのリンクにidを指定します。
そして特定の場所にジャンプする到達点をHTMLページ内の各セクションの見出しにした場合、メニューのリンクで指定したidと同じidを見出しのhタグに指定することで、特定の場所にジャンプする指定ができます。
- HTMLで出発点のリンクの指定方法
- 到達点にするidの指定方法
上記2つの指定方法を理解することで、HTMLでページ内の特定の場所にジャンプすることができます。
ページ内リンクで出発点を指定
HTMLページ内の特定の場所までジャンプする「出発点」にはページ内リンクを指定することで、クリックしたら特定の場所までジャンプできる出発点にできます。
<a href="#jump">出発点</a>
ページ内リンクはHTMLのaタグで<a href=”#jump”>のようにhref属性の値に#シャープを記述してid名を指定します。
指定するid名は同じHTMLページで使うid名と同じになることがないようなid名にします。
<ul>
<li><a href="#first">scroll_one</a></li>
<li><a href="#second">scroll_two</a></li>
<li><a href="#third">scroll_three</a></li>
</ul>
HTMLページ内のヘッダーメニューのリストが3つあって、各セクションの見出しを特定の場所にしてジャンプさせたい場合も、３つのリストのページ内リンクのidをそれぞれ異なるid名で指定します。
HTMLページ内の特定の場所までジャンプする「出発点」のページ内リンク指定はこれで完了。
特定の場所にする要素にidを指定
HTMLページ内で出発点にしたページ内リンクをクリックしたら、ジャンプして特定の場所まで移動できるように到達点にする要素にid名を指定します。
<h2 id="jump">到達点</h2>
h2の見出しを特定のジャンプ先にしてます。ジャンプ先の特定の場所にidを指定する場合は、「id=”出発点と同じid名”」とidの値に出発点で指定したのと同じid名を指定します。これにより出発点と到達点が繋がります。
出発点側
<ul>
<li><a href="#first">scroll_one</a></li>
<li><a href="#second">scroll_two</a></li>
<li><a href="#third">scroll_three</a></li>
</ul>
到達点側
<section>
<h2 id="first">scroll_one</h2>
</section>
<section>
<h2 id="second">scroll_two</h2>
</section>
<section>
<h2 id="third">scroll_three</h2>
</section>
出発点のメニューリストにページ内リンクを指定するaタグが3つあるとしても、aタグに指定するidをジャンプ先にする各セクションのhタグに、メニューリストのaタグで指定した各id名を振り分けて指定します。
HTMLページ内の特定の場所までジャンプする「到達点」の指定はこれで完了。
特定の場所にジャンプするか確認
HTMLでページ内の特定の場所へとジャンプするように指定できたら、実際に指定した通りの特定場所へとジャンプすることができるかページをブラウザで開いて確認します。
特定の場所までジャンプする動きだけ確認できればいいや。って場合は以下の「ジャンプで次の見出しへ」をクリックすると次の見出しまでジャンプする動きが確認ができます。
別のページの特定の場所にジャンプするには
HTMLでページ内の特定の場所にジャンプするために指定したaタグにURLも指定すると、ページ内に記述したリンクの出発点から「別のページの特定の場所にジャンプ」することがでます。
たとえばコンテンツの中で別のページのトップではなく小見出しに直接ジャンプしてコンテンツを見てもらいたい。ということが、別のページの特定の場所にジャンプする指定方法を使うと可能になります。
別のページにはURLとidでジャンプする
別のページの特定の場所へジャンプするには、出発点にHTMLのaタグhref属性の値に、特定の場所があるページのURLを指定します。
<a href="jump.html#high_jump">jump.htmlの特定の場所にジャンプ</a>
そして指定したURLに続けて#とid名を指定します。
上記のように指定したaタグのリンクは、クリックして別のページの特定の場所へジャンプする出発点になるリンクなので、出発側のHTMLページ内に記述します。
ジャンプ先の到達点側には、別ページ内の特定の場所にする要素に出発点のリンクで指定したid名を指定します。
<h2 id="high_jump">別のページの特定の場所</h2>
指定したリンクの仕組みとしては、別のページとしてどのページに飛ぶのかURLを指定してページ認識してもらう。
そして認識したURLのページの中の特定の場所にジャンプする必要があるので、特定の場所として認識するために出発点のリンクと特定の場所を同じidで結びつけるという仕組みです。
別のページの特定の場所へジャンプする指定方法はこれで完了です。
特定の場所に別タブでジャンプする場合
出発点のリンクをクリックしたら別のページの特定の場所を別タブでジャンプして開くこともできます。
<a href="jump.html" target="_blank">別のページの特定場所</a>
出発点にするaタグのhref属性の値の後ろに半角スペースを開けてtarget=”_blank”を記述します。
そうするとtarget=”_blank”も指定した別のページの特定の場所へジャンプするリンクは、クリックすると別タブで別ページが開き特定の指定する場所へジャンプすることができます。
記事の途中で別ページの特定の場所のコンテンツを利用して補足説明するパターンのときには、元ページを残したまま別タブでページトップからスクロールする手間なく特定の場所が表示するので役立つ指定方法です。
まとめ
HTMLでページ内の特定の場所にジャンプする指定方法は、コーディングの基本的な部分かもしれませんが、覚えておくといざ必要な時に悩む必要がなくなるかと思います。
1ページだけのHTMLページ(LP)でよく使用されるjQueryを使ってヘッダーメニューから見出しへとスクロールするときにも、HTMLでページ内の特定の場所にジャンプする指定方法は使われると思います。
必要な場面になったときは今回の記事を思い出すことで、ページ作成の役に立てればと思い書いた今回の投稿でした。
