【3分で理解】絶対パスと相対パスの書き方

「え、君とお食事？絶対パスだわ」

と言われたので、絶対パスと相対パスについての説明を一人わびしく、でもわかりやすく紹介します。

パスとは？

パスとは、目的のファイルがどこにあるのか示す文字列のことです。

英語だとpathと書き、意味は「道」です。
つまり、目的のファイルまでの道のりのことをパスというのです。

コンピュータに、「このファイルはここにあるよ」と、道案内をしてあげるのがパスの役割なのです。
ここで重要になってくる考え方は、階層構造になっているということで、階層の一番上から目的のファイルまでを示したのが絶対パス、階層構造の中のとあるファイルから目的のファイルまでの道のりを示したのが相対パスです。

まずはディレクトリを理解する

パスを理解する前に、ディレクトリとは何かを理解する必要があります。
ディレクトリとは、フォルダのことです。実はフォルダはWindowsでの言い回しであって、パソコン全般ではディレクトリと呼ばれています。

ディレクトリの中に複数のファイルをまとめておくことができます。また、ディレクトリの中にディレクトリを入れることができます。
それが大規模になってくると、ビルの様に階層構造を形成します。

例えば、my-projectというディレクトリの中にimagesとstylesというディレクトリが入っています。
また、同じ階層にindex.htmlというファイルが置いてあります。
imagesとstylesの中には、それぞれ写真ファイルとscssファイルが入っています。（scssファイルとは、スタイルを整えるcssの兄貴のような種類のものです）

my-projectディレクトリを1階とすると、images, index.html, stylesは地下一階にあり、写真ファイルとscssファイルは地下二階にあるようなイメージです。

絶対パスとその書き方

絶対パスとは何か

絶対パスとは、一番上のディレクトリから順に記述する書き方です。

絶対パスの書き方

例として、図の、_mobile.scssというファイルの絶対パスを書いてみましょう。

my-project/styles/_mobile.scss

簡単ですね。一つ下の階層に行くごとにスラッシュを入れます。
それを一番上のディレクトリ（ルートディレクトリ）から順に書いていくだけです。

思ったより簡単なんですねぇ！

相対パスとその書き方

相対パスとは何か

相対パスとは、今いる場所を基準に、目的のファイルがどこにあるのか記述する書き方です。

相対パスの書き方

では、図のindex.htmlから見たpicture2.jpgのパスを書いてみましょう。

images/picture2.jpg

簡単ですね。まず、imagesディレクトリが同じ階層にあるのでそのままimagesと記述します。そこから一個下に下るので、スラッシュを書いてから目的のpicture2.jpgを書きます。

では、_tab.scssから見たpicture1.pngの相対パスはどうなるでしょうか？

../images/picture1.png

となります。最初の「../」は「一つ上のディレクトリ」を意味します。ちなみに「./」は現在のディレクトリを指します。

絶対パス、相対パスのまとめ

絶対パスは一番上から、相対パスはあるファイルを基準に書きました。

また、以下に相対パスを書く時の記号とその意味をまとめます。