相対パスと絶対パス、サイトルートの使い方とデメリットまとめ

相対パス、絶対パスとは

webサイトやブログを作る時に、
「相対パス」「絶対パス」という言葉をよく耳にすると思います。
でも、初めてwebサイトを作る人にとっては
「なにそれ？？」って感じなんですよねｗ

「相対パス」「絶対パス」っていうのは簡単にいうと、
画像やリンク先ページを表示する時に書くurlの書き方の事だと考えて下さい。

例
リンク先ページ名

例えばwebサイトにリンクを貼る時、上のように書きますよね。
この場合でいうと「http://www.yuu-diaryblog.com/」の部分が
「絶対パス」「相対パス」と呼ばれる部分になります。
ちなみに「http://www.yuu-diaryblog.com/」と記述した場合、
絶対パスでURLを記述したということになります。

こんな感じに画像やリンク先ページを表示する時に
「絶対パス」「相対パス」を使います。
なので基本的には「URLの記述の仕方」の事を
「絶対パス」「相対パス」と呼ぶんだな、と考えておけば大丈夫です。

では「相対パス」「絶対パス」をどこで使うのか、
それぞれの使い方やデメリットとメリットを紹介していきますね。

相対パスの使い方

相対パスとは
「相対パスを記述するファイルを基準とした指定方法」の事をいいます。

簡単にいうと、相対パスを記述したファイルより上のurlを
省略することができるよ！ってこと。
といっても、これだとすっごい意味不明ですよねｗ
なのでまずは下を見て下さい。

「http://www.yuu-diaryblog.com/index.html/image/img.jpg」

例えば上のような画像のurlがあるとします。
この画像をindex.htmlというページに表示する場合は、
下のように書きますよね。

