07. ファイル・ディレクトリ・パス指定

この章では、ファイル、ディレクトリ、パス指定について学びます。

Web制作では、画像が表示されない、CSSが効かない、下層ページだけリンクが壊れる、といったトラブルがよく起きます。

その多くは、ファイルの場所とパス指定の理解で切り分けられます。

ファイルとディレクトリ

ファイルは、HTML、CSS、JavaScript、画像などの1つ1つのデータです。

ディレクトリは、ファイルを入れるフォルダのようなものです。

ファイル構成の例
project/
  index.html
  about/
    index.html
  assets/
    css/
      style.css
    js/
      main.js
  images/
    main.jpg

Web制作では、どのファイルがどのディレクトリにあるかを意識してパスを書きます。

index.htmlの役割

index.html は、そのディレクトリの入口になるファイルです。

たとえば、次のURLにアクセスした時、サーバーは多くの場合 /about/index.html を返します。

URLとindex.html
https://example.com/about/
対応するファイル
about/index.html

そのため、静的なHTMLサイトでは、各ページのディレクトリ内に index.html を置く構成がよく使われます。

相対パス

相対パスは、現在のファイルの場所を基準にして、別のファイルを指定する書き方です。

相対パスの例
<img src="../images/main.jpg" alt="">

現在のファイルがどこにあるかによって、同じ書き方でも指す場所が変わります。

これが、下層ページだけ画像が出ない原因になることがあります。

ルート相対パス

ルート相対パスは、サイトの一番上を基準にして指定する書き方です。

先頭に / を付けます。

ルート相対パスの例
<link rel="stylesheet" href="/assets/css/style.css">
<img src="/images/main.jpg" alt="">

サイト内のどのページから見ても、同じ場所を指します。

そのため、下層ページが多いサイトでは扱いやすいことがあります。

絶対URL

絶対URLは、プロトコルやドメインを含めた完全なURLです。

絶対URLの例
<a href="https://example.com/about/">会社概要</a>
<img src="https://example.com/images/main.jpg" alt="">

外部サイトへのリンクや、別ドメインの画像・スクリプトを読み込む時に使います。

同じサイト内のリンクでは、相対パスやルート相対パスを使うことも多いです。

./ と ../

相対パスでは、. と .. をよく使います。

書き方意味
./現在のディレクトリ
../1つ上のディレクトリ

たとえば、about/index.html から images/main.jpg を読み込む場合を考えます。

ファイル構成
project/
  about/
    index.html
  images/
    main.jpg

about/index.html から見ると、images は1つ上に戻った場所にあります。

1つ上へ戻る指定
<img src="../images/main.jpg" alt="">

この ../ の数を間違えると、画像が表示されません。

CSSから画像を読み込む時のパス

CSS内で画像を読み込む場合、基準になるのはCSSファイルの場所です。

ファイル構成
project/
  assets/
    css/
      style.css
  images/
    bg.jpg

style.css から images/bg.jpg を読み込むなら、次のようになります。

CSSから画像を読み込む
.hero {
    background-image: url("../../images/bg.jpg");
}

HTMLファイルの場所ではなく、CSSファイルの場所を基準にする点に注意します。

HTMLからCSSやJSを読み込む時のパス

HTMLからCSSやJavaScriptを読み込む場合は、HTMLファイルの場所を基準にします。

トップページでは読み込めるのに下層ページで読み込めない場合、相対パスが原因のことがあります。

下層ページで壊れやすい例
<link rel="stylesheet" href="assets/css/style.css">

/about/ のような下層ページから見ると、/about/assets/css/style.css を探してしまうことがあります。

サイト全体で共通のCSSを読み込むなら、ルート相対パスにする方がわかりやすい場合があります。

ルート相対パスで指定
<link rel="stylesheet" href="/assets/css/style.css">

ローカルでは見えるが本番で見えない原因

ローカル環境では表示されるのに、本番環境で表示されないことがあります。

よくある原因は次の通りです。

  • ファイルをアップロードしていない
  • ファイル名の大文字小文字が違う
  • パスがローカル環境前提になっている
  • 日本語やスペースを含むファイル名を使っている
  • 本番環境の公開ディレクトリが違う
  • キャッシュが残っている

本番環境では、ファイル名の大文字小文字が厳密に扱われることがあります。

Main.jpg と main.jpg は別ファイルとして扱われる可能性があります。

パス指定で困った時の確認順

画像やCSSが読み込まれない時は、次の順番で確認します。

  1. Networkタブで404になっていないか見る
  2. ブラウザが探しているURLを確認する
  3. そのURLに実際にファイルがあるか確認する
  4. HTMLやCSS内のパス指定を確認する
  5. ファイル名の大文字小文字を確認する
  6. アップロード漏れがないか確認する
  7. キャッシュを無効化して確認する

パスのトラブルは、感覚で直そうとすると迷いやすいです。

ブラウザが実際にどのURLを取りに行っているかを見ると、原因が見つけやすくなります。

この章のまとめ

  • パスは、ファイルやページの場所を指定するための書き方
  • 相対パスは現在のファイル位置を基準にする
  • ルート相対パスはサイトのルートを基準にする
  • CSSから画像を読む時は、CSSファイルの場所が基準になる
  • ローカルでは動いても、本番では大文字小文字やアップロード漏れで壊れることがある
  • パスの確認には、DevToolsのNetworkタブが役立つ