tammpro | 少しためになるブログ

プログラミングの学習方法や学習する上で大切な考え方など、僕が初心者の時に知っておきたかったことなどを中心に発信しています。

ローカルでは画像が見えるのに本番で消えるのはなぜ？ファイルパスの基本

tammpro

パソコン上で制作しているときは正常に表示されていた画像が、サーバーへアップロードすると突然表示されなくなることがあります。

CSSが読み込まれない、リンク先が見つからない、Javascriptだけ動かないといった問題も、ファイルパスの間違いが原因かもしれません。

ファイルパスとは、HTMLから見て画像やCSSなどがどこに保存されているのかを伝える情報です。

同じファイルを指定しているつもりでも、書き方や基準となる場所が違えば、ブラウザは別の場所を探します。

今回は、ファイルパスの基本と、ローカル環境では表示されるのに本番環境で表示されなくなる主な原因を初心者向けに解説します。

ファイルパスは保存場所を示す住所

Webサイトは、一つのファイルだけで作られているわけではありません。

一般的には、次のようなファイルを組み合わせて表示しています。

  • HTML

  • CSS

  • Javascript

  • 画像

  • Webフォント

  • 動画

  • PDFなどの資料

HTMLから画像を読み込む場合は、その画像が保存されている場所をブラウザへ伝える必要があります。

CSSから背景画像を読み込む場合も同じです。

ファイルパスは、読み込みたいファイルまでの道順を示す住所のようなものです。

住所が間違っていれば、ファイル自体がサーバー上に存在していても表示できません。

相対パスは現在地から場所を示す

相対パスは、現在開いているファイルを基準にして、目的のファイルまでの場所を示す方法です。

たとえば、HTMLと画像が同じフォルダにある場合と、画像専用のフォルダに分けられている場合では、指定する道順が変わります。

現在のフォルダから一つ上へ戻る必要がある場合もあります。

相対パスの特徴は、現在地によって意味が変わることです。

同じ記述を別の階層にあるHTMLへコピーすると、ブラウザが探す場所も変わります。

トップページでは画像が表示されるのに、下層ページでは表示されない場合は、現在地の違いが原因になっている可能性があります。

CSSではCSSファイルの場所が基準になる

ファイルパスで特に間違えやすいのが、CSSから背景画像を読み込む場合です。

HTML内で画像を指定するときは、基本的にHTMLファイルの場所から考えます。

一方、外部CSSから背景画像を読み込むときは、そのCSSファイルが保存されている場所が基準になります。

HTMLとCSSが異なるフォルダにあれば、同じ画像を読み込む場合でも道順は変わります。

HTMLから正しく表示できたパスを、そのままCSSへコピーしても動かないことがあるのは、このためです。

「画面上では同じ画像を使っているから、同じ書き方でよい」とは限りません。

どのファイルから読み込み処理を行っているのかを確認する必要があります。

ルートから指定する方法もある

現在のファイルを基準にするのではなく、Webサイトの一番上の階層を基準にして場所を示す方法もあります。

この方法では、どの階層のページから読み込んでも、サイト内の同じ場所を参照しやすくなります。

ページ数が多く、複数の階層に分かれているサイトでは便利です。

ただし、サブフォルダ内にテストサイトを設置している場合は注意が必要です。

サイトの一番上だと思っていた場所と、サーバー全体の基準位置が異なると、意図しない場所を参照することがあります。

ローカル環境、テスト環境、本番環境で設置場所が違う場合は、それぞれの基準がどこになるかを確認します。

完全な場所を指定する方法

ファイルの場所を、ドメインを含めた完全な情報で指定する方法もあります。

別サイトの画像や外部サービスのファイルを読み込む場合などに使われます。

現在のページ階層に影響されないことがメリットですが、環境を移したときに古い参照先が残りやすい点には注意が必要です。

たとえば、テスト環境のドメインを含んだまま本番公開すると、本番サイトからテスト環境の画像を読み込み続けることがあります。

画面上では画像が表示されているため、移行が成功したように見えるかもしれません。

しかし、テスト環境を削除すると、その画像も表示されなくなります。

表示されているかだけでなく、どこから読み込んでいるかを確認することが大切です。

パソコン内の場所はWebサイトから使えない

制作中に、自分のパソコン内にある画像を直接参照している場合があります。

自分のパソコンでは画像が存在するため、正常に表示されます。

しかし、サーバーへHTMLだけをアップロードしても、その画像はサーバー上にありません。

閲覧者のパソコンにも、制作者と同じフォルダや画像は存在しません。

そのため、本番サイトでは画像を読み込めなくなります。

画像、CSS、Javascriptなど、Webサイトで使用するファイルは、必要なものをすべてサーバーへアップロードする必要があります。

ファイルをアップロードしただけでなく、HTMLやCSSがサーバー上の場所を正しく参照しているかも確認します。

ファイル名の大文字と小文字に注意する

パソコン上では、ファイル名の大文字と小文字を区別せずに表示できることがあります。

一方、Webサーバーでは、大文字と小文字が別のファイルとして扱われる場合があります。

たとえば、実際の画像名は先頭が大文字なのに、HTML側では小文字で指定していると、ローカルでは表示できても本番では見つからないことがあります。

拡張子も同様です。

画像の拡張子が大文字になっているのに、読み込み側では小文字で指定していると一致しない場合があります。

ファイル名は、基本的に小文字へ統一すると管理しやすくなります。

アップロード前には、実際のファイル名と読み込み側の指定が完全に一致しているか確認します。

日本語や空白を含むファイル名は避ける

画像や資料へ日本語のファイル名を付けると、管理画面では分かりやすく感じるかもしれません。

しかし、環境によって文字の扱いが変わり、正しく読み込めない場合があります。

