リンクのHREF属性における絶対パスと相対パスの使い分けについて

ホームページの管理の際、リンク表記をどう書いたらいいの?という疑問を時々聞きます。
ここでは「こうしたら結構効率的だった」というリンク表記の使い分けについてご紹介します。

絶対パスと相対パス

絶対パスと相対パスそのものについては詳しく説明しませんので、それらの違いが分らない/知らないという方は、下記のページ等を参照して下さい。

Web KANZAKI 内のページ:
http://www.kanzaki.com/docs/html/htminfo-uri.html

Google で検索:
絶対パス 相対パス で Google 検索

このページでは、ひとまず以下のように呼び分けることにします。

絶対パス:
<A HREF=”http://sugutsukaeru.jp/products/P004-G1-A0/index.html”>「すぐ使えるCGI」画像付 ウェブページ更新ツール</A>

完全相対パス:
<A HREF=”../products/P004-G1-A0/index.html”>「すぐ使えるCGI」画像付 ウェブページ更新ツール</A>

サーバルートからの相対パス:
<A HREF=”/products/P004-G1-A0/index.html”>「すぐ使えるCGI」画像付 ウェブページ更新ツール</A>

(ここで「サーバルートからの相対パス」と呼んでいるものを「絶対パス」と呼ぶ場合もあります。)

絶対パスについて

絶対パスは、サイト内のリンクとしては、使用しないほうが効率的です。

絶対パスで書いてしまうと、例えばプロバイダを変えた、ドメイン名が変わった、などの場合に全てのリンクの書き換えが必要になるし、公開Webサーバのコンテンツをまず社内のサーバでチェックしている、などの場合も、リンクを選択したとたん、公開サーバに飛んでしまいます。

絶対パスは、サイト外(メールや他サイト)から自サイトにリンクをしたい場合のみに使用します。

ということで、次項以降は、完全相対パスとサーバルートからの相対パスの使い分けについて解説します。

オーサリングソフトを使用している場合

ひとつのWebサイトの管理に、単一のオーサリングソフト(ホームページ・ビルダーや Dreamweaver など)を使用している場合は、特に使い分けを気にする必要はありません。

どちらか一方を使用することを選択すれば、あとは、ページ階層の変更の際などにも、自動的にソフトの方が対応してくれます。

リンク表記の使い分けが効果的に働くのは、テキストエディタでHTML編集している場合や、複数の人間がそれぞれ好きなソフトや方法でページ編集しているような場合です。

完全相対パスとサーバルートからの相対パスの使い分け

結論から言うと、完全相対パスは、内容的にまとまりのあるページ群間の移動に使用します。

サーバルートからの相対パスの方は、端的に言えばメニューバーのリンク、つまり、サイト内のどこからでもリンクさせたいようなページへのリンクに使用します。

例えば、以下のように構成されたページの場合、

/ ─ manuals/
  ├ index.html
  └ product1/
    ├ index.html
    ├ section1 /
    │ ├ page1_1.html
    │ ├ page1_2.html
    │ └ page1_3.html
    │
    ├ section2 /
    │ ├ page2_1.html
    │ ├ page2_2.html
    │ └ page2_3.html
    │
    └ section3 /
       ├ page3_1.html
       ├ page3_2.html
       └ page3_3.html

page#_#.html (#は数字)ページと /manuals/product1/index.html の間の移動はすべて、完全相対パスで記載します。これらのページの相対的な階層構造は、変化することがあまり考えられないからです。

一方、page#_#.html から / (トップページ) や、 /manuals/index.html へのリンクは、サーバルートからの相対パスで記載します。

こうしておくと、product1 のマニュアルがもう1個増えて、以下のような構造になった場合でも、

/ ─ manuals/
  ├ index.html
  └ product1/
    ├ index.html (←新しく作成した。
    │        version1/index.html と
    │        version2/index.html へのリンクを記載)
    ├ version1 /
    │ ├ index.html (←もとの product1/index.html)
    │ ├ section1 /
    │ │ ├ page1_1.html
    │ │ ├ page1_2.html
    │  : :
    │
    ├ version2 / (←新しく増えたマニュアルファイル分。)
       :

page#_#.html から / (トップページ) や、 /manuals/index.html へのリンクは、変更しなくてもリンク切れになりません。また、page#_#.html の間のリンクも、変更が不要です。

変更する必要が出るのは、/manuals/index.html からもとの /manuals/product1/index.html へリンクしていたURLくらいです。

とっても楽ですね。