HTML ファイルパス

HTMLファイルパスは、ウェブページやリソースが配置されている場所を示す方法です。HTMLファイルや画像、スタイルシートなどのリンクを正しく指定することで、ページの内容を正しく表示することができます。

絶対パスと相対パス

HTMLでは、主に絶対パスと相対パスの2つの方法でファイルを指定します。

絶対パス

絶対パスは、ファイルやリソースがウェブサーバー上のどこに配置されているかを完全に指定します。通常は「http://」または「https://」で始まり、ドメイン名から始まるパスです。

<img src="https://example.com/images/pic.jpg" alt="画像">

この例では、src属性に絶対パスが使用されており、画像がhttps://example.comのサーバー上の/images/pic.jpgから取得されます。

相対パス

相対パスは、現在のHTMLファイルが配置されているディレクトリからの相対的な位置を指定します。主に同一ドメイン内でのファイル参照に使用されます。

<link rel="stylesheet" href="styles/main.css">

この例では、スタイルシートのリンク先が現在のHTMLファイルと同じディレクトリ内にあるstyles/main.cssという相対パスで指定されています。

ルート相対パス

ルート相対パスは、ドメインのルートからのパスを指定します。先頭にスラッシュ(/)を付けてファイルを参照します。

<a href="/contact.html">お問い合わせ</a>

この例では、href属性にルート相対パスが使用されており、ドメインのルートからcontact.htmlへのリンクが指定されています。

基準となるディレクトリ

HTMLファイル内で相対パスを使用する際には、基準となるディレクトリに注意する必要があります。HTMLファイルの配置場所によって、相対パスの解決方法が異なるためです。

これらのパスの適切な使用により、ウェブページのリソース管理やサイトのメンテナンスが容易になり、ユーザーエクスペリエンスを向上させることができます。