Webサイトは複数ファイルの集合体
Webサイトは、1ページだけで構成されていることはない。
複数のWebページが集まって構成されている。
更に、そのWebページ内には、様々な画像が表示されている。
これらのファイルは全て、フォルダの中に階層構造を作って保存されている。
Webページ制作では、Webサイトがどのようなファイル構成、フォルダ構成になっているのか把握しておく必要がある。
フォルダの階層構造は、HTMLで「パス」を記述する際にも深く関係して来る。
フォルダの階層構造を理解するには、「パス」についての理解を深める必要がある。
「パス」とは、特定のファイルへの道筋のことをいう。
絶対パス
ファイルの位置を、最上位の階層から順番に表記する方法。
絶対パスでは、最上位に位置するフォルダから順に階層を降りて行き、最後のファイルまで辿り着くように表記する。
この際に、それぞれのフォルダの区切りとしてスラッシュ記号を入れる。
絶対パスの記述例
/top/next/index.html
絶対パスの特徴
メリット：表記が単純明快で分かりやすい。
デメリット：パスの表記が長くなる、記述したフォルダの一つでも名前の変更や移動をすると、フォルダ構成が一致しなくなる（階層構造の変化に対応出来ない）。
特別な理由がない限り、絶対パスを用いてのWebサイト制作はしない。
相対パス
ファイルの位置を、現在のフォルダからの差分で表記する方法。
階層中のあるフォルダを起点として、「その地点の一つ上にあるフォルダ」や、「今いるフォルダ」というように表記する方法。
「一つ上のフォルダ」は、2個のドットで表記する。
フォルダ名を直接記述しないので、フォルダ名に依存することがなくなる。
また、最上位のフォルダ名が何であっても、相対パスにはそのフォルダ名を記述することはないので、フォルダ名に依存せず、更に記述を短くすることが出来る。
相対パスの記述例
../next/index.html
相対パスの特徴
メリット：パスの表記が短くなる、階層構造の変化に対応しやすい。
デメリット：表記が複雑になって難しく感じることがある。
相対パスは、Webページ制作で標準的に使われる。
相対パスの表記
| index.html | カレントフォルダ（現在のフォルダ）にあるindex.html |
| ./index.html | 同上 |
| ../index.html | 1つ上のフォルダにあるindex.html |
| ../../index.html | 2つ上のフォルダにあるindex.html |
| ../next/index.html | 1つ上がり、nextフォルダに降りた位置にあるindex.html |
| …/index.html | 間違った表記 |
※カレントフォルダは、無指定または./で表記する。
※1つ上のフォルダは../で、2つ上のフォルダは../../で表記する。
※ドットを3個記述して2つ上のフォルダを指定することは出来ないので、間違えないように注意する。