TECH I.S.

HTML ファイルパス


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


ファイル パスの例
path 説明
<img src="picture.jpg"> 「picture.jpg」ファイルは、現在のページと同じフォルダーにあります。
<img src="images/picture.jpg"> 「picture.jpg」ファイルは、現在のフォルダーのimagesフォルダーにあります。
<img src="/images/picture.jpg"> 「picture.jpg」ファイルは、現在のWebのルートにあるimagesフォルダーにあります。
<img src="../picture.jpg"> 「picture.jpg」ファイルは、現在のフォルダーの1つ上のフォルダーにあります。

HTML ファイルパス

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

ファイルパスは、次のような外部ファイルにリンクするときに使用されます。

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


絶対ファイルパス

絶対ファイルパスは、ファイルへの完全なURLです。

<img src="https://techis.jp/images/picture.jpg" alt="Mountain">

<img> タグについては、次のHTML 画像の章で説明されています。


相対ファイルパス

相対ファイルパスは、現在のページに関連するファイルを指します。

次の例では、ファイルパスは、現在のWebのルートにあるimagesフォルダー内のファイルを指しています。

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

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

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

次の例では、ファイル パスは、現在のフォルダーの1レベル上のフォルダーにあるimagesフォルダー内のファイルを指しています。

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


ベストプラクティス

相対ファイルパスを使用することをお勧めします (可能な場合)。

相対ファイル パスを使用すると、Web ページは現在のベースURLにバインドされません。すべてのリンクは、現在のパブリック ドメインと将来のパブリック ドメインだけでなく、自分のコンピューター (localhost)でも機能します。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細