未経験でも転職出来る!!Web制作者になった元飲食店員が語るBLOG

  1. Blog
  2. これで完璧!絶対・相対・ルートパスの使い方

これで完璧!絶対・相対・ルートパスの使い方

どうも、Tommyです。

『パス』というのは、ファイル場所を示すものでとても大切な仕組みであり、その仕組みを理解することはWeb制作において必要不可欠なもので、また、避けては通れません。

ここでは、『絶対パス』『相対パス』の他に『ルートパス』について説明して行きます。※ここで出てくる図等はあくまでも例です。

絶対パスについて

絶対パスは、『http又はhttps』から始まるURLを使用したファイルの場所を指定する方法です。

常にURLを基準としてファイルの場所を示すので、例えば、『A.html』を表す場合『https://sitommy.com/Beginner/A.html』となります。

絶対パスは、住所みたいなものでどこから指定しようとも常に同じパスが示されます。この絶対パスを使用するのは、主に別のWebサイトのリンクを貼る時や、サーバーに存在するファイルを指定する時に限ります。
それ以外は設定しません。

相対パスについて

相対パスは、現在のファイルから目的のファイルまでの位置関係を指定する方法です。

基本的にWebサイトを制作しリンクを指定して行く時は、この相対パスを使用します。少し難しいところもありますが非常に重要ですのでしっかり理解して行きましょう。

まず、Webサイトはディレクトリーという構造でできています。同一階層という言葉があり、現在いるファイルと同じ階層を意味します。
その同一階層へのパス指定の記述方法が『./』となります。

例えば、『A.html』に現在いるとして、『A2.html』へのパスは『./A2.html』となります。また、『./』は省略できるため実際は、ただただ『A2.html』となります。この省略したパス設定が主流ですので、省略して使用して行きましょう。ただ、『./』のことも覚えてはいましょう。

次に、下の階層へのパス指定の記述方法が『/』となり、区切って行くことになります。

例えば、『B.html』に現在いるとして、『C.html』へのパスは『HTML/C.html』となります。まず、同一階層の『HTMLフォルダ』に移動し、そこから下に降るっといった感じになります。

次に、上の階層へのパス指定の記述方法が『../』となり、2つ上の階層の場合、『../../』となり、『../』を繋げることで上に登って行くことになります。

例えば、『D.html』に現在いるとして、『index.html(TOPページ)』へのパスは『../../../index.html』となります。

また、フォルダを跨いで『D.html』から『A.html』へのパスは『../../../Beginner/A.html』となります。

この相対パスの仕組みをしっかり理解し、ファイル指定しておくとローカル環境でもリンク等がきちんと機能するという大きなメリットがあります。是非、覚えましょう。

ルートパスについて

ルートパス(ルート相対パス)は、サーバールート直下から下層へ辿って指定する方法です。

ルートパスは、常に『/』から始まり、どの階層にファイルがあっても常に同じ表記となります。

例えば、『index.html』から『A.html』へのパスは『/Beginner/A.html』となります。

また、『index.html』から『D.html』へのパスは『/Code/HTML/XHTML/D.html』となります。

そして、『C.html』から『A.html』へのパスは『/Beginner/A.html』となり、先ほど『index.html』から『A.html』へのパスと全く同じとなります。

どの階層のファイルからでも『A.html』へのパスは『/Beginner/A.html』であり、変わることはありません。
絶対パスのように、常に表記は同じであり、相対パスのように柔軟な対応ができるのが、このルートパスなのです。

まとめ

では、なぜ絶対パスではだめなのでしょうか?
ルートパスと同じ常に表記は同じでも絶対パスは使用しない理由は、Web制作に置けるフローで絶対パスだと面倒なことになるためです。

Web制作をするに当たって、まず『テスト環境』という場所と『本番環境』という場所を作ります。
『テスト環境』というのは、まず開発をしチェックするための場所です。この『テスト環境』で問題がなければ『本番環境』へアップする。つまり公開するというフローがあります。

リンク全てを絶対パスに指定してしまうと『テスト環境』でリンクチェックする際、本番環境のリンク先へ飛んでしまうのです。なぜなら、絶対パスはURLを使用したファイルに直接飛ぶためです。

では、わざわざ『テスト環境』のための絶対パスに変更してリンクチェックするのか。決してしません。『テスト環境』と『本番環境』は常に同じソースであることが絶対なためそれぞれリンクが違っていたらチェックしている意味がないのです。

かといって、大規模なWebサイト制作の場合、相対パスで指定するのも汎用性がなくまたミスタッチが起こりやすくなる原因です。

ルートパスは、そのどちらの意見も考慮した最高なパス指定とされています。
テスト環境はテスト環境のルートになりますし、本番は本番のルートとして指定されています。そのため、書き換える必要もなく『テスト環境』と『本番環境』が常に同じソースであることができます。

ただ1つ、最高で最強なルートパスを使用するためには、超えなくてはならない壁が存在します。それは、環境設定をしないといけないことです。絶対パスや相対パスはローカル環境でも問題ないのですが、ルートパスは、サーバーにあげないと機能しません。そのため、ローカルサーバー環境を立てるか、FTPでサーバーにアップロードする必要があり少々めんどくさい。

めんどくさいけど、ワンステップ上のステージで学びたいのであれば環境設定は必須になってきます。今後、環境設定というのはたくさん出てきます。作業の効率を考えて良いものを使って行くためには、初めにそういっためんどくさいことをしなくてはいけないです。

ここで諦めず、是非ローカルに環境設定をしルートパスを扱えるようになって下さい。
ローカルサーバー環境について知りたい場合は、
・【ローカルサーバー環境】MAMP / XAMPPでローカルサーバーをたてようをどうぞ。
FTPについて知りたい場合は、
・【FTP】接続によるアップロード方法をどうぞ。

おまけ

いままで、『index.html』という名前が飛び交っていました。この『index.html』には少し理由があります。

実際の現場では、フォルダ名にそのページを表す名前を振り、htmlファイル自体には全て『index.html』と名前をつけます。今回例としてわかりやすいようにあえて、『A.html』や『B.html』とさせていただきました。

『index.html』と名前をつける理由として、『index.html』は省略できるということです。

つまり、TOPページからみて
絶対パスだと『https://sitommy.com/Beginner/』
相対パスだと『Beginner/』
ルートパスだと『/Beginner/』
というように短くシンプルにできます。

短くなれば、その分ミスが起こりにく、URLが綺麗に見えるといった様々な利点がありますので、是非覚えておいてください。