こんにちは
今回は初心者の私が画像ファイルのパス指定でハマった点について共有します。
内容を簡単に説明すると「../」がいる時、いらない時の違いです。
目次
絶対パスと相対パスの違い
前置きとして、絶対パスと相対パスの簡単な説明です。
ファイルの指定には絶対パスと相対パスがありますが、ざっくり説明すると以下のような感じ。
・絶対パス 目的ファイルまでの道のりを全て指定
・相対パス 今、自分がいる場所を基準にして目的ファイルまでの道のりを指定
絶対パス
/Users/user-name/Documents/html/img/img.jpg ←ローカル（自分のPC）
https://yoshiya-kiryu.com/html/img/img.jpg ←サーバー
相対パス
img/img.jpg ←ローカル/サーバー共に共通の書き方
../img/img.jpg ←ローカル/サーバー共に共通の書き方
上記の通り、絶対パスはローカルかサーバーかでファイル指定の書き方が変わり、相対パスだと変わりません。
なので、画像などファイルを指定する時はほぼ相対パスです。
絶対パスで記載するとサーバーにアップする時にファイルを修正する必要があるので少々面倒だからです。
画像ファイルの指定
さて、前述の通り相対パスは2つの書き方があります。
img/img.jpg
../img/img.jpg
それぞれ意味は違う為、どちらでも良いというわけには行きません。
初心者の私はその辺が分かっておらず、ハマってしまいました。
htmlファイルとcssファイルで画像を指定することがありますが、それぞれ以下のようになります。
・htmlファイルの「img」タグで画像ファイルを指定する場合。
<img src="img/img.jpg”>
・cssファイルの「background-image」プロパティで画像ファイルを指定する場合。
background-image: url("../img/img.jpg");
こんな感じでhtmlとcssで書き方が変わります。
cssで"img/img.jpg”のように記載すると画像が表示されません。
キャッシュの問題かとも思いましたが、理由は別にありました。
「../」がいる理由
ポイントは相対パスは今、自分がいる場所が基準になっているという点と
「../」は今、自分がいる場所より一つ上の階層を指定する点です。
私のフォルダの構成はいつも以下のような感じです。
・img/img.jpg
→今、自分がいる場所にimgフォルダがある
・../img/img.jpg
→今、自分がいる場所より一つ上の階層にimgフォルダがある
この為、htmlとcssとで目的ファイルの指定の書き方が変わります。
cssファイルがhtmlと同じ階層にある場合は「../」が不要になります。
こんな構成だとccsファイルも
・img/img.jpg
になりますね。
まとめ
仮に理由が分からず、htmlとcssで書き方が違うんだと覚えようとすると忘れますが理由が分かっていると、覚えやすいと思います。
違いの理由をしっかり認識していればもう大丈夫ですね！