スタッフブログ

17 ファイルパスの記述

2014/03/18 HTML

パスとは?

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サイトから画像を引用したい場合は、著作権法に乗っ取って正しく引用するように気をつける。

本間 隆之が書いた記事

新着情報

スタッフブログ

ご相談・
お問い合わせ