パスとは？
パスは特定のファイルまでの道順のことです。特定のファイルへ辿りその情報を読み取るために必要です。
絶対パスとは？
絶対パスは誰が見ても変わらない絶対的な住所のようなものです。特定の住所は誰が見ても同じ場所を示しています。絶対パスも同様で誰がみても変わらない特定のファイルを辿る道順として使います。
ドメインを起点にパスを書く
ドメインはインターネット上の住所にあたります。ドメインがあると特定のWebページを容易に見つけることができます。絶対パスはドメインを起点に目的のファイルを指定します。
ファイルが実際に指定したフォルダに存在していないと何も読み込まれず表示されません。まずドメインからどのフォルダの階層に読み込みたいファイルがあるか把握しておきましょう。
絶対パスのメリット
- 目的のファイルの場所が分かりやすい。
- 外部リンクを貼る時に使える。
絶対パスのデメリット
- フォルダの階層が深くなればそれだけ記述が増えソースコードが長くなるので見づらくなりがち。
- サイトの引っ越し(ドメインの変更)を行なった場合、全てのリンクを修正しないといけない。
相対パスとは？
相対パスは自分からみた相対的な住所のようなものです。起点となるファイルから目的のファイルまでの道順のことです。
読み込みたいファイルとそれを表示したいファイルが同じ階層にあった場合、同じ階層にあるファイルはそのままファイル名を書くだけで良いです。
同じ階層を表すものに./(ドットスラッシュ)を使うこともできますが、省いても問題ありません。
これは同じ階層のフォルダの中のファイルを読み込む場合の書き方です。
図で表すと以下のようになります。
図ではindex.htmlを基準に同じ階層のimagesの中のsakura.jpgを読み込む場合です。
この図をソースコードで表すと以下のようになります。
<img src="images/sakura.jpg">このソースコードはindex.htmlに書きます。
そうすることでトップページにsakura.jpgの画像が表示されます。
ただしindex.htmlと同じ階層にimagesフォルダがあり、その中にsakura.jpgがあることが前提です。
読み込みの基準となるファイル(ここではindex.html)の上の階層に読み込みたいファイルがある場合は../(ドットドットスラッシュ)を使います。
これを使うことで一つ上の階層に上がることができ、そこに読み込みたいファイルがあれば上記のように../の後にファイル名を書きます。
読み込みたいファイルが2階層上にある場合は上記のように../../と2つ重ねます。
1階層上にあるフォルダの中に読み込みたいファイルがある場合は、一旦上の階層に上がるので../を書きます。
そして、その階層にあるフォルダ名を書き、その中の読み込みたいファイル名を書きます。
一度階層を上がってまた下がるので少しこんがらがりやすいかもしれません。落ち着いて考えて書いてください。
相対パスのメリット
- ファイルをインターネットに上げる必要がなく、ローカル環境での制作がしやすい
- 絶対パスに比べてパスが短く書ける
相対パスのデメリット
- 慣れないうちは起点ファイルから目的ファイルへ辿るのが少し難しい
- ファイルを別のフォルダに移すと、リンク切れになる