HTMLファイルのパス

HTML JavaScript HTMLのhead要素
パス 説明
<img src="picture.jpg"> picture.jpg は現在のページと同じフォルダーにあります
<img src="images/picture.jpg"> picture.jpg は現在のフォルダーの画像フォルダーにあります
<img src="/images/picture.jpg"> 現在のサイトのルート ディレクトリの画像フォルダーにある picture.jpg
<img src="../picture.jpg"> picture.jpg は現在のフォルダーの上のフォルダーにあります

HTML ファイルのパス

ファイル パスは、Web サイトのフォルダー構造内のファイルの場所を表します。

ファイル パスは、外部ファイルをリンクするときに使用されます:

  • ウェブページ
  • 画像
  • スタイルシート
  • JavaScript

ファイルの絶対パス

絶対ファイル パスは、インターネット ファイルを指す完全な URL です。

<img src="https://w3cstudy.cc/images/picture.jpg" alt="flower">

<img> タグと src 属性および alt 属性については、HTML 画像の章で説明します。

相対パス

相対パスは、現在のページを基準としたファイルを指します。

この例では、ファイルパスは現在の Web サイトのルート ディレクトリのイメージ フォルダーにあるファイルを指します。

<img src="/images/picture.jpg" alt="flower">

この例では、ファイル パスは現在のフォルダーのイメージ フォルダーにあるファイルを指します。

<img src="images/picture.jpg" alt="flower">

この例では、ファイル パスは、現在のフォルダーの 1 つ上のレベルのフォルダー内のイメージ フォルダーにあるファイルを指します。

<img src="../images/picture.jpg" alt="flower">

良い習慣

(可能であれば) 相対パスを使用することをお勧めします。

相対パスを使用すると、ページは現在のベース URL にバインドされません。 すべてのリンクは、お使いのコンピュータ (ローカルホスト) または将来のパブリック ドメインで正常に動作します。