絶対パスと相対パス - hiyoko-programingの日記

◉ パス

リンクを設定する際に、

a 要素の href 属性にしているファイルの場所の記述のことをいう。

a 要素で HTML ファイルの場所を示すだけでなく、

img 要素で画像ファイルの場所を指定する場合や、

link 要素でCSS ファイルの場所を指定する場合など、

ファイルの場所はすべて「パス」で記述する。

ネット上にある HTML ファイルにアクセスするには、URLを指定する。

「 http:// ~~ 」や「 https:// ~~ 」で始まるファイルの指定を

『絶対パス』と呼ぶ。

現在のページから見て、アクセスしたい場所がどこにあるのかを

相対的に示す指定を『相対パス』と呼ぶ。

　● 同じフォルダにあるとき

　　　01.html から 02.html にリンクをするには「ファイル名」を指定する。

　　EX) 【01.html において】

　　反対に、

02.html から 01.html にリンクをするには「ファイル名」を指定する。

　　EX) 【02.html において】

● 1つ下のフォルダにファイルがあるとき

　　01.html から 02.html にリンクをするには「フォルダ名 / ファイル名」を指定する。

　　EX) 【01.html において】※aboutフォルダ下にあるとする

　　反対に、

02.html から 01.html にリンクをするには「.. / ファイル名」を指定する。

「 .. 」は１つ上の階層を表している。

　　EX) 【02.html において】※aboutフォルダと01.htmlが同じフォルダに存在する

● 2つ下のフォルダにファイルがあるとき

　　01.html から 02.html にリンクをするには「フォルダ名 / フォルダ名 / ファイル名」を指定する。

　　EX) 【01.html において】※aboutフォルダ-conceptフォルダ下にあるとする

　　反対に、

02.html から 01.html にリンクをするには「.. /../ ファイル名」を指定する。

「 .. 」は上の階層を上る分だけ（今回は2階層）表している。

　　EX) 【02.html において】※aboutフォルダと01.htmlが同じフォルダに存在する

● 異なるフォルダにファイルがあるとき

　　01.html から 02.html にリンクをするには「../ フォルダ名 / ファイル名」を指定する。「 ../ 」で階層を上った後、フォルダとファイルを指定する。

　　EX) 【01.html において】

　　　　　　　※aboutフォルダ下にあるとする

　　　　　　　※aboutフォルダとnew フォルダが同じフォルダに存在する

　　反対に、

02.html から 01.html にリンクも同様。

　　EX) 【02.html において】

　　　　　　　※newsフォルダ下にあるとする

　　　　　　　※aboutフォルダとnew フォルダが同じフォルダに存在する