例 [img src=”http://www.yuu-diaryblog.com/index.html/image/img.jpg”]

でもこんな感じにURLを全部入力しても
コードが長くなっちゃいますし面倒です。こんな時に相対パスを使います。

同じ階層とは
上の画像でいうと「index.html」「style.css」「image（フォルダ）」は、3つとも同じフォルダ（mysite）に入っている。
このように同じフォルダに入っている事を「同じ階層にある」という。

「index.html」「style.css」「image（フォルダ）」を1つ目の階層とした場合、その下の階層は「img.jpg」ということになる。
ちなみに階層の構造はftpソフトなどを使うとすごいわかりやすいです。

上の画像の場合index.htmlに相対パスを使うので
index.htmlが基準となります。

相対パスを使うと基準となったファイル以上のurlを
省略することができます。
なので「http://www.yuu-diaryblog.com/index.html」の部分を
省略することができるので、下のように書くことができます。

[img src=”フォルダ名/ファイル名”]

相対パス書き方

[img src=”image/img.jpg”]

上のように書くと、
index.htmlと同じフォルダ（この場合mysiteというフォルダ）に入っている、
imageというフォルダ内にあるimg.jpgを読み込みますよ！
という意味になります。
つまり相対パスを使うと、
相対パスを記述したファイル以上のurlを全部省略できるよ！ってことです。

相対パス書き方（同じ階層の場合）

[img src=”img.jpg”]

この場合index.htmlと同じ階層（同じフォルダ）にある、
imageというフォルダ内のtest.htmlを読み込むよ！
って意味になります。
これもindex.htmlに相対パスを使うのでindex.htmlが基準となって
「http://www.yuu-diaryblog.com/index.html/image/test.html」の
「http://www.yuu-diaryblog.com/index.html」部分を省略できるということです。

ちなみに上で紹介してきたような、基準となるファイルと同じ階層のフォルダ内に
読み込みたいファイルがある場合は、下のような書き方でもokです。

相対パス書き方2

[img src=”./image/img.jpg”]
–画像の場合–

相対パス書き方2

[a href=”./image/test.html”]ページ名[/a]
–リンクの場合–

相対パスを使うファイル（基準となるファイル）より上の階層（フォルダ内）に
読み込みたいファイルがある場合は、上の画像のように「../」を付けます。

上の画像の場合でいえば、相対パスを使うファイルindex.htmlの1つ上の階層に
読み込みたいファイルimg.jpgがあります。
なので「../」を1つimg.jpgの前につけるわけです。

相対パス書き方（上の階層の場合）

[img src=”../img.jpg”]
これでindex.htmlの1つ上の階層にあるimg.jpgを読み込むよ！
って意味になります。

そして1つ上の階層のフォルダ内に読み込みたいファイルがある場合は、
「../フォルダ名/ファイル名」のように書きます。

相対パス書き方（上の階層のフォルダ内）
[img src=”../image/img.jpg”] これで1つ上の階層にあるimageフォルダ内のimg.jpgを読み込むよ！
って意味になります。ちなみに読み込みたいファイルが
相対パスを使うファイルの2つ上の階層にある場合は「../」を2つ使います。

相対パス書き方（2つ上の階層）
[img src=”../../image/img.jpg”]
こんな感じで3つ上の階層であれば「../」を3つ、
4つ上であれば4つというような感じで増やしていけばいいだけです。

「複雑すぎて意味不明なんだけどｗ」ってもし思ったら
「../」=「フォルダ」だと思ってください。
簡単にいうと相対パスを使うファイルの上にあるフォルダの数だけ
「../」を付ければいいんです。

まぁ、最初はわかりずらいので「../」を適当な数だけ付けて見て下さいｗ
もし違ってても表示されないだけなんで
すぐ直せます。
何回もやってればそのうち嫌でも覚えちゃいますｗ

あと注意点なのですが、相対パスを使うファイルが基準のファイルになります。
なのでcssファイルで相対パスを使えばcssファイルが基準、
htmlファイルならhtmlファイルが基準というようになりますので、忘れないで下さいね。

といっても「../」の付け方が間違っていれば読み込まれないだけなんで、多分すぐ気付けます。

相対パスのメリット

相対パスを使うメリットは、ローカルにあるhtmlファイルを開くだけで
web上にアップした時と同じ形になるってことです。
つまりテストがしやすいってこと。

それと記述を省略できるので短くて済みます。
なのでその分ファイルのサイズが小さくなるので、
ページの表示速度が向上します。

あとメリットといえばドメイン（サイトのURL）が万が一変わったとしても、
パスを書き換える必要がないってくらいです。

ローカルとは
今htmlファイルを持っているならダブルクリックしてみて下さい。

そうするとネットに繋がっていない状態で、htmlファイルがブラウザで（画面上で）どういう様に表示されるか見れます。

という事は、ネット（サーバー）にアップする前にテストすることができるわけです。
つまりローカルファイルとは自分のパソコンに保存されているファイルの事をいいます。

相対パスのデメリット

相対パスの一番のデメリットは、サイトが大規模になってくると
ファイルの位置がわからなくなるってとこです。
簡単にいうと何個「../」を付ければいいかわかりづらくなるわけですｗ

一人でweb制作してればまだいいんですが、
複数で制作するとなるとすっごくわかりづらくなることもあります。
そしてあまりないと思いますが、
サイトの構成を変えた場合リンク切れを起こす可能性が高くなります。

デメリットは大体こんな感じです。

絶対パスの使い方

ここからはめっちゃ簡単です。
ややこしく感じるのは相対パスくらいで絶対パスは
超簡単です。

絶対パスというのは、urlをそのまま全部入れるだけのやつの事をいいます。
つまりファイルがどの位置にあっても、
urlを全部入れればokという事。
例えば「http://www.yuu-diaryblog.com/index.html/image/img.jpg」
のようなurlであれば下のように記述します。

絶対パス書き方
[img src=”http://www.yuu-diaryblog.com/index.html/image/img.jpg”]

こんな感じでurlを何も考えずに全部入力するだけなんで、
めっちゃ楽ですよねｗ
ですが絶対パスはあまり使う所がないんです。

無駄に記述が長くなりますし、
わざわざ他のサーバーから画像とかを持ってくることもないですよね。v 必ず絶対パスを使う所といったら、
外部サイトとリンクを貼るときくらいではないでしょうか。

絶対パスのメリット

メリットはサイトの構成を変えても100%リンク切れを起こさないところです。
ただしドメイン（url）変更したら、
もちろんリンク切れします。

あと絶対パスを使うメリットっていうと、なんだろうｗ
思い浮かびませんｗ

絶対パスのデメリット

絶対パスのデメリットは記述が無駄に長くなって、
ファイルのサイズが大きくなるとこです。

ファイルのサイズが大きくなればページの表示速度は落ちてしまいます。
これはseoを考えると良くないです。
そして訪問者にとってもストレスが溜まるサイトになりますよね。

あと最大のデメリットといったら
絶対パスを使うメリットがない所ですかね。

ルートパスの使い方

ルートパスはサイトルートパスとも呼ばれてます。
このサイトルートパスは、大規模サイトによく使われることが多いです。
例えば大型サイトになると階層がすごい深くなる事があります。