絶対パスと相対パス、ファイルのリンク方法をわかりやすく解説

htmlで画像やCSSをリンクさせる際に、「絶対パス」と「相対パス」でわけがわからなくなる方が多いのではないでしょうか？

意外とここでつまづく人はとても多いと思います。

そこで今回は「絶対パス」と「相対パス」についてわかりやすく解説しようと思います。


絶対パス

絶対パスとは簡単にいうと「URL」のことです
URLはホームページにアクセスするための「http://」から始まる文字列のことですね。
ということは、絶対パスとはウェブ上での画像の置いてあるURLのことなのです。

絶対パス=URLで記述と覚えましょう。


相対パス

ここで少しややこしいのが「相対パス」です。
相対パスとはリンク元のファイルの階層を基準とした特定のファイルまでのパスです。
「css/style.css」などこのような「http://」から始まらない文字列です。
端的に説明すると上記の通りですがややこしいですね。

ではまずindex.htmlからsample.jpgのファイルを指定したい場合を説明します。






青い階層は第一階層、赤は第二階層、黄色は第三階層です。
左から右の階層に進むことを「階層を下がる」、右から左の階層に戻ることを「階層を上がる」と言います。
第一階層を地上としたら地下に進んで行くイメージです。

この場合、index.htmlのある第一階層を基準にすると、sample1.jpgまでは

「第一階層」→「image(第一階層)」→「sample.jpg(第二階層)」

になります。

相対パスでは階層を下がる場合「/(スラッシュ)」を使います。
そして、現在位置は記述しません。
なので、index.htmlにsample1.jpgをリンクしたい場合は
「/image/sample1.jpg」と記述します。
「image」が第一階層で、「samle1.jpg」が第二階層です。

建物で例えると、今、地上にいて(第一階層)、「images(/images)」というビルの地下二階(第二階層)の「sample1.jpg(/sample1.jpg)」が目的地みたいな感じです。

では今度はcontents.htmlからsample1.jpgをリンクしたい場合を説明します。



contents.htmlは第三階層にあるのでここを基準とします。

すると、sample1.jpgまでは

「第三階層」→「pages(第二階層)」→「html(第一階層)」→「images(第一階層)」→「sample.jpg(第二階層)」

になります。
ここでpageを指定するときと、htmlを指定するときに階層を上がっています。
階層を上がるときには「../」を使用します。

なのでcontens.htmlにsanmple1.jpgをリンクしたい場合は
「../../images/sample1.jpg」と記述します。

こちらも建物で例えると、今地下三階(第三階層)にいて、「地下二階(第二階層)に上がって(../)」、「地上(第一階層)に出て(../)」、「images(/images)」というビルに入って、地下二階の「sample1.jpg(/sample1.jpg)」が目的地みたいな感じですね。

まとめ

いかがでしたでしょうか？
まとめると、
絶対パス = URL
相対パス = リンク元の階層を基準とした特定のファイルまでの道筋
になります。

基本的には相対パスで記述することが多いのですが、
JQueryのCDNの読み込みや、自分の他のサーバーに上がっている画像をリンクする時は絶対パスで記述します。

この記事を読んで「絶対パス」と「相対パス」について理解していただけると嬉しいです。