初めてのHTML5 – (5) – 相対パス、絶対パス

簡単な例として以下のフォルダの構造を見てみましょう。

一般的なWebサイトの簡単な構造です。

ここで、トップページの「パス」は「/index.html」であり、「ドメイン名」で接続することができます。

この時、特別な設定を加えない以上普通のWebページのトップページは「/index.html」から始まります。

パスで表すと「/」でも表せます。

また、ここで「service-worker」というjsファイルに接続する時、そのパスは「src/service-worker.js」になります。

上記のように、Webサイトのメインフォルダから他のファイルに向かってフォルダ順にたどったものを「パス」といいます。

Webページで他のページに接続したり、画像をリンクする時にはパスを指定する必要があります。

このパスを大きく「絶対パス」、「相対パス」に分けれます。

絶対パス

絶対パスは「URL」そのもののことです。

主に外部サイトにリンクする時に使われます。

例えば以下のHTMLは絶対パスを使ったものです。

HTML

<a href="https://www.kyon-magazine.com/html5_basic" target="_blank"> HTML5の基本</a>

実行結果

相対パス

相対パスは「指定ファイルのパスを起点として、他のファイルのリンクを指定する」方法です。

主に内部リンクを指定するときに相対パスを使います。

例えば、また上のイメージをもう一回使って説明すると、

「index.html」のあるところを「ルートフォルダ」にしたら、「service-worker」というjsファイルに接続する時、そのパスは「src/service-worker.js」になります。

逆に1階層を上がるためには先頭に「../」をつけます（ちなみに、2階層上がるためには「../../」と書きます。）

例えば、「この掲示物」から「初めてのHTML」の目録をリンクするためには「../」になります。

HTML

<a href="../">初めてのHTML</a>

実行結果

なお、同じ階層の他のファイルにリンクするには、先頭に「./」と書きます。（こちらの方の「./」は省略できます。）

ルート相対パス

相対パスの中で特殊な書き方として「ルート相対パス」という書き方があります。

こちらは、既存の相対パスが「特定ファイル」を元で起点を決めるのに対し、ルート相対パスは「常にルートフォルダ」を起点にするパスを書きます。

例えば、現在のサイトからすると

HTML(例1)

<a href="/invented/game/puzzle/351/">【webゲーム】Kyaru touch</a>

実行結果

HTML(例2)

<a href="/invented/game/puzzle/859/">【webゲーム】神経衰弱</a>

実行結果