過去記事で、リンク先URLを記述する際は「外部リンク＝絶対パス」「内部リンク＝相対パス」を推奨してきました。
サイトのメンテナンス性を考慮したリンク先URLの指定方法(相対パスvs絶対パス)
絶対パスはURL全てを記述して指定するだけなので簡単ですが、相対パスは書き方がいくつもあるため、迷ってしまう経験がありました。
そんな時、普段使っているUNIXコマンドを思い出せば、問題なく記述できることを知ったのでまとめてみます。
目次
相対パスの記述は同じ階層・上の階層・下の階層で書き方が異なり、UNIXコマンドと同じ！
同じ階層の時はファイル名を指定するだけでOK
index.html上に、同じ階層のstyle.cssを指定したい場合は
<link rel="stylesheet" href="style.css">
と記述すれば大丈夫です。
一方、同様にUNIXコマンドで今の階層(ディレクトリ)内のファイルを検索したい場合、以下のようなコマンドを打つはずです。
cd style.css
/とか手前に付けないことがお分かりでしょうか。
上の階層の場合は「../」を上がりたい階層分記述する
～/html/contents.htmlという階層から、～/index.htmlを呼び出したいとします。(index.htmlはルートディレクトリに配置する必要があります。)
その場合、contents.htmlのファイル内では以下のように記述すれば良いです。
<a href="../index.html">インデックスページ</a>
同様のことをUNIXコマンドでやろうとすると、上の階層に上がるには以下のコマンドを打ちます。
cd .. cd index.html # もちろん、cd ../index.html と記述するのが正しいですが、 # ファイルの配置を覚えているケースは少ないため上記のように記述しました。
下の階層の場合、上の階層にいく場合の逆を行えば良い
～/index.htmlから～/html/contents.htmlを呼び出したければ、以下になります。
<a href="html/contents.html">コンテンツページ</a>
これもUNIXコマンドだと以下のようにやるでしょう。
cd html cd index.html # これもcd html/index.html で構いません。
自然とUNIXコマンドを打つ時にディレクトリの移動方法を学んでいるので、相対パスの指定の際はそれをそのまま活かせば良いのです。
