1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-02-06 18:27:25
相対パスとは、参照するファイルの位置を基準にして作成されるディレクトリパスのことです。したがって、異なるディレクトリにある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サイトのディレクトリパスが次のようになっているとします。


  上の画像のように、あるファイルが別のファイルを参照する場合に使用すべき相対パスと絶対パスを表で説明します。

<テーブル
引用元
引用元
<フォント 相対パス
<フォント 絶対パス
<フォント Ref1.htm BeRef1.gif ... /SubDir2/BeRef1.gif /Dir1/SubDir2/BeRef1.gif 参考2.htm BeRef1.gif ... /... /Dir1/SubDir2/ BeRef1.gif /Dir1/SubDir2/ BeRef1.gif Ref1.htm BeRef2.htm ... /... /Dir2/ BeRef2.htm /Dir2/BeRef2.htm 参考2.htm BeRef2.htm ... /BeRef2.htm /Dir2/BeRef2.htm

  上の表でより重要な点は、"...である。/... /"を表していることです。
  "。"はディレクトリの前のレベルを表し、"は...を表します。/... /"は、その上の階層のディレクトリの前階層を表します。したがって、上の表から、参照するファイルがカレント・ディレクトリのサブディレクトリや、前のディレクトリの別のサブディレクトリに存在する場合は、相対パスを使用する方が便利です。そうでない場合は、単純に絶対パスを使用すればよいが、トラブルも少なくなる。上の表から、参照されるファイルが同じであるとき、参照されるファイルに使用される絶対パスが同じであることもわかります。