ページ内リンクを設定するには

  • このエントリーをはてなブックマークに追加

アンカーリンクとは

a要素を使って、ホームページリンクを設定する場合、リンクをクリックした後は移動先ページの先頭が表示されますよね。
でも時々、リンクをクリックするとページの途中へ移動したり、ページの途中から表示される事はありませんか?

それがアンカーリンクです。
同じページ、または別のページへ特定の位置に移動させる際に使われる位置マーカーのことを言います。
指定した位置(アンカー)へリンクさせる事ができるので、縦に長くなったページに効果を発揮します。

スマートフォンの普及に伴い、スマートフォンの画面に最適化されたWebサイトや、様々なデバイスに対応させるためにレスポンシブWebデザインを採用しているホームページが増えてきました。
スマートフォンの画面幅に最適化させて表示させようとしたら、Webページは縦に長くなりますよね?
「見てもらいたい情報を詰め込んだWebページ!でもたくさんスクロールしてもらわないと、全部見きれない・・・」なんてことありませんか?
そんな時に、見せたい情報の位置へ移動できるリンクボタンがあったら、便利にストレスなくページを見てもらう事ができます。

アンカーリンクを設置するには

アンカーリンクを設定するには、「a要素を使ったリンク」と、「idを使って移動させたい位置へ名前を付ける」の二つが必要です。

それでは実際に書いてみましょう。
コードはこんな感じです。

<h1>新潟県市町村データ</h1>
<a href=”#link1“>新潟県</a>
<a href=”#link2“>新潟市</a>
<a href=”#link3“>長岡市</a>

<div id=”link1″>
<h2>新潟県</h2>
<strong&ht;新潟県は、日本の県の一つで、中部地方の日本海側に位置する。県庁所在地は新潟市。</strong><br>
面積: 12,580 km²<br>
人口: 236.5万 (2012年3月31日)<br>
</div>

<div id=”link2″>
<h2>新潟市</h2>
<strong&ht;新潟県の北東部(下越地方)に位置する市で、同県の県庁所在地。本州の日本海側で人口が最大の都市であり、政令指定都市である。</strong><br>
面積: 726.4 km²<br>
人口: 81.19万 (2010年)<br>
</div>

<div id=”link3″>
<h2>長岡市</h2>
<strong&ht;新潟県の中部に位置する市である。新潟県下第2位の人口を擁する市で、国から特例市に指定されている</strong><br>
面積: 890.9 km²<br>
人口: 28.27万 (2010年) <br>
</div>

上記のコードで「新潟県」のリンクをクリックすると、「id=”link1″と付けてある位置」へ、「新潟市」のリンクをクリックすると、「id=”link2″と付けてある位置」へ、「長岡市」のリンクをクリックすると、「id=”link3″と付けてある位置」へと、それぞれの位置へ移動するようになります。

リンクの貼り方は、CSSを書くときのid名の指定と同じ書き方で、シャープ(#)から始めます。
id名については、前回(第17回:class名とid名を付けてデザインをする)紹介したように、1ページ内に同じ名称を重複して使われませんので、思った位置へ移動させるのに使えます。
もしも重複して使ってしまっているid名の位置へリンクさせようとすると、思ったように移動してくれないので注意が必要です。

別のページへアンカーリンクさせるには

先ほどの例では同一ページ内でのアンカーリンクの設置例でしたが、他のページへのアンカーリンクさせる場合、a要素のリンク指定を「href=”page.html#link1″」と書いてあげれば任意のWebページへアンカーリンクを設置することができます。
リンクさせるページファイルを指定して、シャープ(#)、移動する位置を指定してあげればOKです。

自分が管理していないページの場合、思った位置にアンカーリンクさせることができない

説明したように、移動先の要素にidを使って名前をつける必要があります。
もしも自分の管理していないホームページへアンカーリンクを付けたいと思っても、そのページを編集できなければ、移動先の位置を指定できないので、アンカーリンクをつける事が難しい場合もあります。
どのWebページでも、アンカーリンクの移動位置を指定できるわけではないので、その点には注意してください。

まとめ

・ページの途中へ移動するリンクをアンカーリンクと呼ぶ
・縦に長いページに使うと便利
・移動させたい要素にid名を使って名前をつける
・リンクに移動させたい要素につけたid名をつける
・idを使って任意の位置へ命名する都合上、管理していないホームページへアンカーリンクことができない場合もある

  • このエントリーをはてなブックマークに追加

新潟県内地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301