HTML

意外と知らない!?相対パスの書き方について簡単に解説!

HTML

 

今回は、階層構造を表す相対パスの書き方について簡単に解説したいと思います。

よし
よし
相対パスの書き方はどのプログラミング言語でも使うので、この機会に覚えましょう!

相対パスとは

相対パスとはファイルの所在を表すパスの書き方の一種で、記述されているファイルから見た位置関係を示しています。

簡単に言うと、今いる階層を基準にして、目的ファイルがどこにあるのかを伝えます。

よし
よし
もう一つの書き方として、絶対パスと呼ばれれるものがありますが今回は省略します!

相対パスの書き方

例1

相対パス

上記のような階層構造のファイルがあるとします。

そして現在「kiwi.js」ファイルにいると仮定します。

そこから「apple.js」ファイルに移動したい場合は、「./apple.js」と記載します。

「./」は、相対パスが書かれているファイルと同じディレクトリを意味しています。

例2

相対パス

再び「kiwi.js」にいると仮定します。

そこから「banana.js」に移動したい場合は、「./yellowfruits/banana.js」と記述します。

よし
よし
まずは同じ階層の「yellowfruitsフォルダ」に行き、そこから「banana.jsファイル」に進んでいるね! 

例3

相対パス

再び「kiwi.js」にいると仮定します。

そこから「banana.js」に移動したい場合は、「../yellowfruits/banana.js」と記述します。

「../」は、1つ上の階層を表しています。

 

詳しく見ていくと、「../」で1つ上の階層に行き、そこから「yellowfruitsフォルダ」に進んでいます。

その後、「banana.js」に進んでいます。

 

 

今回は相対パスの書き方について簡単に説明しました。

どのプログラミング言語でも使う知識なので、この機会にぜひマスターしましょう!