【相対パス】「./」と「../」の違いとは？

HTMLファイルを編集していると、相対パス（呼び出し元のファイルから見た、対象ファイルの位置）の書き方で「./」や「../」といった表現を見たことはないでしょうか？

「./」に関しては、あまり見る機会がないかもしれませんが、この2つの表現、意味をしっかりと理解していますでしょうか？

今回は、この2つの意味の違いについて解説します。なんとなく使用している方は、ご覧ください。

「./」も「../」も、相対パスを指定する際に使用する、特殊な表現方法です。「./」に関しては、昔の方で、癖で書いてしまう方がいるようです。

違いを一言で表すのであれば、どの階層を指しているかが違っています。

言葉だけだと、イメージが難しいと思いますので、画像付きで解説します。

上記の画像のように、htmlファイルとcssファイルが同じ階層にあるとします。この時、cssファイルを読み込ませたい場合、どのように書くべきでしょうか？

  <!-- パターン① -->
 <link rel="stylesheet" href="style.css">
  <!-- パターン② -->
 <link rel="stylesheet" href="./style.css">

書くと、こんな感じになります。パターン①も、パターン②も同じです。

「./」は今いるところを指すので、書いても書かなくても同じということになります。

上記の画像のように、topフォルダ内にhtmlファイルがあり、cssファイルは、1つ上の階層にあるとします。この時、cssファイルを読み込ませたい場合のバスは、下記のとおりになります。

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

1つ上の階層に読み込ませたいcssファイルがあるので、「../」を使い、1つ上の階層に上がることで、読み込ませることができます。

htmlの相対パスの書き方で、「./」を使うパターンはあまりないかもしれませんが、見かけたら、今回の記事の内容を思い出していただければと思います。