リンク先URLのパス(path)で上や下の階層(ディレクトリ)を表す際の書き方はUNIXコマンドで覚える

2018年9月21日プログラミングpath,UNIX,URL,コマンド,ディレクトリ,パス,リンク,上,下,階層

過去記事で、リンク先URLを記述する際は「外部リンク＝絶対パス」「内部リンク＝相対パス」を推奨してきました。

絶対パスは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コマンドを打つ時にディレクトリの移動方法を学んでいるので、相対パスの指定の際はそれをそのまま活かせば良いのです。

2018年9月21日プログラミングpath,UNIX,URL,コマンド,ディレクトリ,パス,リンク,上,下,階層