基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)

相対パス - ファイルを参照する Web ページの場所に基づいて確立されたディレクトリパス。そのため、異なるディレクトリに保存された Web ページが同じファイルを参照する場合、使用されるパスは異なるため、相対的と呼ばれます。
絶対パス - Web サイトのルートディレクトリに基づくディレクトリパス。すべての Web ページが同じファイルを参照する場合、使用されるパスは同じであるため、絶対と呼ばれます。
実際、絶対パスと相対パスの違いは、ディレクトリパスを記述するときに使用される参照ポイントが異なることだけです。ルートディレクトリはWebサイト上のすべてのファイルにとって同じ参照点となるため、ルートディレクトリを参照点とするパス記述方法を絶対パスと呼びます。
以下は、パスを確立するために使用されるいくつかの特殊記号とその意味です。
「.」--現在のディレクトリを表します。
「..」--上位ディレクトリを表します。
「/」--ルートディレクトリを表します。
次に、読者が作成した Web サイトに次の図に示すディレクトリパスがあると仮定します。

Ref.htm ファイル内の BeRef.gif ファイルを参照する場合、相対パスは次のようになります。

./SubDir2/BeRef.gif

上記の参照パスでは、「.」は現在のディレクトリ (Dir1) を表し、「./SubDir2」は現在のディレクトリ内の SubDir2 を表します。実際には、「./」を省略して、このメソッドを直接使用して引用することもできます。

サブディレクトリ2/BeRef.gif

ルートディレクトリを参照ポイントとして絶対パスを使用してファイルを参照する場合、参照パスは次のようになります。

/Dir1/SubDir2/BeRef.gif

Webサイトのディレクトリ構造が以下のようになっている場合

BeRef.gif ファイルの相対パスはどうでしょうか?

Ref.htm ファイル内の BeRef.gif ファイルを参照する場合、相対パスは次のようになります。

../SubDir2/BeRef.gif

上記の参照パスでは、「..」は親ディレクトリを表し、「/Dir2」は親ディレクトリの下の Dir2 サブディレクトリを表します。参照に絶対パスを使用する場合、参照パスは次のようになります。

/Dir2/BeRer.gif

相対パスと絶対パスの使用を比較するために、より複雑な例を見てみましょう。作成した Web サイトのディレクトリパスが次の図に示すとおりであるとします。

上記の状況でファイルが別のファイルを参照するときに使用する必要がある相対パスと絶対パスを表で示します。

引用元	引用元	相対パス	絶対パス
参照1.htm	参照1.gif	../SubDir2/BeRef1.gif	/Dir1/サブDir2/BeRef1.gif
参照2.htm	参照1.gif	../../Dir1/SubDir2/ BeRef1.gif	/Dir1/サブDir2/ BeRef1.gif
参照1.htm	参照2.htm	../../Dir2/ BeRef2.htm	/Dir2/BeRef2.htm
参照2.htm	参照2.htm	../BeRef2.htm	/Dir2/BeRef2.htm

上記の表で説明する必要があるのは、「../../」の意味です。

「..」は親ディレクトリを表し、「../../」は親ディレクトリの親ディレクトリを表します。したがって、上の表からわかるように、参照先のファイルが現在のディレクトリのサブディレクトリに存在する場合、または上位ディレクトリの別のサブディレクトリに存在する場合は、相対パスを使用する方が便利です。そうでない場合は、絶対パスを使用すると便利です。上記の表から、同じファイルを参照する場合、ファイルを参照するために使用される絶対パスは同じであることもわかります。

<<: MySQL EXPLAIN ステートメントの使用例

>>: vue3 テレポートの詳細な使用例