こんにちは、佐藤です！！
先週、出張で静岡に行ってきました！静岡は素晴らしいですね。富士山は見えるし、お寿司は美味しいし。
僭越ながら満喫して参りました。あ、もちろん仕事もしてきましたよ（笑）
観光地として有名な沼津港にも行ってきました！日中はもちろん業務があったので、朝5時に起きて眠い目をこすりながら歩いて向かいました。
沼津港に到着したときにはまだ日が出ていなかったのですが、到着して少ししたらすぐに明るくなってきまして。幸運なことに一日で沼津港の2つの顔を見ることができたわけです！私は埼玉生まれ埼玉育ちで海とは無縁だったので、港の景色はとても新鮮でした！！
機会があればプライベートでもまた行きたいです！
さて、気持ちを切り替えて今週からまた頑張っていきます！！
おまたせしました。ここからが本題です！
HTMLでの画像表示。パスを理解しよう！
画像に限らずですが、特定のファイルを取得する際にはファイルがある場所を指定しなければいけません。要するに「どこどこの場所にあるなになにという名前のファイルを取得する」ということを記載しなければいけないわけです。その道順のことを「パス（Path）」といいます。
htmlでは
<a>タグのhref属性（リンク先）、<img>タグのsrc属性（読み込みたいファイルの場所）などで目にすることが多いと思います。
例）
<a href=”http://cuore.jp/”>
<img src=”../img/animal/dog.png”>
このパスの種類には大きく分けて2つ「絶対パス・相対パス」があります。
※厳密にはルート相対パス（サイトルート相対パス）という3つ目が存在します。少し複雑であるため今回は省略します。
ではそれぞれ見ていきましょう！
①絶対パス
絶対パスは「対象のファイルの位置を最初から最後までフルで記載する」方法です。
下記の画像をご覧ください！
例えばindex.htmlでdog.pngを指定したいとしましょう。
絶対パスは最初から最後までフルで道順を書くため
<img src=”https://animal.com/img/dog.png”>
と記載します。
これは「animal.comドメイン の imagフォルダ の dog.pngファイル」と記載しているわけです。
このように絶対パスは「http://ドメイン/フォルダ名/ファイル名」のように記載します。
絶対パスではドメインから目的のファイルまでの道順を記載するため、どのファイルからでも記載方法が同じです。
②相対パス
一方相対パスは「自分から対象のファイルまでの道順を記載する」方法です。
絶対パスの例と同じく、index.htmlでdog.pngを指定したいとしましょう。
つまり「index.htmlから見てdog.pngまでの道順」を記載します。
画像で表すと下記のようになります。
先に答えを書いてしまうと
<img src=”./img/dog.png”>
となります。
頭に付いてる「./」ってなんのこっちゃですよね。解説します！
階層に注目してください。index.htmlから見てdog.pngは「自分と同じ階層にあるimgフォルダの1つ下の階層」にありますね。
自分から見て同じ階層を指定するときは「./」と書きます。
このように自分から見て同じ階層のフォルダからたどっていくときは「./同階層のフォルダ名/ファイル名」のように記載します。
ちなみにこの「./」は省略できます。
そのため
<img src=”img/dog.png”>
と書いても正解です。というかこちらのほうがよく使われるそうです。
と、ここまで相対パスについて説明してきましたが、ここで問題が一つあります。
対象のファイルが同階層のフォルダをたどらないときはどうすればいいのでしょうか？？
②相対パス その２
下記の画像をご覧ください！
今度はsample.htmlでdog.pngを指定したいとしましょう。
道順としては
sample.html → １階層上のimgフォルダ → dog.png
となります。
このように階層を上がるときには「../」と記載します。
今回の場合は
<img src=”../sample/img/dog.png”>
と記載すれば正解です。
このように自分から見て上の階層のフォルダからたどっていくときは「../１階層上のフォルダ名/ファイル名」のように記載します。
相対パスでは自分から目的のファイルまでの道順を記載するため、指定するファイルによって記載方法が変わります。
ではどうやって使い分ける？
ここまで絶対パス・相対パスの基本的な使い方について説明してきました。
で、結局どっちを使えばいいのでしょうか？？
結論「現在自分が携わっているプロジェクトの方針に合わせる」としか言いようがないです…
参考までに双方のメリットを上げておくと
絶対パス
- URLをすべて書いてファイルの場所を指定するため、リンク切れを起こしにくい。
- 全体から見た位置関係が明確になるため、理解しやすい。
相対パス
- ローカル環境でも作動する。
- 記述が短くて済むため、作業効率が上がる。
です。
自身の状況に合った指定方法を選んでもらえればと思います。
ただし、必ず絶対パスを使わなければいけない場面があります。
その場面とはリンク先が外部のサイトであるときです。
相対パスは自分から見た対象のファイルの場所をたどるため、同じサーバー内のファイルしか指定できません。
そのため <a>タグで外部のサイトをリンク先に指定する場合には「絶対パス」を使いましょう！
以上、絶対パス・相対パスについてでした。
少しでも参考になったら嬉しいです！
最後まで読んでくださってありがとうございました！！