【初心者向け】相対パスをやさしく解説｜絶対パスとの違いと正しい書き方

はじめに

Web開発や静的サイト制作、フロントエンド学習では、ファイル参照パスの理解が重要です。

特に相対パスは、プロジェクト構成やファイル配置によって挙動が変わるため、正しく理解して使い分ける必要があります。

本記事では、相対パスの定義、絶対パスとの違い、基本的な書き方、よくあるミスの回避策、コード内での使用例までを丁寧に解説します。
これを理解すれば、パスによる表示崩れや読み込みエラーを防ぎ、安定した動作環境を構築できるようになります。

相対パスとは何か

相対パスの定義

相対パスとは、現在のファイルを基準に他のファイルへのパスを指定する方法です。

例えば、同じディレクトリにあるファイルを参照する場合や、階層をさかのぼってファイルを指定する場合に用います。

相対パスを使うことで、プロジェクト内のファイル構成に柔軟に対応でき、ディレクトリ構造が変わった場合でも、参照先の修正が最小限で済み、効率的に管理できます。

絶対パスとの違い

絶対パスは、サイト全体の基準となる一番上のフォルダ（最上位フォルダ）から固定の場所を指定する方法です。
どのページからでも同じ場所のファイルを参照できるのが特徴です。

一方、相対パスは、今開いているファイルの場所を基準に指定する方法です。

相対パスは自由度が高く、ファイル構成に合わせて柔軟に使えます。
ただし、フォルダの階層が深くなると混乱しやすいため、整理しながら使うことが大切です。

相対パスの書き方と基本ルール

「./」「../」の意味

相対パスで最も基本となるのが「 ./ 」と「 ../ 」です。

• ./：現在のディレクトリを示します
• ../：一つ上の階層を示します

下記のディレクトリ構成を例に相対パスの書き方を見ていきましょう。

project/
├── pages/
│   ├── index.html       ← 現在のファイル
│   └── css/
│       └── style.css    ← index.html から見て ./css/style.css
└── images/
    └── logo.png         ← index.html から見て ../images/logo.png

例えば、index.html ファイルにて、同じディレクトリ内にある CSS フォルダの style.css ファイルを参照する場合は次のように書きます。

<link rel="stylesheet" href="./css/style.css">

一方、ひとつ上の階層にある images/logo.pngを参照する場合は、次のように書きます。

<img src="../images/logo.png" alt="ロゴ">

ポイントは、「自分の今いる場所」と「目的のファイルの場所」の階層差を正確に把握することです。

パスの区切りと拡張子の扱い

ファイルパスはスラッシュ / で区切ります。

また、拡張子を省略できる場合と、ブラウザが自動的に補完できないため省略できない場合があります。

拡張子あり
<script src="./js/app.js"></script>

拡張子なしだとエラーになる場合あり
<script src="./js/app"></script>

エラーの防止と保守性向上の観点から、基本的には拡張子まで記述することで正しいパス指定を心がけましょう。

JavaScriptでの相対パス例

JavaScriptモジュールやファイル読み込みでの使い方

JavaScriptでモジュール（処理のまとまり）やファイルを読み込む場合も、相対パスを使うと柔軟に管理できます。

下記のディレクトリ構造を例に考えます。

project/
├─ js/
│  ├─ main.js
│  └─ utils/
│     └─ helper.js
└─ config/
   └─ settings.js

この場合、main.js から helper.js を読み込む相対パスは以下の通りです。

import { func } from './utils/helper.js';

もしさらに上位ディレクトリにあるファイルを参照する場合は、../ を使って階層をさかのぼって指定しましょう。

import { config } from '../config/settings.js';

このように、JavaScriptでも相対パスを正しく使うことで、モジュールやファイルを確実に参照することができます。

よくあるミスとトラブルシューティング

パスの指定ミスで起こるエラー

相対パスを使用する際は下記のようなミスが起こりやすいため、パスの指定時は十分注意しましょう。

これらを確認するには、ブラウザのコンソールやネットワークタブでエラーを確認し、正しい階層を把握することが重要です。

こうした習慣を身につけることで、開発中のトラブルを未然に防ぐことができます。

絶対パスと相対パスの混同による問題

絶対パスと相対パスを混同して使用すると、開発環境と本番環境で挙動が変わることがあります。

例えば、ローカル環境では動作しても、本番サーバー上では読み込めないケースがあります。

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

この例では、画像は絶対パスで参照され、CSSは相対パスで参照されています。

サーバー環境によっては /images/photo.jpg が存在せず、画像が表示されない可能性があります。

相対パスを使用する場合は、プロジェクト内のディレクトリ構造を基準に統一することで、環境間の不整合を防げます。

相対パスが適している場面と絶対パスが適している場面

ディレクトリ構造が固定される場合は相対パス

ディレクトリ構造が安定している場合、相対パスを使うことでサイト内のリンクや画像、CSS、JavaScript などを効率的に参照でき、管理も容易になります。

CDNや外部リンクでは絶対パスを使う

外部サーバーのリソースを参照する際に相対パスを使うと、URL の基準が変わって読み込みエラーが発生することがあるため、絶対パスで正確に指定する必要があります。

相対パス使用時のポイント

ここまでで、相対パスの基本や具体的な使用方法を確認してきました。改めて、相対パスを使うときに意識したいポイントをまとめます。

これらのポイントを踏まえて相対パスを使用することで、HTMLやCSS、JavaScriptでのファイル読み込み時にエラーが発生しにくくなります。

正しい理解は、プロジェクトの規模が大きくなった際にも大きな力になります。

まとめ

本記事では、相対パスの基本概念から書き方のルール、実践例までを丁寧に解説しました。

相対パスを正しく理解することで、表示崩れや読み込みエラーを防ぎ、安定したサイト運営が可能になります。
特にディレクトリ構造を意識した正しいパス管理は、開発効率と保守性の向上に直結します。

こうしたWeb制作についての技術を学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

初歩から段階的に学び、コーディングスキルを着実に身につけていきましょう。