開発ブログ
Git、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。。

HTML:アンカー(aタグ)でページ内リンクを作成する方法

最終更新:2018-03-14 by Joe

HTMLのaタグを使ってアンカー要素でページ内リンクしたい時、正しい方法をたまに忘れるのでメモします。クリック後のスクロールがずれてしまう問題も、解決指針を付け加えました。

HTMLでのページ内リンクの設定方法

1ページ内リンク先にidを設定する

ページ内リンクは、要素の「id属性」を使って設定します。

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

idの名前は、下記の点に注意します:

  1. ページ内でユニーク(唯一無二)な名前をアルファベットで付ける
  2. 数字で書き始めてはいけない(例えば、「id=”1″」 などは不可)
  3. 大文字・小文字を区別する

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

蛇足ですが、CSSで要素を参照するときにおいても、IDの重複など名前の管理はしばしば問題になります。CSSの場合は、IDではなく、強い理由がない限りは、必ずClass名で要素をセレクトするのが一般的ですし、安全です。

2リンク元のアンカー要素(aタグ)のhrefを指定する

クリックされるアンカー側は、至ってシンプルです。

// ジャンプ先のIDを#とともに指定
<a href="#link-to-me">ページ内リンクにジャンプします。</a>

ID名の冒頭に「#」を付けるのを忘れないようにして下さい。#がない場合、「<現在のページの親ディレクトリ>/<指定したリンク>」という相対パスとして認識されてしまいます。

name属性も利用できる?

下記も現状(2017年5月)時点で、多くのブラウザで動作はしますが、name属性を使った方法も存在します。

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

現在も多くのブラウザで動作はしますが、HTML5移行は、アンカー要素のname属性は廃止予定です。idへのページ内リンクは依然として有効ですので、a要素のname属性を利用する必要はありません。将来を見据えて、避けるべきでしょう。

HTML 5.2 Editor’s Draft, 3 May 2017:

ページ内リンクにジャンプしても、ずれてしまう?問題

ページのレイアウトによっては、ページ内リンクが少しずれてしまうかもしれません。原因は多くの場合、CSSを使ったレイアウトに起因します。一概には言えませんが、代表的な例が、marginとpaddingに依るものです。

わかりやすさのために色を付けると・・

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

ページ内リンクは、この色を付けた領域の先頭が、ウィンドウの上枠に一致するようににジャンプします。これを解決するのはそもそも要素のレイアウトに影響してしまうためすこし厄介ですが、いくつか迂回策があります。

おすすめの解決策としては、「ページ内リンク専用の要素を追加する」です。

解決策1ページ内リンク専用の要素を追加する

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

// 例1)spanでテキストを囲む。
<h1><span id="link-to-me-1">ここにいるよ〜。</span></h1>

// 例2)spanをテキストの直前に挿入。絶対配置でオフセットを調整
<h1><span id="link-to-me-2" class="in-page-anchor"></span>ここにもいるよ。</h1>



<style>
h1{
 position:relative;
}

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

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

解決策2スムーズにスクロールする、Javascriptプラグインを利用する

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

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


以上です。

 

 

閉じる