🔰
【初心者向け】絶対パスと相対パスの違いをわかりやすく解説！
Web制作を始めたばかりの方がつまずきがちな「パス」の書き方。
特に絶対パスと相対パスの違いは、最初はややこしく感じるかもしれません。
この記事では、道案内にたとえながら、実例や図を使ってわかりやすく解説します！
パスとは？ざっくり言うと「ファイルの場所の指定」
HTMLやCSS、画像、JavaScriptなど、いろんなファイルがある中で、
「どこにあるのか？」を教える道案内が「パス」です。
たとえば、HTMLで画像を表示するコードはこう書きます。
html
<img src="images/photo.jpg">
このsrc="images/photo.jpg"が「パス」です。
絶対パスとは？
いつでも正確な「番地付きの住所」
絶対パスは、「サイトの一番上（ルート）」からの完全な道順です。
例：
html
<img src="/images/photo.jpg">
この/images/photo.jpgは、「ルート直下のimagesフォルダ内のphoto.jpg」を意味します。
特徴まとめ
| 特徴 | 内容 |
|---|---|
| 場所 | サイトの最上部（ルート）から |
| 安定性 | どのページからも正しくアクセスできる |
| 使用例 | サイト全体で使う共通ファイル（CSS、画像など）に最適 |
相対パスとは？
今いるファイルからの「近道」
相対パスは、今いるHTMLファイルの場所から見て、どこにあるかを示す方法です。
例：
html
<img src="../images/photo.jpg">
これは、「1つ上の階層にあるimagesフォルダの中のphoto.jpg」を意味します。
特徴まとめ
| 特徴 | 内容 |
|---|---|
| 場所 | 今いるファイルの位置から |
| 柔軟性 | 移動やコピーに強い |
| 使用例 | 隣接ファイル、サブページ間のリンクなどに便利 |
フォルダ構成の図解（簡易）
/（ルート）
├── index.html
├── about.html
├── images/
│ └── photo.jpg
└── blog/
└── article.html
index.htmlから画像を表示
html
<img src="images/photo.jpg"> ← 相対パス
<img src="/images/photo.jpg"> ← 絶対パス
blog/article.htmlから画像を表示
html
<img src="../images/photo.jpg"> ← 相対パス
<img src="/images/photo.jpg"> ← 絶対パス
実例集（HTML・CSS・JS）
① CSSを読み込む（絶対パス）
html
<link rel="stylesheet" href="/css/style.css">
② CSSを読み込む（相対パス）
html
<link rel="stylesheet" href="../css/style.css">
③ JavaScriptファイル（相対パス）
html
<script src="js/script.js"></script>
④ 画像の表示（絶対パス）
html
<img src="/assets/logo.png" alt="ロゴ">
⑤ HTMLから別ページへリンク（相対パス）
html
<a href="../about.html">会社情報はこちら</a>
よくある間違い
| ❌ 間違い | ✅ 正しい |
|---|---|
img src="image/photo.jpg"（"image" とミス） |
img src="images/photo.jpg" |
../の数が合ってない |
フォルダ構成に合うように../を調整する |
/を省略してルート指定してるつもり |
/は「絶対パス」の印！ |
まとめ：どう使い分ける？
| 状況 | おすすめのパス |
|---|---|
| 共通の画像やCSS | 絶対パス |
| 隣のHTMLへのリンク | 相対パス |
| ファイルの移動が多いプロジェクト | 相対パス |
| サイト構造が安定しているとき | 絶対パス |
おまけ：便利な豆知識
-
./は「今いる場所（カレントディレクトリ）」 -
../は「1つ上の階層」 -
/から始まると、それは絶対パス - ファイル構成が変わると相対パスは壊れやすい
迷ったら、まずは「今いるHTMLがどこにあるか」を考えてみましょう！
図を描いて確認すると、パスの理解がグッと深まりますよ✨
Discussion