HTML リンク：相対パス

JPKODA 編集部 May 5, 2026

前章では、<a> タグと href 属性を使用して基本的な超リンク（ハイパーリンク）を作成する方法を学びました。

今回は、同じ Web サイト内の他のページへリンクする方法、すなわち「内部リンク」について深く掘り下げます。相対パスは、これらの内部リンクを正常に機能させるための鍵であり、特にサイトを別のサーバーやドメインに移動させる際、その真価を発揮します。

1. 相対パスとは何か？

相対パスは、現在の HTML ドキュメントから見たターゲットファイルの位置を指定します。

https://www.example.com/about.html のような完全な URL を提供する必要はなく、現在のページの位置を起点としたパスを指定するだけで済みます。これにより、リンクのポータビリティ（移植性）が高まります。ドメイン名が変わったとしても、ファイル構造さえ維持されていればリンクが切れることはありません。

1.1 相対パスの構造

相対パスはディレクトリ（フォルダ）名とファイル名で構成され、スラッシュ (/) で区切られます。ディレクトリ構造をナビゲートするために、以下の特殊な記号を使用します。

.（ドット 1 つ）: 現在のディレクトリを指します。通常は省略可能ですが、明示的に記述する場合もあります。
..（ドット 2 つ）: 親ディレクトリ（1 つ上の階層）を指します。

2. ケーススタディ：Webサイトのディレクトリ構造

理解を深めるために、シンプルなブログサイトの構造を想定してみましょう。

mywebsite/
├── index.html        (トップページ)
├── about.html        (アバウトページ)
├── contact.html      (お問い合わせページ)
└── blog/             (ブログフォルダ)
    ├── article1.html (記事1)
    ├── article2.html (記事2)
    └── images/       (画像フォルダ)
        └── image1.jpg

2.1 index.html からの指定

index.html からリンクを作成する場合：

about.html へのリンク: about.html と記述（同じフォルダにあるため）。
contact.html へのリンク: contact.html と記述。
article1.html へのリンク: blog/article1.html と記述（blog フォルダの中に入る）。
image1.jpg へのリンク: blog/images/image1.jpg と記述。

2.2 blog/article1.html からの指定

blog フォルダ内の article1.html からリンクを作成する場合：

index.html へ戻るリンク: ../index.html と記述（.. で 1 つ上の階層である mywebsite ディレクトリに戻る）。
about.html へ戻るリンク: ../about.html と記述。
image1.jpg へのリンク: images/image1.jpg と記述（同じ階層にある images フォルダの中に入る）。
article2.html へのリンク: article2.html と記述（同じ階層のファイル）。

3. 内部リンクの作成：ステップバイステップ実戦

上記の構造に基づいて、実際のコードを書いてみましょう。

3.1 示例 1：トップページからアバウトページへリンク

(ファイル名：index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マイウェブサイト</title>
</head>
<body>
    <h1>マイウェブサイトへようこそ</h1>
    <p>詳細については <a href="about.html">私たちについて</a> をご覧ください。</p>
</body>
</html>

解説: href="about.html" は、このファイルが index.html と同じディレクトリにあることを前提としています。

3.2 示例 2：トップページからブログ記事へリンク

(ファイル名：index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マイウェブサイト</title>
</head>
<body>
    <h1>マイウェブサイトへようこそ</h1>
    <p>最新の <a href="blog/article1.html">ブログ記事</a> を読む。</p>
</body>
</html>

解説: href="blog/article1.html" は、blog ディレクトリ内にある article1.html へリンクします。

3.3 示例 3：記事からトップページへ戻るリンク（`..` の使用）

(ファイル名：blog/article1.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>記事 1</title>
</head>
<body>
    <h1>記事 1</h1>
    <p><a href="../index.html">トップページ</a> に戻る。</p>
</body>
</html>

解説: href="../index.html" は .. を使用して 1 つ上の階層へ移動し（blog ディレクトリを出る）、index.html へリンクします。

3.4 示例 4：記事間のリンク