相対パスと絶対パスの記述おさらい!

階層が違うファイルを指定する時は、どう記述すればいいんだっけ？「CSS」で画像を指定したい時の相対パスは？そんな基本的な、「相対パス」や「絶対パス」について、ちょっと確認しておこうかなって人へ。

 ▼このような階層のサンプルがあるとします。

絶対パス

絶対パスとは階層の一番上（ルート階層）から任意のファイル場所までのパスを直線的に指定します。

例：「w.jpg」を絶対パスで指定する場合

 

または、「http://～」のようにURLのはじまりから、対象のファイルを指定することもできます。

例：「w.jpg」を絶対パスによるアドレスで指定する場合

 

相対パス

ある特定のファイルから、対象となるファイルの位置関係を辿るものが相対パスです。

以下のように記述します。

 

現在のファイルと同じ階層のファイルを指す場合

「./ファイル名」もしくは「ファイル名」

例：「main.html」から「y.jpg」を指す場合

 

ひとつ下の階層のファイルを指す場合

「./フォルダ名/ファイル名」

例：「main.html」から「z.jpg」を指す場合

 

ひとつ上の階層のファイルを指す場合

「../ファイル名」

例：「main.html」から「x.jpg」を指す場合

 

ふたつ上の階層のファイルを指す場合

「../../ファイル名」

例：「main.html」から「w.jpg」を指す場合

 

トップから直接ファイルを指す場合

「/フォルダ名/ファイル名」

例：「y.jpg」をトップ(ルート)から指す場合

 

CSSからの相対パス

CSSファイルから階層の違う場所にある画像を読み込んだりする際は以下のようになります。

例：「main.html」に読み込んでいる「style.css」に「x.jpg」を背景とする「クラス名(.sampleBox)」を指定する場合

 

どこのファイルから対象のファイルを指定したいのか？ということで「今、記述しているファイルはどこの階層にあるんだっけ？」「何故か画像が表示されない！」といったケアレスミスを失くすために、メモしておきます。