もう迷わない！絶対パス・相対パス・ルートパス

初心者の方はよくつまずくところではないでしょうか？はい、私もです。普段フレームワークに頼って開発をしているとよく理解していないままで済んでいましたが、CSSファイルを読み込む時に引っかかってしまったので、これを機に整理してしっかりマスターしてしまおう！という所存です。

パス(Path)

日本語にすると「道」ですね。その名の通り、目的のファイルがどこにあるのか道順を示してくれます。

<a href="https://note.com/">Note</a>

href属性のこの部分、パスです。

絶対パス：どこにいても変わらない

簡潔に伝えると、東京都からはじまる住所のような感じです。これがあればどこにいても目的地まで行くことができます。道に迷いません！安心！webサイトのURLもそうです。http://~とかではじまるやつ、絶対パスです。

相対パス：自分の居場所によって七変化

対してこちらは、今いる位置からみた目的地への道順を示してくれます。なので目的のファイルは同じでも今いるファイルによって書き方は変わります。

ルートパス：頂上から目的地へ

一番上のディレクトリ(フォルダ)から目的のファイルまでの道順を示します。webサイトの場合はドメイン直下からの指定となります。/ からはじまっていたらルートパスだと認識しましょう。

相対パスの記述例

・同じフォルダ内にリンクする時：ファイル名のみ記述。           　　　　　      <a href="index.php">

・下位階層にリンクするとき：フォルダ名に続けて / を入れてファイル名を記述。<a href="users/show.php">

・上位階層にリンクするとき： ../に続けてファイル名を記述。２つ上の階層は../../で表す。 <a href="../index.php">

・同じ階層の別フォルダにリンクするとき：　../に続けてフォルダ名/ファイル名と記述。 <a href="../data/index.php">

まとめ

絶対パスではローカル環境で開発ができないかつ書くのに時間的コストがかかるので、開発では相対パスがよく使われています。サイトを引っ越してもリンクの変更をしなくてもいいのもポイントです。

わかりやすいと思った方は「スキ」お願いします！