WebページはHTMLに画像ファイルやその他の関連ファイルなどを読み込んでブラウザに表示されることで完成します。Webページを表示するための関連ファイルやリンク先のファイルの場所を正しく記述しなければ、画像が表示されなかったり、リンク切れなどの不具合が起こってしまいます。
Webページを正しく表示し動作させるためには、HTMLファイルや関連するファイルの位置関係を把握し、リンク設定や外部ファイルの読み込みを正しく行わなければなりません。そのためにはファイル位置を指定するためのパスという概念と記述の方法について理解しておきましょう。
このページの目次
パス（path）とは
特定のファイルの場所までの道筋を記述したものを「ファイルパス」、あるいは単に「パス」と呼びます。他のWebページにリンクしたり、Webページ内に外部のファイルを読み込む場合に、それらのファイルがどこにあるのかを指定するとき使用します。a要素のhref属性や、img要素のsrc属性などの値にこのパスを使って指定します。
相対パスと絶対パス
<!-- 絶対パスでハイパーリンクのパスを指定 -->
<a href="http://www.example.com/index.html">ハイパーリンク</a>
<!-- 相対パスで画像のパスを指定 -->
<img src="images/img01.jpg" alt="サンプル画像">パスの指定方法には「相対パス」と「絶対パス」の2種類があり、状況に応じて使い分けていく必要があります。
相対パス（relative path）の書き方
相対パスとは、現在作業しているHTMLファイルが格納されているフォルダ（ディレクトリ）を基準にして、指定したファイルがどこにあるかを記述する方法です。画像を指定するsrc属性であれば「表示したいページ」から見て「読み込みたい画像ファイルがどこ」にあるか、という位置関係をもとにした指定の仕方になります。
ファイルが格納されているフォルダは階層構造を持っています。異なる階層構造にあるファイルの位置関係には上位の階層や下位の階層を表現する方法で位置関係を表します。
フォルダ名やファイル名の区切りには「/（スラッシュ）」を使い、上のフォルダ階層にある場合は「../」を記述します。
相対パスでは、まずどのファイルがどのフォルダに入っているのかというようなファイル・フォルダの構造を理解しておく必要があります。
同じ階層のファイルへの相対パス
同じ階層（フォルダ）内のファイルへのパスは、ファイル名のみ(または「./」に続けてファイル名)を記述します。
同じ階層（フォルダ内）のファイルへの相対パスの記述例
<a href="access.html">アクセス</a>
<img src="map.jpg" alt="アクセスマップ">下の階層のファイルへの相対パス
下位階層へのファイルパスは、フォルダ名に続けて「/」を入れ、下位階層にあるフォルダ名やファイル名を続けて記述します。 1つ下の階層にあるファイルへのパスは「フォルダ名/ファイル名」という様になります。 階層が深くなるたびに「/」とフォルダ名をつなげていきます。
下の階層（フォルダ）のファイルへの相対パスの記述例
<a href="plans/index.htm">植物</a>
<img src="fruits/images/apple.jpg" alt="リンゴ">上の階層のファイルへの相対パス
上位階層のフォルダへアクセスするには、「../」を記述します。1つ上の階層にあるファイルへのパスは「../ファイル名」という様になります。階層を一つ上がるたびに「../」追記していきます。2つ上の階層を指定するときは先頭に「../../」をつけることでアクセスできます。
上の階層のファイルへの相対パスの記述例
<a href="../index.htm">植物</a>
<a href="../../index.htm">トップ</a>異なる階層のファイルへの相対パス
異なる階層のファイルへアクセスするには、一旦、そのファイルがあるフォルダを含む上位階層のフォルダまで「../」を使って移動してから、「/」で下階層へとたどらなければなりません。
同じ階層のファイルへの相対パスの記述例
<img src="../vegetables/index.html">野菜</a>相対パスで記述すると、コードが短く見やすいことと、サイトの構築時などにWebサーバにアップロードしなくても、ローカル環境でブラウザテストをおこなうことができるなどのメリットがあります。
絶対パス（absolute path）の書き方
絶対パスは、 Web上での絶対的な場所である「http://」か「https://」から始まる「URL」というインターネット上のアドレス（住所）を使ってファイルの場所を指定する方法です。指定したファイルが保管されてある最上位の階層から相対パスと同様にフォルダの階層を下に向かって「/」で区切ってすべて記述していきます。「https://ドメイン名 / フォルダ名 / フォルダ名 / ファイル名」のように、指定したファイルにたどり着くまでのすべてのフォルダ名とファイル名を書く必要があります。
絶対パスの指定
<img src="https://example.com/fruits/images/apple.jpg" alt="りんご">絶対パスで記述するとインターネット上のURLを記述するため、自分のPC内にあるファイルなどには使えません。そのためローカル環境でテストができず、サイト構築の作業ではあまり向かない記述方法です。
絶対パスは、主に外部（別のドメイン）の Webサイトへのリンクに利用されます。