33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

相対パスと絶対パスについて

本日の教材動画はこちら 

 

そもそもパスってなんぞ?って話ですが、パス=道という意味で、ネット上だと「ファイルまでの行き方」として使われる。ようはファイルの住所ですね!どこかへリンクを貼る際は、必ず下記のどちらかを使う形になります。

相対パス>について

「今いる場所からみて相手がどこにいるのか」を基準にして場所を指定する。道案内でいうと「ここから右に行って、次の角を左です」という感じね!使い方は… 

・今いる場所(フォルダ)にあるファイル:ファイル名

・今いる場所(フォルダ)の中にあるファイル:フォルダ名/ファイル名

・今いる場所(フォルダ)の1階層上にあるファイル:../ファイル名

・今いる場所(フォルダ)の2階層上にあるファイル:../../ファイル名 

同じフォルダ内にあるならファイル名のみ。フォルダの中に仕舞ってるならそのフォルダ名→ファイル名。今より1個前のフォルダ(階層)に仕舞ってるなら、1階層あがるごとに「 .. 」を増やしていく。

絶対パス>について

こっちは「相手がどこにいるのかを明確に伝える」方法になります。こっちは単純で、ようはURLのことです!道案内する際にドンと住所を伝えちゃう感じですね。こうすれば相手は必ずその場所にダイレクトにいけます。外部リンクを貼る際は必ず絶対パスを使う事になります。

相対パス>と<絶対パス>の違いは?

私は今まで絶対パスしか使ってこなかったタイプ。リンクを「C:\Users\〇〇\Desktop\HTML\...」って指定しててリンク切れ起こしてる人を見かけたことがありませんか?私はああなるのが怖くて、HPを作っていた際は必ず絶対パスで記載してました。

 

なので相対パスも同じようにリンク切れ起こすのが怖いな…って思ってました。ですが動画で相対パスを使うメリットに「フォルダを移動させたり、移転する時に便利」が挙げられてるのを見て、かなり「なななな、なるほどー??!?!」ってなりました。

 

たしかにこれならファイル階層と位置さえしっかり把握しておけば、サイト移転しようがデスクトップ整理して違う場所にフォルダを移そうが関係ないですもんね。かなり目から鱗でした…。

 

人にフォルダごと渡した場合もパスの変更は不要なため、プログラミング界隈はテスト環境を制作する際にこの相対パスを利用するみたいですね。本番に上げるときは絶対パスに変えるのかな?

 

結局好みで使い分ければいいのか??って思って調べてみたんですが、「aタグのリンク先は絶対パス」、「それ以外は相対パス」という使い分けをすればいいとのこと。「それ以外」にあたる部分は、まだ勉強してませんが「imgタグ・src属性・linkタグのhref属性・scriptタグのsrc属性」があたるようです。

 

経験上全部絶対パスで書いても問題はなかったし、他のサイトさんでは「結局どっちでもOK!」ということらしいので、自分が使いやすい方を使えばいいみたいですね。私はリンク切れが怖いタイプなので今後も絶対パス派でやっていこうかなと思います。ただどうしても記述が長くなるので、画像くらいは相対パスにしようかしら…?

 

今回勉強した内容

今回勉強した内容

 

出来上がったページ

出来上がったページ

【参考サイト】

絶対パスと相対パスの違いをイラストを使って解説!

絶対パス、相対パスとは?サイト制作で使うならどちらが良いか解説します!