HTML ファイルパス

パス 説明
<img src="picture.jpg"> picture.jpg 現在のウェブページと同じフォルダーにあります
<img src="images/picture.jpg"> picture.jpg 現在のフォルダー内の images フォルダーにあります
<img src="/images/picture.jpg"> picture.jpg 現在のサイトのルートディレクトリの images フォルダー内にあります
<img src="../picture.jpg"> picture.jpg は現在のフォルダーの上位フォルダーにあります

HTML ファイルパス

ファイルパスは、ウェブサイトのフォルダー構造内の特定のファイルの場所を説明します。

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

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

絶対的なファイルパス

絶対的なファイルパスは、インターネットファイルへの完全な URL を指します：

例

<img src="https://www.codew3c.com/images/picture.jpg" alt="flower">

<img> タグおよび src、alt 属性は、HTML イメージの章で説明されています。

相対的なパス

相対的なパスは、現在のページに対して相対的なファイルを指します。

この例では、ファイルパスは現在のウェブサイトのルートディレクトリ内の images フォルダー内のファイルを指しています：

例

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

この例では、ファイルパスは現在のフォルダー内の images フォルダー内のファイルを指しています：

例

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

この例では、ファイルパスは現在のフォルダーの上位フォルダーにある images フォルダー内のファイルを指しています：

例

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

良い習慣

相対的なパスを使用することは良い習慣です（可能な場合は）。

相対的なパスを使用した場合、あなたのウェブページは現在のベース URL にバインドされません。すべてのリンクはあなたのコンピュータ上（ローカルホスト）または将来のパブリックドメインで正常に動作します。