絶対参照と相対参照とは
まず、先に述べておきますが、ここではファイルの 絶対参照 と 相対参照 についての説明になります。
web サイトを構築する上で、ファイルのインポートやリンクの設定には URL パスの知識は欠かせません。 URL を設定をする場合に、絶対参照と相対参照の知識があれば、効率的なサイト構築をすることが容易になります。
例えばの話ですが、今現在 開いているWebページに画像を挿入したいとか、 CSS ファイルを読み込んで使いたいと思われたことはないでしょうか。
その様な場合に、img 要素の src 属性 や link 要素の href 属性にファイルへのパスを記述するわけですが、 そのパスの記述方法には、絶対参照 と 相対参照 という参照の方法があります。
このページでは 上記のような 絶対参照 と 相対参照 の記述方法について説明していこうと思います。
絶対参照と相対参照の違い
絶対参照と相対参照の違いを簡単にいうと「参照元になるディレクトリ」の違いであり、パスの原点の違いと言えます。
言葉のニュアンスで理解しにくい方もおられるかもしれませんので、 以下からの説明では 「 ディレクトリ = フォルダ 」という意味でご理解をお願いします。
絶対参照は参照の原点をサイトのルートフォルダとします。 また、相対参照は参照の原点を今閲覧しているファイルがあるフォルダとします。
なぜ、絶対参照と相対参照を使い分けるのか
絶対参照と相対参照を使い分けるのかは、単純な理由です。
自らが作成していない Web 上のサイトのファイルを参照する場合、そのファイルの場所を特定するために http から始まる ドメイン を指定してファイルを特定する必要があります。このような場合は必然的に絶対参照となります。
しかし、自分が作成しているサイトのページを原点にして、同じサイト内のファイルを参照する場合はどうでしょうか。 自分自身でファイルやフォルダを扱っているのですから、参照元ファイルをから見た参照先のファイルの位置さえ分かっていれば問題ないですよね。
主には、上記のような理由で 絶対参照 と 相対参照 を使い分けることになります。
絶対参照 と 相対参照 の動作サンプルとコード
ここでは、画像ファイルの参照を 絶対参照 と 相対参照 で記述したサンプルを掲載します。
以下は、あくまでも書き方の説明ですので、同じ画像ファイル ( maromi-bo-ru.jpg ) を指定しています。
サンプルコード: 絶対参照
<body>
<img src="https://ywork2020.com/images/maromi-bo-ru.jpg" alt="犬のイラスト">
</body>
サンプルコード: 相対参照
<body>
<img src="../images/maromi-bo-ru.jpg" alt="犬のイラスト">
</body>
結果は以下の通りです。
絶対参照 も 相対参照 も同じ画像が参照できています。 みなさんは、おそらく、URL に http から始まるパスが記述されている 絶対参照 の方は理解できたでしょう。 問題は 相対参照の方ですよね。 次のセクションでは 相対参照 について具体的に説明したいと思います。
相対参照の具体的な説明 (図解)
まず、はじめに この説明で使うフォルダの構成を図の形式で以下に示します。
〇 まずはじめに 上記の図から index.html を参照元として CSS1.css へのパスは次の通りです。
./css/CSS1.css
〇 次は HTML1.html を参照元として HTML2.html へのパスを以下に示します。
./HTML2.html
〇 次は HTML1.html を参照元として index.html へのパスを以下に示します。
../index.html
〇 次は HTML1.html を参照元として IMG1.jpg へのパスを以下に示します。
../image/IMG1.jpg
上記に 4つの参照パターンを示しましたが、
以上で相対参照の基本パターンが出そろいましたので、具体的な説明に入ります。
どのパスにも先頭に 「 . 」ドット (ピリオド) がありますよね。
そして 「 / 」 スラッシュもあります。
まず、この スラッシュ ですが、これはフォルダを表します。
次に ピリオドですが、これは ピリオドが 1 個の場合、参照元のファイルがあるフォルダだということを表します。
相対参照は、この ピリオド と スラッシュ の組み合わせで 参照元のファイルから参照先のフォルダやファイルの位置を特定します。
例えば、
./css/CSS1.css
を具体的な言葉で書くと次のような意味になります。
「 参照元のファイルがあるフォルダを原点にして、その中にある css フォルダの中の CSS1.css 」
それでは、ピリオドが 2つ ある場合はどうでしょうか。
ピリオドが 2つ ある場合はの意味は 参照元のファイルがある位置から一階層上のフォルダが参照元になります。
例えば、
../css/CSS1.css
を具体的な言葉で書くと次のような意味になります。
「 参照元のファイルがあるフォルダの一階層上のフォルダを原点にして、その中にある css フォルダの中の CSS1.css 」
このように、ピリオドが 1つ増えるごとにフォルダの階層は親の方向に上がっていくことになります。