2020年11月06日

コーディング勉強 初心者むけ【絶対パスと相対パス】

ウェブサイトに必ずといっていいほどある”リンク”。閲覧する側はクリックするだけで簡単に他ページに飛ぶことができますが、制作する私たちはリンク先のURLを指定するのに”パス”というものを理解しておくことがとっても重要です。

絶対パスと相対パス。聞いたことはあるけど、よく理解していないなんてことはありませんか?

パスの指定がうまくいかないと、エラーが生じたり、うまくリンクを飛ばせないことも!そんなことがあってはせっかく良いホームページでも、見る側からの価値は下がってしまいます…。

そうならないためにも、パスについて理解を深めましょう!

パスとは

URLやファイル同士をつなぐことが「パス」で、その情報やファイルがどこにあるかを指定するために書きます。

パスには絶対パスと相対パスの2種類があり、それぞれ用途が違います。

絶対パス

リンク先のURLを指定する方法を絶対パスといい、情報がどこにあるのかを伝えます。おもに外部サイトへのリンクに使用します。

相対パス

同じWebサイト内へリンクを貼るときに使用します。リンクを記述するページを基準にし、対象となるファイルの場所をしていします。

よく相対パスを道案内で例えるのですが、現在地を基準にして「この道をまっすぐに行き、次の角を右に・・」のように、経路を案内するイメージがわかりやすいかもしれません。

test.htmlへリンクを貼る場合の記述方法3パターン

【 リンクを記述するhtmlとtest.html が同じ階層内にある】

<a href=”test.html”>

同じファイル内にtest.htmlがある際のパスはファイル名のみ記述すればOKです。

【リンクを記述するhtmlの上の階層にtest.html がある場合】

<a href =”../test.html”>

URLを固有の住所に例えるなら

絶対パス・・・目的地の住所

相対パス・・・今いる場所からのルートを伝える

絶対パスも相対パスもつなぎたいファイルがどこにあるのかを指定するために書きます。しかしパスの記述通りに指定ができていないとエラーが生じます。

ちなみに相対パスは同一サーバー内のみ有効です。一方絶対パスは他サイトへのURLを指定してリンクを貼ります。

これらの違いを理解した上で適切なサイト設計をしていきましょう。

ひとつ上の階層へのパスは「../」を記述します。

2つ上の階層の場合は「../../」と記述する。階層の数だけ繰り返します。

【リンクを記述するhtmlとtest.html が同じ階層内ある別ファイルの場合】

<a href=”フォルダ名/test.html”>

更に下の階層へのパスは、フォルダ名の後ろに「/フォルダ名」を記述をします。

まとめ

いかがでしたでしょうか。意味が分かれば絶対パスと、相対パス、どっちがどういう意味合いだったかなと迷うこともなくなるのではないでしょうか。

適切なパス設定で、読み手がストレスのない最適なサイト設計を行いましょう!