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

s41

webサイトを作る時に100%使うのが、相対パス、絶対パス、そしてサイトルートパス(ルートパス)ですよね。 でも、初めてホームページやブログを作る時って「相対パス?絶対パス?(´・ω・)?」「パスって何?どれ使うの?」ってなっちゃいます。 というか私はそんな感じになっちゃいましたw

なのでこのページでは「相対パス」「絶対パス」とは何なのか。 そしてそれぞれのパスの使い方とデメリットを紹介していきます。

目次
相対パス、絶対パスとは
まとめ

相対パス、絶対パスとは

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

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

<a href="http://www.yuu-diaryblog.com/">リンク先ページ名</a>

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

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

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

相対パスの使い方

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

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

「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が基準の場合-->

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

同じ階層にあるファイルを読み込む場合の相対パス

同じ階層(同じフォルダ内)にあるファイルを読み込みたい場合は、下のように書きます。

<img src="img.jpg">
<!--index.htmlが基準の場合-->
相対パスでリンク先を指定する方法

リンク先のページを相対パスで指定する場合も使い方は同じです。 index.htmltest.htmlへのリンクを貼りたい場合は下のように書きます。

<a href="image/test.html">ページ名</a>
<!--index.htmlが基準の場合-->

この場合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です。

<img src="./image/img.jpg">
<!--画像の場合-->
<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つ使います。

<img src="../../image/img.jpg">

こんな感じで3つ上の階層であれば「../」を3つ、4つ上であれば4つというような感じで増やしていけばいいだけです。

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

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

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

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

相対パスのメリット

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

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

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

ローカルとは

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

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

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

相対パスのデメリット

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

一人で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を何も考えずに全部入力するだけなんで、めっちゃ楽ですよねw ですが絶対パスはあまり使う所がないんです。

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

絶対パスのメリット

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

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

絶対パスのデメリット

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

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

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

ルートパスの使い方

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

ルートパスを使うような大規模サイトの階層構造

こんな感じの構成でimg.jpgを相対パスで読み込もうとすると下のようになります。

<img src="../../../image/img.jpg">

めちゃ長いですよねw そしてわかりづらいw なのでこういう大規模サイトを作る時には、サイトルート相対パスを使います。

<img src="/image/img.jpg">

書き方は簡単で上のように「/」を付けるだけです。

例えば相対パスで「../」が何個ある時でもサイトルート相対パスなら「/」を付けるだけでokです。 ちなみに「/」は一番上のディレクトリ(フォルダ)の事を意味してます。 上の画像でいうとmysiteフォルダのことです。

「わかんないw」ってときは「../」の代わりに「/」を1つ付けるだけでokなんだな!って思って下さい。

<img src="../../../../image/img.jpg">
<img src="../../image2/img.jpg">

相対パスで上のような感じの時は、サイトルート相対パスで書くと下のようになります。

<img src="/image/img.jpg">
<img src="/image2/img.jpg">

こんな感じでサイトルート相対パスなら階層を気にせず記述することができるので、とっても楽ちんですw

サイトルートパスのメリット

サイトルート相対パスのメリットは階層を気にせず、誰が見てもわかりやすい所ではないでしょうか。

相対パスだとわかりずらい、でも絶対パスは使いたくないって時はオススメです。 それと同じパスでどこのページからでも読み込めるので、ページをコピペで量産する時すごい楽です。

サイトルートパスのデメリット

デメリットは、ローカルでhtmlファイルを開いてもcssが適用されてない。 画像も見えない・・・。って所です。

まとめ

いかがでしたでしょうか?

それぞれのパスの意味と使い方も分かったと思いますが、結局どのパス使うのが一番いいの?って思いますよね。 とりあえずは相対パス、サイトルート相対パスのどちらかを使ってれば間違いないです。

ファイルのサイズを抑えるためにも基本的には絶対パスは使わない方がいいです。 ただグーグルは絶対パスを推奨してます。

可能な場合は、相対リンクではなく絶対リンクを使用します(たとえば、サイト内の別のページにリンクするときに、mypage.html だけではなく www.example.com/mypage.html とします)。

クロールが完了できなかった URL のエラー – Search Console ヘルプ

ですがこれは検索エンジンのスパイダーが、正常にサイトをクロールできるように絶対パスを推奨してるわけです。 つまりエラーを起こさなければ、どんなパスでも問題ないという事です。

ちなみ私がSEO会社の実績のある方から教わった方法では、topページへのリンクは絶対パス それ以外は、相対パスかサイトルートパスを使った方が良いっていうふうに教わりました。 (詳しくはseoの記事で紹介)

ですが私は静的サイトでのみ、こういうようにしてます。 動的サイトは、絶対パスでurlを生成するように設定します。

動的urlで相対パスとかを使うのは、何となくエラー起こしそうで怖いんですよねw(他にも理由がありますが)

※静的・動的とは自動生成されるかされないかということ。

パスの使い分けはこんな感じなのですが、サイトの構成やドメインを変える時だけは気を付けて下さいね。 あと静的サイトで全部絶対パスにするのは、やめた方がいいですよ。 ファイルサイズも大きくなりますし、ドメイン変更した時に地獄を見ることになりますww

以上、「絶対パス、相対パス、ルートパスについて」でしたー(^^♪