相対パスと絶対パスって何？画像やリンクの場所を確かめよう

HTMLに画像の場所を書いたのに表示されない。リンクを押すと違うページへ行ってしまう。そんなときは、どこを出発点に場所を指定しているかを確認してみよう。

この記事では、小さなフォルダ構成を使って相対パスを試す。必要なのはブラウザと、ZIPファイルを展開する機能。サーバー契約は不要だよ。

パスは、ファイルやページの場所を示す部分

URLの中では、/guide/startのような部分をパスと呼ぶ。HTMLの画像やリンクにも、URL全体や、基準になる場所からのパスを書けるよ。

sample/
  index.html
  images/
    sample.svg
  pages/
    about.html

ここではindex.htmlを入口にし、imagesへ画像、pagesへ別ページを置く。

今いる場所からたどる相対パス

index.htmlから画像を指定するなら、次のように書ける。

<img src="images/sample.svg" alt="説明用の青い四角" width="160" height="100">

いまのHTMLと同じ場所から、imagesというフォルダへ入り、sample.svgを探すという指定だね。

一つ下のpages/about.htmlから同じ画像を指定するなら、まず一つ上へ戻る必要がある。

<img src="../images/sample.svg" alt="説明用の青い四角" width="160" height="100">

../が「一つ上」を表す。./なら現在の場所を表す。通常のHTMLでは文書のURLが基準になるけれど、base要素などで基準を設定している場合はその設定も確認するよ。

URL全体と、先頭のスラッシュ

ルートは、Webサイト側の階層の出発点。WebページをHTTPやHTTPSで開いている場合、先頭の/は通常、その接続先のルートを基準にする。

ただし、パソコンのファイルを直接開くfile:のURLでは、先頭の/の扱いがサイトのルートと同じにはならない。ローカルの作例で画像が出ないときに、むやみに先頭へ/を足さないようにしよう。

作例を開いて確認する

フォルダ付きの作例ZIPを保存し、展開してからindex.htmlをブラウザで開いてみよう。ZIPの中をプレビューするだけではなく、一度フォルダへ取り出すのがポイントだよ。

1. 入口ページで青い四角の画像が表示されることを確認する。
2. 「説明ページへ」を押す。
3. 説明ページでも同じ画像が表示されるか見る。
4. 「入口に戻る」で最初のページへ戻る。

入口はimages/sample.svg、説明ページは../images/sample.svgを使っている。同じ画像へ別の場所からたどれることを、ブラウザで確認したよ。編集部ではローカルのHTTP配信で確認している。

見つからないときの確認順

• ZIPを展開したか、必要なフォルダごと保存したか。
• ファイル名と拡張子が一致しているか。
• 大文字・小文字が違っていないか。環境によって扱いが異なるので、同じ綴りにそろえる。
• HTMLを移動したのに、以前の相対パスを残していないか。
• ファイルを直接開く場合と、Webサーバー経由の場合を混同していないか。

HTTPでファイルが見つからないときの確認は404とHTTPステータスへ。URL全体の構造はURL・ドメイン・サーバーの基本で復習できるよ。