この記事では、Webページ作成における相対パスと絶対パスの違いについて解説します。
相対パスと絶対パス
絶対パス
ファイルシステムのルートから始まる完全な経路を指定します。常に同じ位置を指し示すため、どこからアクセスしても同じ結果になります。
通常、ルートディレクトリ（Windowsでは「C:\」、Unixベースのシステムでは「/」）から始まります。
例:
- Windows: C:\Users\YourName\Documents\file.txt
- Unix: /home/username/documents/file.txt
相対パス
現在の作業ディレクトリ（カレントディレクトリ）を基準にして、ファイルやディレクトリの位置を指定します。
現在の位置によって指し示す場所が変わります。
短く書けるため、同じディレクトリ内やサブディレクトリ内のファイルを参照する際に便利です。
例:
- 同じディレクトリ内のファイル: file.txt
- サブディレクトリ内のファイル: subdirectory/file.txt
- 親ディレクトリ内のファイル: ../file.txt
Webページの例
絶対パス
Webページでは、絶対パスは通常、完全なURLを使用します。
例：
<img src="https://example.com/images/logo.png" alt="ロゴ">
<a href="https://example.com/about.html">会社概要</a>
これらのパスは、現在のページの位置に関係なく、常に同じリソースを指します。
ドメイン名から始まるため、どのサーバーからでもアクセス可能です。
相対パス
現在のページの位置を基準にしてリソースを指定します。
例：
<img src="images/photo.jpg" alt="写真">
現在のディレクトリ内の「images」フォルダにある「photo.jpg」を指します。
<a href="../products/item.html">商品ページ</a>
一つ上の親ディレクトリ（../）にある「products」フォルダ内の「item.html」を指します。
<a href="../../service/coupon.html">商品ページ</a>
2つ上の上位ディレクトリ（../../）にある「service」フォルダ内の「coupon.html」を指します。
相対パスは、同じサイト内のリソースを参照する際に便利です。
相対パス：他の例
href=”../assets/dist/css/bootstrap.min.css”
この記述は相対パスを示しています。上で説明した通り、../の意味は「1つ上の階層（親ディレクトリ）」を表します。（./ は現在のディレクトリを指す）
したがって、href="../assets/dist/css/bootstrap.min.css"は以下のように解釈されます:
- 現在のディレクトリから1つ上の階層に移動し、
- そこにある
assetsディレクトリに入り、 - その中の
distディレクトリに入り、 - その中の
cssディレクトリに入り、 - 最終的に
bootstrap.min.cssファイルを参照する
この方法は、ウェブサイトの構造が変更された場合でも、ファイル間の相対的な位置関係さえ維持されていれば、リンクが正常に機能し続けるため、柔軟性があります。
WebページのURLとページ内の相対リンクとの関係
この2つのURLがあるとします。
①/path/layout-to-design
②/path/layout-to-design/
主な違いは、URLの末尾にスラッシュ（/）があるかないかです。
この違いは以下のような影響を及ぼします：
Webサーバーの解釈:
スラッシュなしのURLは通常、ファイルを指すと解釈されます。
スラッシュありのURLは通常、ディレクトリを指すと解釈されます。
後続の相対リンクの解決:
スラッシュなしのURL（1番目）の場合、そのページ内の相対リンクは、最後のパス部分を除いたURLを基準に解決されます。
スラッシュありのURL（2番目）の場合、そのURLをそのまま基準として相対リンクが解決されます。
スラッシュなしのURL
例えば：/path/layout-to-design
このURLでページにアクセスした場合、ブラウザはこのURLをファイルとして解釈します。
そのため、このページ内の相対リンクを解決する際、ブラウザは最後のパス部分（この場合、ファイル名と見なされる部分）を除いたURLを基準として使用します。
具体的な例
具体的な例を見てみましょう：
①現在のURL:/path/layout-to-design
②このページ内に以下のような相対リンクがある場合：<a href="images/example.jpg">画像</a>
③ブラウザは、このリンクを以下のように解決します：
/path/images/example.jpg
なぜなら、ブラウザは現在のURLの最後の部分を除いた/を基準として使用するからです。
スラッシュありのURL
これに対し、スラッシュありのURLの場合：
①現在のURL:/path/layout-to-design/
②同じ相対リンク：<a href="images/example.jpg">画像</a>
③ブラウザはこのリンクを以下のように解決します：
/path/layout-to-design/images/example.jpg
この場合、現在のURLがディレクトリとして解釈されるため、そのまま基準として使用されます。
リンクの先頭にスラッシュ（/）があるのとないのとの違い
images/example.jpg と /images/example.jpg の違いは、相対パスと絶対パスの違いです。
この違いは、Web開発において非常に重要です。詳しく説明しましょう。
images/example.jpg (先頭にスラッシュなし)
- これは相対パスです。
- 現在のページのURLを基準にして解釈されます。
- 意味: “現在のディレクトリから見て、imagesディレクトリ内のexample.jpg”
/images/example.jpg (先頭にスラッシュあり)
- これは絶対パスです（ドメインルートからの絶対パス）。
- Webサイトのルートディレクトリを基準にして解釈されます。
- 意味: “サイトのルートディレクトリから見て、imagesディレクトリ内のexample.jpg”
具体的な例
具体的な例で見てみましょう：
現在のページのURLが https://example.com/blog/post1.html だとします。
images/example.jpg の場合：
- 解決されるURL:
https://example.com/blog/images/example.jpg - 現在のディレクトリ（/blog/）を基準に解釈されます。
/images/example.jpg の場合：
- 解決されるURL:
https://example.com/images/example.jpg - サイトのルートディレクトリを基準に解釈されます。
相対パス：./ありとなし
images/example.jpg
- これは単純な相対パスです。
- 現在のディレクトリを暗黙的な基準点として使用します。
./images/example.jpg
- これも相対パスですが、先頭に
./が付いています。 ./は明示的に現在のディレクトリを指します。
実質的な違いは無い
解釈:
- ほとんどの場合、これらは同じように解釈され、同じファイルを指します。
- 現代のWebブラウザやサーバーでは、通常これらを同等に扱います。
明示性:
./を使用する方が、「現在のディレクトリから始まる」ということをより明示的に示しています。
使用例:
<img src="images/example.jpg" alt="Example">
<img src="./images/example.jpg" alt="Example">これらは通常、同じ結果になります。
./ を使用するかどうかは主に個人やチームの好み、またはプロジェクトの規約によって決まります。一貫性を保つため、プロジェクト内で統一した方法を使用することが推奨されます。
特別な理由がない限り、シンプルな images/example.jpg で十分です。ただし、コードの明確さや特定の開発環境での要件によっては、./images/example.jpg を使用することもあります。
まとめ
Webページ作成における相対パスと絶対パスの違いについて解説しました。主な内容は以下の通りです:
- 相対パスと絶対パスの基本的な違い
- Webページでの具体的な使用例
- URLの末尾のスラッシュ（/）の有無による影響
- リンクの先頭のスラッシュ（/）の有無による違い
- 相対パスにおける「./」の使用
これらの概念を理解することで、より効率的で柔軟性のあるWebページ構造を設計できます。
以下のリンクでは、HTML/CSSに関する記事をまとめています。各記事をクリックして、詳しい情報をご確認ください。
