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

アンカーリンクとは

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

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

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

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

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

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

上記のコードで「新潟県」のリンクをクリックすると、「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を使って任意の位置へ命名する都合上、管理していないホームページへアンカーリンクことができない場合もある