HTML ファイルパス

HTMLファイルパスは、ウェブサイトのフォルダ構造内にあるファイルの場所をブラウザに伝えるための「住所」のようなものです。

ファイルパスは、以下のような外部リソースをリンクする際に必ず使用されます。

• 画像 (<img> タグ)
• スタイルシート (<link> タグ)
• スクリプト (<script> タグ)
• 他のウェブページ (<a> タグ)

1. 絶対ファイルパス (Absolute File Paths)

絶対ファイルパスは、インターネット上のリソースへの完全なURL（フルアドレス）を指定する方法です。

<img src="https://www.google.com/images/picture.jpg" alt="山の写真">

自サイト以外の外部サーバーにあるファイルを指定する際に必須となりますが、自サイト内のファイルに対しても使用可能です。ただし、ドメイン名が変わるとすべてのリンクを修正する必要があるため、サイト内部のリンクにはあまり推奨されません。

2. 相対ファイルパス (Relative File Paths)

相対ファイルパスは、現在のページから見たファイルの場所を指定する方法です。プロジェクトのフォルダごと別のサーバーに移動してもリンクが維持されるため、Web制作ではこちらが主流です。

2.1 よく使われる相対パスの記述例

3. ベストプラクティス：どちらを使うべきか？

結論から言うと、可能な限り相対ファイルパスを使用するのがベストです。

• ポータビリティ: 相対パスを使用していれば、ローカル環境（自分のPC）で制作したファイルをそのまま本番サーバーにアップロードしても、リンク切れが起きません。
• メンテナンス性: ドメイン（URL）が変更になっても、HTMLコード内のパスを書き換える必要がありません。

[!TIP]
フォルダ階層が深くなると ../../ が増えて混乱しやすくなります。そんな時は、サイトのルート（最上層）から指定する /images/logo.png のような記述（ルート相対パス）を使うと、どの階層のページからでも同じ記述でファイルを呼び出せるので便利ですよ。

4. まとめ

ファイルパスを正しく理解することは、Webサイトの「リンク切れ」を防ぐための第一歩です。複雑な階層構造を作る前に、まずはこの基本のルールをマスターしておきましょう。