ファイル名に空白や記号が含まれている場合も、意図しない形へ変換されたり、指定方法が複雑になったりします。

Webサイトで使用するファイル名は、次のようなルールで統一すると安全です。

  • 半角の英数字を使う

  • 基本的に小文字へ統一する

  • 単語の区切りにはハイフンを使う

  • 空白を入れない

  • 使用目的が分かる名前にする

  • 同じ名前を使い回さない

公開後にファイル名を変更すると、すでに設定している参照先も修正しなければなりません。

できるだけアップロード前に名前を整えます。

フォルダ構成を変えるとパスも変わる

制作途中でファイルを整理し、画像やCSSを別のフォルダへ移動することがあります。

ファイルを移動した場合は、そのファイルを読み込んでいる場所もすべて変更する必要があります。

画像を整理したあとにトップページだけ確認し、下層ページやCSS内の背景画像を見落とすケースもあります。

ファイルを移動する前には、どこから使用されているかを検索しておくと安全です。

移動後は、次のような箇所を確認します。

  • HTML内の画像

  • CSS内の背景画像

  • Javascriptで読み込むファイル

  • OGP画像

  • アイコン

  • ダウンロード資料

  • WordPressのテンプレート

  • 構造化データなどの設定

一つのファイルが複数のページから使われている場合もあるため、表示中のページだけで判断しないことが大切です。

アップロード先の間違いも多い

パスの記述が正しくても、ファイルを違うフォルダへアップロードしていれば表示されません。

特にFTPやサーバーのファイル管理機能を使用している場合は、似た名前のフォルダへアップロードしてしまうことがあります。

テスト環境と本番環境の両方がある場合も注意が必要です。

ローカルでは修正済みでも、本番サーバーへ新しい画像を送っていなければ、古い状態のままです。

次の点を確認します。

  • 正しいドメインのフォルダを開いているか

  • 使用中のテーマへアップロードしているか

  • 子テーマと親テーマを間違えていないか

  • テスト環境ではなく本番環境へ反映しているか

  • ファイルの更新日時が新しくなっているか

  • 必要なフォルダごとアップロードできているか

キャッシュを疑う前に、目的のファイルが本当にサーバー上へ存在するかを確認します。

WordPressではテーマの場所が変わる可能性がある

WordPressテーマでは、固定された文字列だけでテーマ内のファイルを指定すると、環境の変化に弱くなる場合があります。

ローカル環境と本番環境でドメインが違ったり、テーマの保存場所が変わったりするためです。

また、親テーマと子テーマでは、どちらのフォルダを基準にするかが異なる場合があります。

WordPressには、テーマやプラグインの場所を取得するための仕組みが用意されています。

テーマ内の画像やCSSを読み込むときは、現在の環境に合った場所を取得できる方法を使うと、移行後の修正を減らせます。

ただし、親テーマのファイルを読み込みたいのか、子テーマ側のファイルを読み込みたいのかは区別する必要があります。

リンク先でも同じ問題が起こる

ファイルパスの問題は画像だけではありません。

ページ内のリンクも、現在地と指定方法が合っていなければ正しい場所へ移動できません。

トップページでは動作していたリンクが、下層ページでは存在しない場所を参照することがあります。

また、ページ名やスラッグを変更したあとに古いリンクが残っていると、存在しないページが表示されます。

サイト公開前には、ナビゲーション、ボタン、画像リンク、パンくずリスト、フッターなどを実際に操作して確認します。

リンク先の画面が開いたことだけでなく、本来意図したページへ移動しているかを見ることが重要です。

ブラウザの開発者ツールで原因を確認する

画像が表示されないときは、何となくパスを書き換えるのではなく、ブラウザがどの場所を探しているのかを確認します。

開発者ツールでは、読み込みに失敗したファイルや、ブラウザがアクセスしようとした場所を確認できます。

ここを見ると、次のような問題を見つけやすくなります。

  • フォルダ名が一つ足りない

  • 一つ上の階層へ戻りすぎている

  • ファイル名の大文字と小文字が違う

  • 拡張子が違う

  • 古いドメインを参照している

  • ファイル自体がアップロードされていない

  • 閲覧権限などの理由で拒否されている

エラーの内容が分かれば、パスの問題なのか、ファイルが存在しないのかを切り分けられます。

表示されないときの確認順序

画像やCSSが読み込まれない場合は、次の順番で確認すると原因を探しやすくなります。

  1. 目的のファイルがサーバー上に存在するか

  2. アップロード先が正しいか

  3. ファイル名と拡張子が完全に一致しているか

  4. 大文字と小文字に違いがないか

  5. HTMLとCSSのどちらから読み込んでいるか

  6. 現在のファイル階層を基準にしているか

  7. 古いドメインやテスト環境を参照していないか

  8. ブラウザの開発者ツールにエラーが出ていないか

  9. キャッシュを更新しても同じ状態か

最初からコードを大きく変更せず、ファイルの存在と実際の参照先を一つずつ確認します。

まとめ

ファイルパスは、HTMLやCSSから画像、Javascript、資料などの保存場所を伝えるための情報です。

相対パスは現在のファイル、ルートを基準にする指定はサイトの上位階層、完全な指定は特定のドメインを基準にします。

ローカル環境では表示されるのに本番環境で消える場合は、パソコン内の場所を参照している、ファイルをアップロードしていない、大文字と小文字が違う、基準となる階層を間違えているといった原因が考えられます。

特に、HTMLと外部CSSではパスを考える基準が異なることに注意が必要です。

何となく記述を変えるのではなく、現在地、目的地、ブラウザが実際に探している場所を確認する。

この考え方を身につけることで、画像やCSSが表示されない問題を効率よく解決できるようになります。