ウチノなんで画像が表示されないんだ･･･
最初のころ、「パスが合ってるはずなのに画像が表示されない…」と何度も悩みました。
でも、ある“考え方”をするようになって、驚くほどスムーズに解決できるようになったんです。
この記事では、相対パス・絶対パス・ルートパスの違いと使い分け、さらにフォルダ構成をもとにした具体的な書き方まで、わかりやすく解説します。
初心者の方でも理解しやすいように、私も実際につまずいた経験談やトラブルシューティングも交えて紹介しているので、「もうパスで迷わない」状態を目指しましょう！
記事の前提として
前提として上記画像のフォルダ構成で説明していきます。
このフォルダ構成はtestsite フォルダをVSCode（エディタ）で表示させた状態です。
相対パスと絶対パスの使い分け
絶対パスと相対パスの違い
絶対パスは、ファイルまでの完全なURLやディレクトリ構造を示す書き方です。
例えば
https://testsite.com/assets/images/test01.jpgのように httpや httpsなどから始まるURLをいいます。
これに対して、相対パスは、今のファイルの場所を起点として指定する書き方です。
例えば aboutフォルダにある index.htmlから imagesフォルダの画像を指定するパスは
../images/test01.jpgのような表示となります。
絶対パスを使うべきケース
- CDN（外部サーバー）など、常に同じ場所にあるファイル
- いろんなサイトからアクセスされるファイル
などがあります。
相対パスを使うべきケース
- ローカル開発中の環境
- サイト全体を一括で別サーバーに移動する予定がある場合
- HTMLファイル同士の連携が多い静的サイト
相対パスは構造変更時にも柔軟に対応できる点が大きなメリットです。
用途によって、相対パスと絶対パスを正しく使い分けることが重要です。
相対パスの基本
相対パスの書き方
相対パスは「今のファイルから見た位置関係」を示すものです。
先ほどの事例をもう一度とりあげます。
同じフォルダ内の画像 test01.jpg を呼び出す場合
about/index.htmlファイルに記述する画像呼び出しは
このようになります。
testsiteフォルダ直下のindex.htmlからimagesフォルダの画像を呼び出す場合
testsite/index.htmlに記述する画像呼び出しコードは
となります。
「../」の使い方
../ は「一つ上の階層」を意味します。
例えば
上の画像のフォルダ構成であれば aboutフォルダにある index.html からみて assetsフォルダに行くためにはaboutフォルダから出ないといけません。
そこで ｢../｣が必要になります。
結果 about/index.htmlからtest01jpgを読み込むには
../assets/images/test01.jpgとなります。次の章で更にかみ砕いて説明します。
「./」という書き方をみたことがあるけどどういう意味？
./ は「今いるディレクトリ」を意味します。例えば、./style.css は「同じ階層の style.css」を指定します。つまりstyle.cssと同じ意味です。
相対パスの具体例でもっとくわしく
画像ファイルの読み込み
さきほどの事例をもう一度、詳しくみてみます。
about フォルダにある index.html から test01.jpg までを読み込むとなった場合、
about にある index.html の階層を確認。
フォルダからでるために../が必要
次に assetsフォルダにあるので assetsフォルダの名前が必要
次に imagesフォルダにあるので imagesフォルダの名前が必要
最後に該当ファイルの名前が必要
これをパスにすると
../assets/images/test01.jpgとなります。
ポイントは
どのファイルに書いているか。そこが出発点です。
次にそのファイルから見た呼び出しファイルまでの道のりはどうなっているか？
ファイルの構造を頭の中でしっかりと把握することが相対パスを正確に書くポイントです。
CSSファイルの読み込み
testsiteフォルダのindex.htmlのheadタグでstyle.cssを読み込む場合
考え方として
出発点は testsite フォルダ直下にある index.html です。
目的地は cssフォルダの中のstyle.cssです。
index.htmlからstyle.cssまでたどり着くために、assetsフォルダにいく必要があります。
testsite/index.htmlとassetsフォルダは同階層なのでまず assets フォルダの名前が必要です。
次にcssフォルダの名前が必要
最後に該当ファイルの名前が必要
これをつなげてパスにすると
assets/css/style.cssとなります。
今回は ｢../｣ は不要だと整理できたでしょうか？ポイントは同階層です。
CSSファイルから背景画像を読み込み
上記フォルダ構成の style.cssファイルで test01.jpgファイルを読み込む場合
考え方は
出発点は style.cssファイルです。
ここから test01.jpgを目指します。
まず style.cssから ../ を使ってフォルダを出ます。
次に test01.jpgファイルは imagesフォルダにあるので imagesフォルダの名前が必要
最後に該当ファイル名が必要
これをパスにすると
background-image: url(../images/test01.jpg);となります。
最初はindex.htmlからパスを指定と cssファイルからパスを指定する場合の、出発点が違うということが理解できていませんでした。これが原因で理解に時間がかかりました。
相対パスのトラブルシューティング
画像が表示されない場合、私の場合は本当に凡ミスが多かったです。画像があるならパスが正しければ表示されます。落ち着いて確認してみましょう。
画像が表示されない原因
- パスの記述ミス（フォルダ名の綴りや「/」の位置）
- ファイルが指定した場所に存在していない。（例: テストサーバーの画面を確認しているが、セットしたのはローカルだった)
- ファイルの拡張子の間違い（例：.jpeg と .jpg）
こうした点を確認すると、多くの場合すぐに解決できます。
共通パーツの読み込みでパスが変わる場合
ヘッダーやフッターなどの共通パーツを読み込む際、表示させる htmlファイルの場所によって相対パスがズレてしまうことがあります。
その場合は、パーツ内で使うリンクや画像のパスも htmlファイルの場所によっては調整が必要です。
PHPやejsなどを使ってパスを動的に生成するのがおすすめです。途中でフォルダが変わっても修正も簡単ですしね。
ルートパスについて
修正案件などではルートパス（/ から始まるパス）を使っているケースもあります。
ルートパスとは
パスを /（スラッシュ） から始めることでルートフォルダ（今回の事例ではtestsite）を基準としたパスを設定できます。
例えば、WebサイトのURLが https://www.testsite.com/ だとします。
https://www.testsite.com/index.htmlでも、
https://www.testsite.com/about/でも
/（スラッシュ）はtestsite.comを表しています。
例えば /css/style.css というパスは、
https://www.testsite.com/css/style.cssを常に指します。
ルートパスの便利な点はどのファイルからでも / からはじめられることです。
この記事で何度かお伝えした出発点が常にhttps://www.testsite.com/ということです。
この画像でいうと出発点は常に testsiteフォルダになります。
ルートパスを使うときの注意点
ローカル開発環境でindex.htmlファイルをブラウザで表示させたときに、ご自身のパソコンではルートフォルダが合わないので画像などが表示されない場合があります。
ローカルサーバーなどの環境（VSCodeのLive Serverプラグインなど）を構築してフォルダ構成を合わせる必要があります。
まとめ
相対パスを理解する最大のコツは、「いまどこにいるか（出発点）」と「どこに行きたいか（目的地）」を把握することです。
ファイル構造を意識して、出発点と目的地までどこを通っていくかをみてあげると、正しいパスは自然と見えてきます。
慣れないうちはつまずいて当然ですが、繰り返し手を動かして確認していくうちに、確実に身につきます。迷ったときはまたこの記事に戻って、一緒に整理していきましょう！
