今回はそんな疑問にお答えしていきます。
Web制作で欠かせないけどちょっと躓きやすいファイルパスについて書いていきます。
ファイルパスとは？
ファイルパスとは、ファイルがある場所を示す文字列の事です。
パスというのは英語で「path」となり、日本語では道という意味になります。
つまりファイルまでの道という事になります。
このファイルパスには絶対パスと相対パスの2種類があります。
絶対パスとは？
絶対パスというのはいわゆるURLの事で、目的地を住所という絶対的な物で示しているような感じです。
例えば東京駅の住所は東京都千代田区丸の内一丁目ですが、全国どこから探しても東京駅の住所は変わりませんよね？
前回のブログ記事で言えば絶対パスは、
https://junpei-sugiyama.com/html-how-to-write/
となります。
まぁ絶対パスは難しくないと思います。
相対パスとは？
この相対パスがちょっと躓きやすいポイントです。
相対パスは自分がいる場所を基準として、目的地までの道を示すという形になります。
例えば東京駅の住所は東京都千代田区丸の内一丁目ですが、ここに行くまでの道のりは出発地によって異なります。
絶対パスが住所なのに対して、相対パスは自分がいる場所を基準としてその場所に行くまでの道のりとなります。
前回の記事で作成したファイルを元に説明したいと思います。
ファイルが同じ階層にいる場合
まずはindex.htmlからstyle.cssを読み込みたいと思います。
現在のファイル構成はこのようになっています。
この場合style.cssを読み込むのは簡単で、同じ階層にあるのでファイル名を書けばいいだけです（hrefの所です）
<link rel="stylesheet" href="style.css">
ファイルが同じ階層のフォルダの中にいる場合
今回はindex.htmlからこのcssフォルダの中に入っているstyle.cssを読み込む場合ですね。
この場合は次のようになります。
<link rel="stylesheet" href="css/style.css">まずは同じ階層にあるcssフォルダを指定して、スラッシュを付けた後にファイル名となります。
ファイルが1つ上の階層にいる場合
例えばファイル構成が次のようになっているとします。
このcssフォルダにはstyle.cssが入っていて、style.cssから背景画像.pngを読み込む場合はどうなるでしょうか？
今度は同じ階層でも下の階層でもなく、上の階層になります。
この場合、background-imageで読み込む場合は次のようになります。
background-image: url(../背景画像.png);index.htmlとは読み込み方が違いますが、ここではurlの中だけ見て下さい。
この「 ../ 」が1つ上の階層という意味です。
これで「../背景画像.png」は「style.cssの1つ上の階層にいる背景画像.png」という意味になります。
2つ上の階層の場合は「 ../../ 」となります。階層が増えるごとに../を増やせばOKです。
ファイルが1つ上の階層にいるフォルダの中にある場合
あとはこのパターンを覚えておけばWeb制作で使うファイルパスについては大丈夫だと思います。
今回のファイル構成は次のようになっているとします。
cssフォルダの中にstyle.cssが入っていて、style.cssからimgフォルダの中にある「背景画像.png」を読み込みたいと思います。
background-image: url(../img/背景画像.png);今までの合わせ技みたいな感じですね。
順番としては、
- style.cssから1つ上の階層に行く（../）
- その階層にあるimgフォルダを指定（img/）
- imgフォルダ内にあるファイル名を書く（背景画像.png）
となります。
このファイルパスの考えは慣れるまで少し時間がかかるかも知れませんが、
- cssが読み込まない
- 画像が表示されない
- jsが反映されない
など、ファイルパスが原因である可能性があるので、ここはしっかりと押さえておきましょう。