今回は「a href=””」でリンクを作成したり、ヘッダーでCSSやJavaScriptなどのソースを読み込む際に記述するファイルディレクトリのパスの効率的な書き方について説明していきます。
絶対パスと相対パスの違い
まず今回紹介する方法では絶対パスと相対パスの知識は必須です。（もう知ってる方は飛ばして下さい）
パスとは、コンピュータ内で特定の資源の所在を表す文字列のことをパスと言います。ストレージ内でファイルやディレクトリ（フォルダ）の位置を表すのに用いられるものです。
絶対パス
絶対パスとは、簡単に言えばURLそのものです。下記の記述は上記の画像を指定したコードです。赤字部分はURLそのものを記述して画像のファイル場所を指定しています。この書き方はどのファイルに記述しても必ず上記の画像が指定されます。この様な完璧な指定を絶対パスと言います。
img src=”https://kt-life.net/wp-content/uploads/2020/01/2BF2067E-F0B8-4AAA-AAB7-16F1187469DE.jpeg” alt=””
相対パスとは
相対パスは、読み込みたいファイルの階層から考えた記述の仕方をします。
当サイトの投稿ページのファイルは下記の「ここにある」の部分に置かれます。
https://kt-life.net/ここにある/〇〇〇〇/〇〇〇〇
「ここにある」の部分のファイルで画像の参照元を記述する場合は、上階層（https://kt-life.netの部分）の記述を省略することが出来ます。なので下記の青字部分の様に「/wp-content/…」からスタートした記述でも先程の画像が表示されます。
img src=”/wp-content/uploads/2020/01/2BF2067E-F0B8-4AAA-AAB7-16F1187469DE.jpeg” alt=”” /
ただし、この場合は「https://kt-life.net/」直下のみと限定されたファイルでしか参照出来ない不完全な記述です。この様な指定を相対パスと言います。
相対パスで狙ったファイルを読み込む方法
次に相対パスを使って、現ディレクトリから意図したファイルを読み込む方法を紹介します。（下記のテストサイトを使って紹介します。）
下記のファイル構造は、上記のテストサイトのindex.htmlを新しいファイルに格納させて分離させた状態です。この状態で分かれたimgファイルの中にある「gamenowadai2.jpg」の画像を読み込みます。
従来は「img src=”img/gamenowadai2.jpg”」の記述で読み込めていましたが、別のファイルにindex.htmlを入れたのでこの記述では読み込めなくなりました。
この場合は、「../」の記述で現在位置から一つ上に向ける指示を出します。（下記の様に）
img src=”../img/gamenowadai2.jpg”
下記のファイルが一部の記述に「../」を付け加えたindex.htmlです。
これをブラウザで読み込むと、下記の様に「../」でパスを正しく指定した部分は画像がしっかりと表示されています。
逆に記述を直してない部分は参照元が見つからず表示されていません。
CSSの記述も参照元を示すパスで指定します。
読み込みたいCSSが現ディレクトリ内にない場合は「../」で上階層に上げてから場所を指定しましょう。
また、上の上の階層を示す場合は「../」を増やしていけば良いだけです。
- ../で上階層
- ../../で更に上階層
以上が「現在地から特定ファイルのパスを記述する方法（絶対パスと相対パス）」でした。
この相対パスの記述の仕方を理解すると、同じ階層内にあるhtmlファイルと別階層にあるhtmlファイルのソースの記述をする際に「../」以外はコピペで量産して、「../」で場所を調整することが出来ます。
これを理解すると効率的にソースの記述ができ、さらに無駄の少ない記述になります。
