アンカーリンクとは？
Webサイトのページ間をリンクさせるアンカータグ（aタグ）ですが、同じページ内の特定の位置へリンクすることも可能です。
同ページ内へのリンクを「アンカーリンク（ページ内リンクとも言います。）」と言います。例えば、以下のようになります。
ここをクリックしてください。
同じページ内でリンクを貼ることができましたね。
最もよく使われるのは、webサイトの一番下から「トップへ戻る」際ではないでしょうか？
特にスマートフォンでは、幅が狭い為どうしても縦長のサイトになってしまいます。
一番下までコンテンツを読んで、一番上までもう一度スクロールしなければならないのは、ユーザーにとって非常に不便です。
アンカーリンクの使い方
では、使い方を見ていきましょう。
まずは、リンク先の設定です。以下のようになります。
<div id="anchor">リンク先</div>飛ばしたい場所の要素に対して、「id」を任意の名前で付与します。
次に、リンク元の設定です。ここでのリンク元とは、クリックやタップするボタンなどの要素のことです。
<a href="#anchor">リンク元</a><a></a>でリンクを設定する文字列や画像を囲います。
ここまでは、通常のアンカータグの使い方と同じです。
そして、href属性には先ほど設定したリンク先の「id名」を記述し、その前に「#（ハッシュ）」をつけます。
これで、完成です。
アンカーリンクを使う際の注意点
アンカーリンクを使用する際に、いくつか注意する必要があります。
id名の重複に注意する
リンク先に使用するのは、「id」ですから、当然ながら重複をしてはいけません。複数のアンカーリンクを設定する際は注意が必要です。
ユーザビリティに注意する
本来、ユーザビリティを上げるためのものですが、アンカーリンクであることをしっかりと示さずに使用すると、ユーザーを混乱させてしまう場合があります。
しっかりとボタンや背景色など、わかりやすい見た目にしなければいけません。
position:fixed;を使用すると「ずれる」
ヘッダーなどをposition:fixedで、固定にしているサイトも多いかと思います。
しかし、その場合アンカーリンクのリンク先が固定要素の背景に隠れてしまって見えなくなってしまいます。
これでは、意味がありませんので対策が必要となります。
方法はいくつかありますが、最も簡単な方法で行いたいと思います。
使用例：CSS
#anchor{
padding-top:100px;
margin-top:-100px;
}リンク先の要素に対して、固定された要素の高さ分（上記の場合100px）のpadding-topを適用します。これで、固定要素の高さ分、リンク先の要素は下にずれることができました。
しかし、これでは元々のレイアウトが崩れてしまいます。ですからmargin-top:-100px;で、要素を元の位置にしていますのでレイアウトも崩れません。
結局同じ位置なのになぜずれが解消されたのか？
paddingを追加して、marginで同じ分マイナスしただけで、元々の位置と結局変わってないのになぜ、ずれは解消されたのかと感じた方もいるかもしれませんね。
これは、paddingとmarginの特性を利用しているためです。
CSSでmarginとpaddingを使用して余白を設定しようでも説明した通り、paddingはborderの内側に余白を作ります。
つまりこの場合、以下のようになっています。
このため、元の位置は変わっていないのにリンク先のずれが解消された理由です。
他にも、javascriptで修正することもできますが、それはまた別の機会にしたいと思います。
●目的の位置
理解するポイントまとめ
- アンカーリンクを使用すれば、同ページ内へリンクすることができる。
- リンク元のhref属性には「#id名」、リンク先の要素には「id」を指定する。
- position:fixed;を使用している際は、特に注意が必要。