相対パスの書き方（特に`./`と `../`）を段階的に学ぶ記事

本記事の目的

• 相対パスの書き方（特に./と ../）がイマイチ掴めない人が段階的に理解できるようにするため（自分の備忘録）
• ルート相対パスは本記事では対象外

お詫び

「枝分かれ」や「階層」という表現が適切ではないかもしれません。あくまでイメージだと思っていただけると。

絶対パスと相対パスの違い

絶対パス

・ピンポイントで対象のファイルを指すことができる。

・但しフルパスを書く必要があり、ドメインがなくローカル環境で作業している状態などでは使用できない

相対パス

・現在のページを起点に辿るようにしてパスを指定する

・現在のページが属するフォルダ名を「../」と省略に近い形で書ける

・ドメインがなくてもパスが書ける

相対パスのルール（./と ../）

現在のページが属する階層やその上の階層は、フォルダ名をわざわざ書かなくても以下のように表せる。

• ./：現在の階層を表すが省略可能で通常は省略する
• ../：1つ上の階層を表す。
  • 2つ上：../../
  • 3つ上：../../../

現在の階層（同じフォルダ内）にあるファイル

./home.htmlでもいいが、./は通常省略するのでファイル名のみでOK。

相対パス：home.html

homepage
　┣ index.html（現在のページ）
　┗ home.html（対象）

1つ上の階層

相対パス：../

homepage（対象）
　┗ index.html（現在のページ）

2つ上の階層

相対パス：../../

top（対象）
　┗ homepage
　　┗ index.html（現在のページ）

枝分かれした別のフォルダのファイルを指定する場合

• 今までのように現在のページから辿るように../で階層を上がっていく。
• 枝分かれした別のフォルダなのでフォルダ名をしっかりと記述する。

1つ上の階層→枝分かれ先にあるファイル

相対パス：../sample.html

top
　┣ homepage
　┃　┗ index.html（現在のページ）
　┗ sample.html（対象）

1つ上の階層→枝分かれして1つの下の階層

相対パス：../sample/sample.html

top
　┣ homepage
　┃　┗ index.html（現在のページ）
　┗ sample
　　 ┗ sample.html（対象）

2つ上の階層→枝分かれして2つの下の階層

相対パス：../../sample/sample2/sample.html

top
　┣ homepage
　┃　┗ web
　┃　　┗ index.html（現在のページ）
　┗ sample
　　 ┗ sample2
　　 　┗ sample.html（対象）

同じ階層にある枝分かれしたファイルを指定する場合

ポイント：同じ階層だから頭に何もつけないでOK

同じ階層→枝分かれして1つ下の階層

相対パス：dummy/dummy.html

homepage
　┣ index.html（現在のページ）
　┗ dummy
　　┗ dummy.html（対象）

同じ階層→枝分かれして2つ下の階層

相対パス：dummy/dummy2/dummy.html

homepage
　┣ index.html（現在のページ）
　┗ dummy
　　┗ dummy2
　　　┗ dummy.html（対象）

以上です。

---

参考記事

• [絶対パス、相対パス、ルート相対パスをわかりやすく解説！まずはイメージをつかもう！ | D-FOUNT -大阪・京都のグラフィックデザイン／Webデザイン-](https://d-fount.com/absolute-path-and-relative-path/)
• [相対パスについて - HP作成講座](http://juen-cs.dl.juen.ac.jp/html/hp/03/02/explanation.html)