HTMLの相対パス・絶対URL：フォルダ構成で参照先を確かめる

画像やCSSが読み込めないとき、まず「このページから、そのファイルをどう指しているか」を確認します。ここではフォルダ構成を固定し、同じ階層・下の階層・上の階層を区別します。

例で使う構成

フォルダ構成（ファイルに貼り付けるコードではありません）

project/
├── index.html
├── style.css
├── images/
│   └── photo.jpg
└── pages/
    └── about.html

index.htmlから参照する

同じフォルダにあるCSSはstyle.css、下のimagesにある画像はimages/photo.jpgです。

index.html（linkはhead内、imgはbody内）

<link rel="stylesheet" href="style.css">
<img src="images/photo.jpg" alt="説明用の写真">

pages/about.htmlから参照する

about.htmlはpagesの中です。style.cssへ戻るには、一つ上を表す../を使います。画像も一つ上からimagesへ進みます。

pages/about.html（linkはhead内、imgとaはbody内）

<link rel="stylesheet" href="../style.css">
<img src="../images/photo.jpg" alt="説明用の写真">
<a href="../index.html">トップへ戻る</a>

about.htmlとstyle.cssを同じフォルダに置く構成なら、../は不要です。コードの正しさはファイル名だけでなく、実際の配置で決まります。

ルート相対と絶対URL

URLの記述例（ファイル全体のコードではありません）

/images/photo.jpg
https://example.com/images/photo.jpg

先頭が/なら、そのURLのオリジンのルートから解決します。WordPressをサブディレクトリに設置している場合は、サイト内の想定フォルダと一致しないことがあります。スキームとホストまで含む絶対URLは、外部の資料等へのリンクに使えます。

相対参照も、ブラウザが最終的なURLに解決してから取得します。同じURLのファイルを指す場合、相対表記にしただけでDNS解決が省けて速くなるわけではありません。

参照先をコードで確かめる

ブラウザのConsoleで、説明用URLを基準に解決できます。

ブラウザのConsole（ファイルへの保存は不要）

new URL("../style.css", "https://example.com/pages/about.html").href
// "https://example.com/style.css"

ローカルと公開環境の違い

file://で開くと、ルート相対参照やサーバー側の処理は公開環境と同じになりません。すべての絶対URLが使えなくなるわけではありませんが、制作の確認ではローカルHTTPサーバーを使うと切り分けやすくなります。

404を確認する

1. Networkで実際のRequest URLを見る。
2. 画像・CSSがそこに存在するか確認する。
3. 大文字小文字と拡張子を合わせる。
4. 開いているページの階層からパスを計算し直す。

基本の配置を試すには最初のHTMLページへ戻れます。

HTMLのsrcと、CSSのurl()は基準のファイルが違う

CSSを別フォルダへ移したとき、背景画像だけ消えることがあります。外部CSSに書いた相対URLは、そのCSSファイルの場所が基準です。HTMLからの道順を、そのままコピーできるとは限りません。

フォルダ構成（CSSを別フォルダに置く別の例）

site/
├── index.html
├── css/
│   └── style.css
└── images/
    └── photo.svg

この構成なら、index.htmlの画像はimages/photo.svg、css/style.cssの背景は../images/photo.svgです。

css/style.css（背景画像の指定）

/* css/style.css */
.hero { background-image: url("../images/photo.svg"); }

先ほどの平らなフォルダ構成とは別の練習例です。HTMLのlinkもhref="css/style.css"に合わせます。背景が出ない場合は、DevToolsのNetworkで実際に要求された画像URLを見ると、どの階層を見に行ったかが分かります。

写真を並べるページで試すなら、画像ギャラリーの差し替え例へ進めます。

参考にした公式資料

• MDN：相対参照の解決