ウェブページ作成における絶対パスと相対パスの違い

1. 絶対パス

まず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でファイルが実際に存在するパスを指します。

たとえば、このパス D:/wamp/www/img/icon.jpg は、icon.jpg ファイルがドライブ D の wamp ディレクトリの下の img サブディレクトリにあることを示しています。絶対パスに基づいてファイルの場所を特定するには、他の情報を知る必要はありません。

ハイパーリンク ファイルの場所も存在し、これも絶対パスです (例: upload/2022/web/icon.jpg)。

注意: 編集したページは、自分のコンピュータで参照すると正常に動作する場合もありますが、Web サーバーにアップロードすると画像が表示されない可能性が高くなります。静的 HTML ページは Web サイトにアップロードする必要があり、Web サイト アプリケーションでは通常、ルート ディレクトリを表すために「/」を使用します。/img/icon.jpg は、photo.jpg ファイルがこの Web サイトのルート ディレクトリの img ディレクトリにあることを意味します。ただし、ここで参照されるルート ディレクトリは、Web サイトのルート ディレクトリではなく、Web サイトが配置されている Web サーバーのルート ディレクトリであることに注意してください。 Webサーバーにアップロードする場合、Webサイト全体がWebサーバーのDドライブに配置されず、FドライブやHドライブに置かれる場合があります。 WebサーバーのDドライブに配置しても、WebサーバーのEドライブに「D:/wamp/www/img」というディレクトリが存在しない可能性があり、Webページを閲覧したときに画像が表示されません。これは絶対パスを使用する場合のリスクでもあります。

2. 相対パス

相対パスは、その名前が示すように、ターゲットに対するパスの相対的な位置です。

ファイルをインポートするページ名が test.htm で、www というフォルダー (絶対パス D:/wamp/www/test.htm) に存在する場合、www フォルダー (絶対パス D:/wamp/www/icon.jpg) に存在する "icon.jpg" ファイルを参照します。相対パスは同じディレクトリ内の icon.jpg です。"icon.jpg" ファイルが img フォルダー (絶対パス D:/wamp/www/img/icon.jpg) に存在する場合、相対パスは img/icon.jpg です。

相対パスを使用すると、ルート ディレクトリが異なるという上記の問題を回避できます。 Web ページ ファイルと参照ファイルの相対位置が Web サーバー上のファイルの相対位置と一致している限り、それらの相対パスも一致します。たとえば、上記の例では、「icon.jpg」の画像が「test.htm」ファイルで参照されています。「icon.jpg」の画像は「test.htm」と同じディレクトリにあるため、2 つのファイルが同じディレクトリにある限り、Web サーバーのどこにアップロードされても、ブラウザで画像を正しく表示できます。

注: 相対パスではディレクトリ区切り文字として「/」文字が使用されますが、絶対パスではディレクトリ区切り文字として「\」または「/」文字のいずれかを使用できます。 「img」ディレクトリは「www」ディレクトリのサブディレクトリなので、「img」の前に「/」文字を追加する必要はありません。
相対パスでは、親ディレクトリを表すために「../」がよく使用されます。親ディレクトリが複数ある場合は、複数の「../」を使用できます。 「test.htm」ファイルが配置されているディレクトリが「D:/wamp/www/test.htm」であり、「icon.jpg」画像が配置されているディレクトリが「D:/wamp/www」であると仮定すると、「icon.jpg」画像は「test.htm」ファイルが配置されているディレクトリの親ディレクトリにあり、画像を参照するためのステートメントは次のようになります。
<img src="../icon.jpg" />
「test.htm」ファイルが配置されているディレクトリが「D:/wamp/www/test.htm」であり、「icon.jpg」画像が配置されているディレクトリが「D:/wamp/www」であると仮定すると、「icon.jpg」画像は「test.htm」ファイルが配置されているディレクトリの親ディレクトリのサブディレクトリ「img」にあり、画像を参照するためのステートメントは次のようになります。
<img src="../img/icon.jpg" />

3. 仮想パス

ファイルをリモート サーバーにアップロードすると、そのファイルはサーバーのローカル ディレクトリ ツリー内のフォルダーに保存されます。たとえば、Microsoft IIS を実行しているサーバーでは、ホームページへのパスは次のようになります: c:\Inetpub\wwwroot\accounts\users\jsmith\index2.htm このパスは、多くの場合、ファイルの物理パスと呼ばれます。ただし、ファイルを開くために使用される URL では物理パスは使用されません。サーバー名またはドメイン名を使用し、その後に仮想パスが続きます (仮想ディレクトリについて一言: 仮想ディレクトリとは、HTTP アクセス、ユーザーが Web サイトを参照するときに表示されるディレクトリ構造、または FPT を指します。たとえば、E:\Website をアクセス ディレクトリとして設定すると、E:\Website が仮想ディレクトリのルート ディレクトリになり、E:\Website\Image は \Image になります)。上記の例を続けると、仮想パスは次のように記述できます。
<img src="/img/icon.jpg" />

整理整頓する

「./」は現在のディレクトリを表します。<img src="./img/icon.jpg" />は<img src="img/icon.jpg" />と同じです。
「../」は前のディレクトリを表します
「/」は現在のルートディレクトリであり、相対ディレクトリです。<img src="/img/icon.jpg" />
“~/” Web アプリケーションのルート ディレクトリ。 ASP.NET では、Web アプリケーション ルート演算子 (~) が有効になり、サーバー コントロールでパスを指定するときに使用できます。 ASP.NET は、~ 演算子を現在のアプリケーションのルート ディレクトリに解決します。フォルダーに ~ 演算子を使用して、現在のルート ディレクトリに基づいてパスを指定できます。 <asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" /> この例では、ページがサイト上のどこにあるかに関係なく、画像ファイルは Web アプリケーションのルート ディレクトリにある Images フォルダーから直接読み取られます。