【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

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

ということは、2つ上のディレクトリは「../../」となって、3つ上なら「../../../」になるということさ。

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

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

絶対パス ルートディレクトリから順に書いていく。区切りはスラッシュのみ。(場合によっては¥で表現されることもある。)
相対パス あるファイルから見て目的のファイルはどこにあるのか書いていく。ドットとスラッシュによって記述する。

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

記号 意味
/ 一個下のディレクトリ、またはフォルダ
./ 現在のディレクトリ
../ 一個上のディレクトリ
スポンサーリンク