【初心者さん向け】相対パスと絶対パスの違い

道:相対パスと絶対パスホームページ

相対パスと絶対パスって何が違うの?URLでいいんでしょ?

今回は相対パスと絶対パスの違いと使い方について説明しますね。

現在は相対パスと絶対パスを意識して、ホームページを作らなくても大丈夫なようになっています。CMSやウェブビルダーを使えば、階層の意識なんて必要ありません。でも、ホームページビルダーなどで自分でファイルを作る時には、相対パスと絶対パスの意識が必要になります。

そうはいっても、なかなか難しい概念なので、なんとなく違うんだな、と思って貰えればいいかなとおもいます。

相対パスと絶対パスの違い

相対パスと絶対パスの違いがとても分かりやすく説明している動画があります。まずはご覧ください。

私の説明が必要ないくらい分かりやすいと思います。

パスとはそのファイルやフォルダを示す道です。相対パスは今みているファイルと次に見たいファイルの道順です。絶対パスはどこからでもその次に見たいファイルを表す位置情報になります。

例えば、最寄りの駅からあなたが奉仕する神社までの道順を説明したのが、駅と神社の関係を表しているので相対パスです。

一方の絶対パスは、あなたが奉仕する神社の住所になります。絶対にどこからでもたどり着ける位置情報となります。

  • 相対パス:今いる場所を起点として相手の場所を説明する道順
  • 絶対パス:相手の場所をどこから見ても変わらない位置情報

分かりやすいので、先に絶対パスの説明をしますね。

絶対パスの表し方

絶対パスは、あなたが奉仕する神社の住所になります。千葉県だったら、千葉県〇〇市〇〇町1-2-3です。ホームページでいうとアドレス(URL)です。

上の画像やホームページ・ビルダーの画像はURLで示しています。外部リンクを貼る場合はURLを使います。

相対パスの表し方

相対パスは、最寄りの駅からあなたが奉仕する神社までの道順になります。「南口を出たらまっすぐ道を進んで、最初の交差点で右に曲がってください。そのまま道なりに進むと、今度は三つ叉の道があるので・・・」と説明しますよね。こういったことをファイルの説明でもします。

階層について

マトリョーシカで階層の説明

相対パスでは「階層」という概念が必要になります。難しいことはありません。マトリョーシカや入れ子の箱を考えるとわかりやすいかもしれません。同じ箱に入っていれば、同じ階層です。それよりも小さい箱が階層が下で、大きい箱が階層が上になります。

相対パスは見たいファイルと今見ているファイルの位置関係を考えます。

  1. 見たいファイルは、今見ているファイルと同じフォルダにある場合
  2. 見たいファイルは、今見ているファイルと別のフォルダの中にある場合
    1. 今見ているファイルのフォルダの中にある場合(1つ階層が下)
    2. 今見ているファイルのフォルダが入っているフォルダの場合(1つ階層が上)

これを相対パスで表してみます。

  • 1:ファイル名
  • 2-1:フォルダ名/ファイル名
  • 2-2:../ファイル名

階層が上だったら「../」を付けます。階層が下だったら「フォルダ名/」をつけます。

相対パスと絶対パスの使い方

相対パスは同じホームページ内のリンクに使います。たとえば画像を貼るときにつかいます。また、内部リンクにも使います。他には作成途中で、自分のパソコンだけで作業を行う場合は相対パスを使います。絶対パスは外部リンクに使います。

しかし、SEOの観点からいうと絶対パスを使ったほうがいいでしょう。

可能な場合は、相対リンクではなく絶対リンクを使用します

Search Consoleのヘルプより

まとめ

まとめます。

相対パス絶対パス
意味今いる場所を起点として
相手の場所を説明する道順
相手の場所をどこから見ても
変わらない位置情報
表し方../フォルダ名/ファイル名
など
URL
使い方画像や内部リンク外部リンク

最初に紹介した画像はTechAcademy [テックアカデミー]です。他にも色々動画がありますよ。WordpressやAI、Webアプリケーションなどコースがあります。無料体験、無料説明会も行っています。神職さんは忙しいので、プログラミングの勉強は必要無いかもしれませんが、新しい技術についてだけでも動画で見ると楽しいと思います。

基本的にはURLでいいのね。一応知っておくといいわね!