お問い合わせ
  • HTML

17 ファイルパスの記述

パスとは?

part15でimg要素のsrc属性値には「画像ファイルの名前」を記述するということを説明しましたが、正しくは「画像ファイルの場所と名前」を記述します。「ファイルの場所と名前」を、コンピュータ用語でファイルのパスと言います。
パス(path)は英語で「道筋」を意味します。HTMLファイルから目的のファイルまでの道筋が「ファイルのパス」ということです。このファイルのパスの書き方には、HTMLファイルから見た目的のファイルの場所によって、大きく分けて5つの書き方があります。

  • 目的のファイルが、HTMLファイルと「同じフォルダ」にある。
  • 目的のファイルが、HTMLファイルと「同じフォルダ内のフォルダ」にある。
  • 目的のファイルが、HTMLファイルよりも「上の階層のフォルダ」にある。
  • 目的のファイルが、HTMLファイルよりも「上の階層のフォルダ内のフォルダ」にある。
  • 目的のファイルが、「別のWebサイト」にある。

ファイルパスの書き方は、目的のファイルの種類によって違いは無く、画像ファイル(GIF・JPEG・PNG)やHTMLファイルで共通のパスの書き方をします。ここではJPEGを例にして説明していきます。

同じフォルダにある場合

HTMLファイルと同じフォルダに目的の画像ファイルが入っている場合の位置関係を図で表すと以下のようになります。

同じフォルダにある場合1

この場合のファイルのパスは、ファイル名だけを書けばOKです。

同じフォルダにある場合2

同じフォルダ内のフォルダの中にある場合

HTMLファイルと同じフォルダ内のフォルダの中に、目的の画像ファイルがある場合の位置関係を図で表すと以下のようになります。

同じフォルダ内のフォルダの中にある場合1

同じフォルダの中にあるimagesフォルダの中にある「gazou.jpg」を表示したい場合は、以下のように書きます。

同じフォルダ内のフォルダの中にある場合2

上の階層のフォルダにある場合

HTMLファイルより上の階層のフォルダに、目的の画像が入っている場合の位置関係を図で表すと以下のようになります。

上の階層のフォルダにある場合1

ファイルパスを書く時に、上の階層のフォルダをフォルダ名ではなく「../」と書く事を覚えておきましょう。

上の階層のフォルダにある場合2

上の階層のフォルダ内のフォルダの中にある場合

HTMLファイルより上の階層のフォルダ内のフォルダに、目的の画像が入っている場合の位置関係を図で表すと以下のようになります。

上の階層のフォルダ内のフォルダの中にある場合1

上の階層のwebフォルダ内のimagesフォルダにある、gazou.jpgを表示したい場合は以下のように書きます。

上の階層のフォルダ内のフォルダの中にある場合2

別のWebサイトにある場合

別のWebサイトに表示したい画像がある場合、ファイルのパスには画像ファイルのURLを記述します。

別のWebサイトにある場合

ただし、他人のWebサイトにある画像を、無断で自分のWebページに表示してはいけません。著作権の侵害にあたる可能性があります。表示したい場合は、Webサイトの所有者に許可を取るか、著作権法に乗っ取って正しく引用をしましょう。

このページのまとめ

  • HTMLファイルから目的のファイルまでの道筋を「ファイルのパス」と言う。
  • ファイルパスの書き方には大きく分けて5つの下記かがある。
  • ファイルパスを書く時に、上の階層のフォルダはファイル名ではなく「../」と書く。
  • 他人のWebサイトから画像を引用したい場合は、著作権法に乗っ取って正しく引用するように気をつける。

Contact Us

Web制作、Webマーケティング、SFA・MA導入支援に関するお悩みがある方は、お気軽にご相談ください。

お問い合わせ・ご相談

ホームページ制作、マーケティングにおける
ご相談はお気軽にご連絡ください。

資料請求

会社案内や制作事例についての資料を
ご希望の方はこちらから。

お電話でのお問い合わせ

お電話でのご相談も受け付けております。

※コールセンターに繋がりますが、営業時間内は即日
担当より折り返しご連絡をさせて頂きます。