リンクが効かない・飛ばないときの原因5つ

リンクの不具合は、症状によって原因が分かれます。まず「どうなるか」をはっきりさせると、原因の候補が一気に絞れます。

症状1：クリックしても何も起きない

そもそもリンクとして認識されていない可能性が高いです。次を確認してください。

• href 属性を書いているか（href の無い a は、ただの文字）
• 閉じタグ </a> があるか
• CSSで pointer-events: none が当たっていないか
• 別の要素が上に重なっていないか（position で重ねたときに起きやすい）

最後の「重なっている」は気づきにくい原因です。検証ツールでその位置を右クリック→検証すると、実際に手前にある要素が選択されます。想定と違う要素が選ばれたら、それが犯人です。

症状2：404（ページが見つかりません）になる

リンクとしては動いているので、行き先の指定が間違っています。パスの問題です。

• ファイル名の綴り、拡張子（.html の書き忘れ）
• 大文字小文字の違い（公開サーバーでは区別される）
• 階層の数え間違い（../ の数）

ブラウザのアドレスバーに表示されているURLを見てください。ブラウザが実際に探しに行った場所がそこに出ています。意図した場所と見比べれば、どこがずれたか分かります。

症状3：同じページの先頭に戻ってしまう

href="#" と書いている場合の動きです。# だけだとページの先頭を指すので、その場でジャンプします。作りかけで仮に置いているなら問題ありませんが、本番では実際のURLに置き換えてください。

症状4：ページ内リンクが飛ばない

同じページの特定の位置に飛ばすには、飛び先に id を付けて、その名前を # の後ろに書きます。

<!-- 飛ぶ側 -->
<a href="#access">アクセスはこちら</a>

<!-- 飛び先。id を付ける -->
<h2 id="access">アクセス</h2>

• 飛び先の id を書き忘れている
• # を付け忘れている（href="access" だとファイル名として扱われる）
• id の綴りが違う（大文字小文字も区別される）

固定ヘッダーがあるサイトでは、飛んだ先が隠れてしまうことがあります。これはリンクの不具合ではなく、飛び先にヘッダーの高さぶんの余白を確保すれば解決します。scroll-margin-top というCSSが使えます。

症状5：新しいタブで開かない

target="_blank" を書いていないか、綴りが違っています。_blank の先頭のアンダースコアを忘れやすいので確認してください。

なお、外部サイトを新しいタブで開く場合は rel="noopener" も一緒に書きます。開いた先のページから、元のページを操作されるのを防ぐためです。

確認の順番

• クリックに反応するか → しないなら href か重なりの問題
• URLが変わるか → 変わって404なら、パスの問題
• 意図したURLか → 違うなら、書いたパスの解釈がずれている

この3ステップで、リンクの不具合はほぼ特定できます。