07ファイルのパス
ここではファイルのパスについて解説します。
ファイルパスはファイルや画像など、呼び出すファイルの場所を指定するための文字列です。
ページの中でリンクを貼ったり、画像を読み込んで表示させたりするときに、呼び出し元のページ（例えば今回はindex.html）から見て「読み込みたいファイルがどこにあるのか」を指定します。
パスの指定方法は相対パスと絶対パスと呼ばれる方法が存在します。
7-1 相対パス
相対パスは、基本となるパスの書き方です。「呼び出し元のファイルを起点として、呼び出し先のファイルがどの位置にあるのか」を示します。下図を例に見てみましょう。
※top内にあるindex.htmlがトップページです。
top
├ first
│ └ one
│ └ index.html
├ second
│ └ two
│ ├ index.html
│ └ css
│ └ style.css
├ third
│ └ three
│ ├ index.html
│ └ main.js
└ index.html
topフォルダ内には複数のフォルダが入っており、階層構造になっています。
firstやsecondなどのサブフォルダは、「今 topフォルダで作業している」という指定がされれば、そのサブフォルダ名などを確認できます。
一方で、main.jsはthirdフォルダ内のthreeフォルダに移動しないとファイルを確認できません。
このように現在どこの位置で作業をしているのかを示すカレントディレクトリ（カレントフォルダ、作業ディレクトリ）を指定する必要があります。
HTMLファイルなどを作成するとき、そのファイルがどこのフォルダにあるのかを示すのがカレントディレクトリになります。
では、top フォルダ内の index.html から css フォルダの中にある style.css を呼び出す方法を考えてみましょう。つまり、カレントディレクトリは、top となります。
HTMLは以下のようになります。
<link rel="stylesheet" href="./css/style.css">topフォルダ内のindex.html の中で ./css/style.css と書いた場合、どういう意味を持っているのか順番にたどって見てみましょう。
- ./：index.html と同じ階層にある
- css/：cssフォルダの中の
- style.css：style.css を呼び出す
このようになります。
フォルダの区切りには/を使います。./は「記述されたファイルと同じ階層にある」という意味です。
次は thirdフォルダのthreeフォルダ内にある index.html から style.css を呼び出す場合です。 thirdフォルダのthreeフォルダ内にある index.html と secondフォルダのtwoフォルダのcssフォルダ内にある style.css は異なるフォルダ（ディレクトリ）になります。つまり、cssフォルダ内に該当するファイルがあるのかどうかは、そのフォルダに移動（フォルダを指定）しないと呼び出すことができません。 したがってこの場合は、以下の順番で呼び出します。
- ../：1つ上の階層へ行く（thirdフォルダ）
- ../：さらに1つ上の階層へ行く（topフォルダ）
- second/：secondフォルダへ移動して
- two/：twoフォルダへ移動して
- css/：cssフォルダへ移動して
- style.css：その中の style.css を呼び出す
以上をまとめて、../../second/two/css/style.css と記述します。
../ は「1つ上の階層へ行く」という意味です。
よって、third/three/index.html では、次のように書いて、 style.cssファイルを呼び出します。
<link rel="stylesheet" href="../../second/two/css/style.css">画像を呼び出す場合や、リンクを貼る場合も、同じく../を使えます。../は階層ごとに1セットずつ増えます。
CSSが読み込めない、画像が表示されない場合などは、このパスを間違えている可能性が高いです。再度、位置関係と階層を確かめてみましょう。
7-2 絶対パス
相対パスが「呼び出し元のファイルを起点として、呼び出し先のファイルがどの位置にあるのか」を示すのに対し、絶対パスは「サイトの最上位を起点として、呼び出し先のファイルがどの位置にあるのか」を示します。 絶対パスは、呼び出したいファイルが同じサイト構成内にある場合とない場合で記述方法が異なってきます。まずは、同じサイト構成内にある（同一サーバー内のファイルを参照する）場合を見ていきましょう。
上図のようなサイトで、secondフォルダのtwoフォルダ内のindex.htmlファイルおよびfirstフォルダのoneフォルダ内のindex.htmlファイル、thirdフォルダのthreeフォルダ内のindex.htmlファイルのすべてにcssフォルダ内にあるstyle.cssを適用したいと考えます。
しかし、先に紹介した相対パスで指定した場合は次のようになってしまい、ファイルごとに修正する必要が出てきます。
secondフォルダのtwoフォルダ内のindex.htmlファイルでの指定方法
<link rel="stylesheet" href="./css/style.css">firstフォルダのoneフォルダ内のindex.htmlファイルおよびthirdフォルダのthreeフォルダ内のindex.htmlファイルでの指定方法
<link rel="stylesheet" href="../../second/two/css/style.css">このようにファイルによって指定する方法が変わってくるのは、カレントディレクトリ（カレントフォルダ、作業ディレクトリ）が異なっているためです。
では、カレントディレクトリについては無視し、サイト構成の上位階層から指定する方法を用いて上記を書き換えることにします。
上図の場合、topフォルダから構成されていますが、サイト構成の最上位ディレクトリ（フォルダ）を「/」で表します。つまり、cssフォルダ内にあるstyle.cssファイルを絶対パスにて指定すると以下のとおりとなります。
絶対パスでのcssファイルの適用方法
<link rel="stylesheet" href="/second/two/css/style.css">ただし、この書き方ができるのは、呼び出したいファイルが同じサイト内にある必要があります。
この書き方では、href属性で指定しているファイルパスの先頭が「/」から始まっていることがポイントになります。 絶対パスは、どのファイルから参照するにしてもパスが変わることがありませんので、先ほど紹介した3つのindex.htmlファイル内での指定方法が同じになります。
次に、呼び出したいファイルが同じファイル構成内にない場合を見てみましょう。
例えば、下図のような構成のサイトのtopフォルダにあるcssフォルダ内のstyle.cssファイルを呼び出したいとします。
絶対パスはサイトの最上位から呼び出し先のファイルがどこにあるかを示す必要がありますので、「sample.com」から「style.css」までを順に記述します。
この際、「sample.com」はこのサイトのドメイン名となるので「http://」のうしろから書き始めます。
sample.comのcssファイルの適用方法
<link rel="stylesheet" href="<http://sample.com/top/css/style.css>">ドメインとは？
コンピューターやネットワークは「IPアドレス」という 数値によって識別されていますが、それを分かりやすい文字に置き換えたものが「ドメイン」です。 ネットワーク上の「住所」と表現されることが多いです。
コメントを残す