パス指定の記述を忘れたときに見る記事【初心者向け】

HTML や CSS で画像を指定するときのパス指定、たまにやると上手くできなくないですか？？私だけ？？。なので、きちんとしたいなぁと思い、今回記事にまとめてみました。

本記事では、パスの指定先のファイルは画像で統一しています。

ファイルパス指定は
３種類

ファイルパス指定は３種類あります。

・絶対パス
・ルートパス（ルート相対パス）
・相対パス

記述方法は次の項から順番にまとめましたが、
まず、忘れたとき用の早見表をペタリ。

それぞれメリットデメリットがあるので、適材適所で使い分けるのがよいです。

「絶対パス」は
そのまま画像のURL

http://～ から始まる画像のパスをまるっとそのままぶち込んであげればOK！
とくに迷うことはないかと思います。

<div>
  <p>相対パスでの表記</p>
  <figure><img src="https://www.igmocho.com/dummy-site/images/img_01.jpg" alt="絶対パスで表示した画像"></figure>
</div>

絶対パスは、どこでも同じ場所を参照するため、ファイルの位置に関係なく画像が表示されるのが強みです。欠点としては、サイトのルートやドメインが変更になると修正が必要で、移植性が低いという点です。

「ルートパス」
（ルート相対パス）

先述の絶対パスの http:://～のサイトの URL 表記の部分を削って、スラッシュ以降の画像のパスを記述します。

<div>
  <p>ルートパスでの表記</p>
  <figure><img src="/dummy-site/images/img_01.jpg" alt="ルートパスで表示した画像"></figure>
</div>

ルートパスは、簡潔で読みやすく、メンテナンス性が高く複雑なディレクトリ構造にもオススメです。テスト環境ではリンクが機能しなくなってしまう可能性があるのが欠点です。

「相対パス」は
２パターンある

相対パスは、
２パターンあります。

キャッチーに説明してしまえば、
『上』か。『下』か。

それぞれをもう少し詳しく説明しますが、
『下』の方が素直で覚えやすいので、『下』から。

『下』：
現在の『html』と同一階層より下位階層のフォルダにある画像を表示させる場合、「 ./ 」を頭につけて、画像までのパスを記述します。

そして「 ./ 」は省略することが可能です。
省略してるサイトの方が多い気がしますが、どちらも知識として把握しておきましょう。

実際のコードにしてみるとこんな感じ。

<div>
  <p>相対パスでの表記</p>
  <figure>./をつける<img src="./images/move-down.jpg" alt="同一階層以下フォルダの中の画像（相対パス）"></figure>
</div>

<div>
  <p>「 ./ 」を省略したパターン</p>
  <figure>そのまま<img src="images/move-down.jpg" alt="同一階層以下フォルダの中の画像（./を省略）"></figure>
</div>

<div>
  <p>【比較用】絶対パスだとこんな感じ↓</p>
  <figure>./をつける<img src="https://www.igmocho.com/dummy-site/images/move-down.jpg" alt="同一階層以下フォルダの中の画像（絶対パス）"></figure>
</div>

『上』：
現在の『html』から上位階層のフォルダ、または上位階層のフォルダを経由してそこから下のフォルダにある画像を表示させる場合、「 ../ 」を上位階層の数だけ頭につけて、そこから画像までのパスを記述します。

実際のコードにしてみるとこんな感じ。

<div>
  <p>相対パスでの表記</p>
  <figure><img src="../dummy-images/move-up.jpg" alt="１階層、上のフォルダの中の画像（相対パス）"></figure>
</div>

<div>
  <p>【比較用】絶対パスだとこんな感じ↓</p>
  <figure><img src="https://www.igmocho.com/dummy-images/move-up.jpg" alt="１階層、上のフォルダの中の画像（絶対パス）"></figure>
</div>

２階層以上、例えば３階層上であれば、

<div>
  <p>３階層上の相対パスの表記例</p>
  <figure><img src="../../../test/test/images/〇〇.jpg" alt="３階層上の相対パスの表記例"></figure>
</div>

相対パスは、サイトを別のルートに移動しても、多くの場合修正が不要で、移植性が高いです。またURLに依存しないでテストできるためローカル環境に最適です。欠点としては、階層が深い場合「 ../ 」などが多用されて可読性が低下したり、誤解しやすくなります。またファイル構造を変更するとリンクが機能しなくなる場合もあります。

CSS で画像を指定するなら
ルートパスがオススメ！

CSS で背景画像などを設定したい場合は、ルートパスを使うのがオススメです。

例えば、htmlファイルと同じフォルダに CSS フォルダと images フォルダというよくある簡単なディレクトリ構造で、CSS フォルダ内の CSS ファイルから、images フォルダ内の img ファイルを背景画像として設定する場合、

相対パスの場合は、

background-image: url("../images/bg.jpg");

ルートパスの場合は、

background-image: url("/images/bg.jpg");

というような記述で設定することが可能です。

ここで、
CSS ファイルを css/design/ フォルダに移動した場合を考えてみましょう。

相対パスの場合は CSS ファイルの位置が変わるたびに修正が必要です。

background-image: url("../../images/bg.jpg");

一方、ルートパスの場合は CSS ファイルの場所に関係なくパスはそのままです。

background-image: url("/images/bg.jpg");

このように、
ルートパスは、ディレクトリ構造が変わっても画像の保存場所が一定であれば、同じ記述でアクセスできます。さらに、相対パスは「 ../ 」や「 ../../ 」といった記述が増えると、ディレクトリ構造の把握が難しくなりますが、ルートパスなら階層に依存しないため、簡潔で読みやすいです。何よりもメンテナンスが楽。特に大規模なプロジェクトや複雑なディレクトリ構造のプロジェクトでは真価を発揮すると思います！

まとめ

ファイルパス指定の方法は、「絶対パス」、「ルートパス」、「相対パス」の３種類あり、相対パスは、上の階層を経由する「 ../ 」の記述パターンとそのまま下の階層にいく「 ./ 」の２パターンの記述方法があります。

それぞれにメリットデメリットがあるため、適材適所で使い分けましょう！

関連投稿:

【初心者向け】カラーを設定する「値」の記述方法【CSS】 【初心者向け】a 要素について、調べてみた。【HTML】 【CSS】「リンク」に付ける疑似クラス【初心者向け】 【初心者向け】section という要素について調べてみた【HTML】