目次
1. この記事でできるようになること
- aタグをクリックしても動かない原因を、すぐに切り分けできるようになります。
- href（リンク先を入れる追加情報＝属性）と、パス（今いる場所からの道順）を正しく書けるようになります。
- “動かないリンク”を最短で直すチェック順を習得できます。
2. 結論
原因：hrefが空・間違い、またはパス（道順）がズレている → 対策：リンク先の場所（フォルダ）とファイル名を確認して、hrefを書き直すだけです。
同じ表示になっていますか？まずは href を見に行きましょう。
3. 例（NG→OK）
まず前提のフォルダ構成（“今いる場所”が分からないと、道順が書けません）：
project/
contact.html
pages/
about.htmlポイント：リンクの道順（相対パス）は「今開いているHTMLファイルの場所」基準で決まります。
NG例（hrefの道順がズレていて、ファイルが見つからない）
状況：pages/about.html から contact.html に行きたいのに、同じフォルダにあると思い込んでいる
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>NG</title>
</head>
<body>
<h1>aboutページ</h1>
<!-- NG：about.html と同じ場所に contact.html があると思っている -->
<a href="contact.html">お問い合わせ</a>
</body>
</html>
OK例（1つ上の階層に戻ってから指定する：../ を付ける）
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>OK</title>
</head>
<body>
<h1>aboutページ</h1>
<!-- OK：../ は「ひとつ上のフォルダへ戻る」 -->
<a href="../contact.html">お問い合わせ</a>
</body>
</html>
../ は「ひとつ上のフォルダへ戻る」という意味です。ここが合うと一発で直ります。
4. よくある間違い
- hrefを書き忘れる（
<a>…</a>のままだと、行き先がありません） - ファイル名の打ち間違い（
contact.html/contact.htm、大文字小文字違いなど） - パス（道順）を“今いるHTMLの場所”基準で考えていない（
../の付け忘れが多い） - 外部リンクに https:// を付け忘れる（例：
href="https://example.com"） - href=”#” のまま放置する（「効いてない」ように見えたり、ページ先頭へ移動して混乱しやすい）
5. まとめ
- まず hrefがあるか を確認する
- 次に パス（道順）が正しいか を確認する（特に
../の付け忘れ） - ファイル名・拡張子・大文字小文字を揃える
- 外部リンクは基本 https:// から書く
- 迷ったら「今いるHTMLはどのフォルダ？」を声に出して確認する
まずは「href（道順）」だけ直せばOKです。
6. 次に読む記事
- 「相対パスと絶対パスの違い：道順で覚えるリンク指定」：
../や/の意味が整理でき、リンクで迷子にならなくなるから - 「imgが表示されない原因はsrcの“道順”ミス？（パス入門）」：リンクと画像は同じ“道順”の考え方なので、まとめて理解できるから
コメント