開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

アンカー要素(aタグ)を使ってページ内リンクする方法

最終更新:2017-05-21 by Joe

HTMLのアンカー要素でページ内リンクしたい時、正しい方法をたまに忘れるのでメモします。リンク先がずれてしまう問題も、指針を書いておきました。

リンク先の指定方法

リンク先はidを使って指定します。

// ページ内のリンク先の指定はIDを利用
<h1 id="link-to-me">わたしにジャンプして</h1>

下記も現状(2017年5月)時点で、多くのブラウザで動作はしますが、

// いちおう有効だが・・
<h1><a name="link-to-me">わたしにジャンプして</a></h1>

HTML5移行は、アンカー要素のname属性は廃止予定です。idへのリンクが有効ですので、a要素のname属性を利用する必要は全くありません。避けるべきでしょう。

HTML 5.2 Editor’s Draft, 3 May 2017:

ひとつの注意は、HTMLのIDは「ページ内で唯一無二でなければならない」です。誤って2つ記述してしまっても、ページの閲覧は問題ありませんが、ページ内リンクは期待通り動作しなくなるかもしれません。(上記のHTML仕様に基づくと「先に検出されたほう」が勝ちます)

蛇足ですが、CSSにおいても、IDの重複など名前の管理はしばしば問題になります。CSSのにおいては、IDではなく、すべてClass名で要素をセレクトするのが一般的です。

アンカー要素(aタグ)の書き方

クリックされる側は至ってシンプルです。「#」を忘れないようにして下さい。

// ジャンプ先のIDを#とともに指定
<a href="#link-to-me">あなたにジャンプ</a>

ページ内リンクがずれてしまう?問題

あなたのページのレイアウトによっては、ページ内リンクが少しずれてしまうかもしれません。原因は多くの場合、CSSです。

一概には言えませんが、代表的な例が、marginとpaddingに依るものです。普通は透明な場合がおおいですが、わかりやすさのために色を付けると・・

この先頭にジャンプします。

これを解決するのはレイアウトに影響してしまうためすこし厄介ですが、いくつか迂回策があります。

例としては、「ページリンク専用の要素を追加する」です。

下記は、H1内にリンク用の要素を追加、かつ、absoluteで座標を指定することで、オフセット(どっちにどのくらいずらすか)を指定できます。要素自体の大きさはゼロですので、レイアウトに影響しません。いちおうvisibility:hiddenで視覚的にも表示されないようにしています。

// リンク用に新しいDIVを追加

<h1>
  <span id="link-to-me" class="in-page-anchor"></span>わたしにジャンプして
</h1>


// CSS. top の値で、オフセットを設定できます。
<style>
h1{
 position:relative;
}
h1 .in-page-anchor{
 position:absolute;
 visibility:hidden;
 top:0;
}
</style>

セマンティック(文書の意味的な)な観点で、「意味のない要素を追加する」のはすこし気が引けますし、HTMLも汚れる、要はハックなのであまりおすすめはしませんが、どうしても手早く直したい時は使えると思います。

ページ内リンクにおすすめのjavascriptプラグイン

基本的にはページ内リンク機能の実現は、こちらのプラグインをおすすめします。

https://github.com/cferdinandi/smooth-scroll

そんなに難しくないので、javascirptはちょっと・・、という方も、おすすめします。上記のずれる問題も、簡単に解決できますし、ぬるっとスムーズにスクロールしてくれるので、いい感じです。

 

 

閉じる