相対パス・絶対パス・ルートパスの記述方法

HTMLやCSSには画像やらページをリンクさせる時に、パス(path)を書かないといけないのは多少HTML見たことや触ったことがある人はわかると思います。

■パスとはなんぞや?
<a href=”https://whitebear.tech“>リンク</a>
↑の太字の部分がパスと呼ばれる部分

このパスの書き方は複数あってタイトルの通り、相対パス・絶対パス・ルートパスとありますが
今日は相対パスの書き方を忘れる自分の復習も兼ねてまとめておきます。

サイトの構成としてはこんな感じのものを想定して説明します。

URL:whitebear.tech
root ━ index.html

┣「img」━ a.gif

┗「about」━ about.html

相対パス

まずは俺もよく書き方を忘れる相対パスの書き方

■同じ階層にあるものは、そのままファイル名か「./ファイル名」
例:rootディレクトリからindex.htmlにアクセスする場合

■下の階層にあるものは、「./フォルダ名/ファイル名」
例:rootディレクトリからimgフォルダにあるa.gifにアクセスする場合

■上の階層にあるものは、「../ファイル名」
例:about.htmlからindex.htmlにアクセスする場合

webの勉強し始めたときから苦手な書き方だけど、小規模サイトであれば基本的な書き方らしい。
体感だけど3階層以上になると苦痛でしかないので、大規模サイトを作る場合は後述のルートパスを推奨。

絶対パス

次に絶対パスの書き方

■about.htmlにアクセスする場合

基本的には外部リンクに遷移される時以外使うことはほぼないはず。
ほんとにそれ以外あんま使ったことがない…。(指定されれば別だけど)

ルートパス

最後にオススメのルートパス

■同じ階層にあるものは、「/ファイル名」
例:rootディレクトリからindex.htmlにアクセスする場合

■下の階層にあるものは、「/フォルダ名/ファイル名」
例:rootディレクトリからimgフォルダにあるa.gifにアクセスする場合

■上の階層にあるものは、rootディレクトリから見て「/ファイル名」
例:about.htmlからindex.htmlにアクセスする場合

ソースの見方としては1番見やすいと思うのがルートパス。
例には出してませんが、
例えば[about]内のhtmlを「index.html」にしておくと、

なんて記述も可能!便利!!

問題はローカルでページ制作した場合、ルートパスの仕様上ちゃんと反映されないので、MAMPなどのローカルサーバー等の環境構築の手間があったり、慣れてない人だとわかりづらいのもあるかもしれませんが慣れるとほんと楽ですよ!

まとめ

各々パスの書き方でメリット・デメリットありますが、
個人的にも最近の仕事にもよく使っているのはルートパスです。
MAMPやらXAMPPでローカルの環境を整えないといけないデメリットは確かにあるけど、
環境さえできれば視覚的にも書き方的にもわかりやすいので、オススメ( ´∀`)b