ホーム 技術ネタ

絶対パスと相対パスまとめ Win/Mac

パスとは

パスとは、簡単に言ってしまうと、ファイルやディレクトリの住所のことです。「パスを示す」とは、そのファイルやディレクトリが現在、正確には何処の位置に存在しているのかを記述する行為のことです。例えば、index.htmlからimgタグを使ってapple.imgを読み込んで、クロームなどのブラウザでindex.htmlを実行し、画像を表示したいと思ったとします。そのようなことがしたい場合は、imgタグの中のsrcapple.imgが存在している場所を、正確にパスとして示さなければいけません。こんな風に。<img src="/home/user/apple.img">

相対パスとは

まず、例えば、index.htmlapple.imgというファイルがあったとして、index.htmlでこのように記述されたコードは相対パスと言います。<img src="apple.img">。何故なら、明らかにこのような書き方をフルパスとは言わないからです。(後ほど絶対パスに関して説明をしますが)このコードを正確に実行するためには、index.htmlapple.imgが同じ場所になければいけません。同じ場所というは、簡単に言えば自分のパソコンの中のデスクトップに、index.htmlapple.imgが二つある状態です。つまり、相対パスとは、自分(呼び出す側)の現在の位置から見た、目的のファイルまでのパスの記述のことを言うのです。自分のパソコンの中のデスクトップに、index.htmlapple.imgが二つ同じ場所にある状態であれば、わざわざパスを指定しなくても、<img src="apple.img">index.htmlapple.imgを発見することができます。

例えば

チュートリアルをしてみましょう。例えば、自分のパソコンのデスクトップにindex.htmlがあるとしますよ。更に、自分のパソコンのデスクトップにapple.imgがあるとします。そのような状況下では、下記のようなコードを実行することで、画像が表示されます。これが、相対パスです。相対パスというのは、自分(ここではindex.html)から見た、目的のファイルまでのパスということです。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<img src="apple.img">
</body>
</html>

もう一つ

さらに、例えば、自分のデスクトップのindex.htmlがあるとします。そして自分のデスクトップにaimgというフォルダがあるとします。(今回はファイルではなく、フォルダです)そして、imgというフォルダの中にapple.imgがあるとします。そのような状況下では、下記のようなコードを書くことで、画像が表示されます。<img src="img/apple.img">ここの記述に注目してください。これは、imgフォルダの中の、apple.imgということです。Unix系統のOSでは、ファイルの階層を区切るのに/を使います。index.htmlには、imgというフォルダは見えていますが、apple.imgという画像ファイルは見えません。同じ場所にないからです。なので、img/apple.imgこのようにして、同じ階層にあるimgを先にしてして、/で階層を一段下更に指定して、apple.imgという画像ファイルを見つけるのです。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<img src="img/apple.img">
</body>
</html>

絶対パスとは

絶対パスとは、あるディレクトリの絶対的な位置です。最初から最後まで記述した形です。Winならば"C"、macならば"/"からそのファイルまでのパスをを記述するのが絶対パスです。

winで絶対パスと相対パスを比較

path_windows.PNG

絶対パス

C:\home\desktop\vine.txt

自分が”usr”フォルダにいる(usr フォルダを開いている)状態で、相対パスを記述すると、次のようになります。 ここで、usr からvine.txt へ向かうには、一度は根である”c:”へ戻り、経由しなければなりません。 1つ上の階層へ戻る時のパスの記述は、”..\”と表します。

相対パス

..\home\desktop\vine.txt

macで絶対パスと相対パスを比較

path_linux.PNG

絶対パス

/home/desktop/vine.txt

自分が”tool”ディレクトリにいる状態で、相対パスを記述すると、次のようになります。

相対パス

../../home/desktop/vine.txt

参照

絶対パスと相対パス

Pocket
LinkedIn にシェア



新規webサービスの開発の依頼ならoffテク⭐️

低コストで、Reactなどモダン言語での新規webサービス開発を承ります

-ホーム, 技術ネタ
-,

Copyright© off , 2020 All Rights Reserved Powered by AFFINGER5.