【絶対パスと相対パスについて 】
「パス」が、表示したいファイルがどこにあるのかを示す記述のことだと、言葉で理解していても、記述方法や、相対パスと絶対パスの違いがいまいちわからず、なかなか指定したいファイルにたどり着くことができなかったりしていませんか？
ネットで調べてみても、コーディング初心者の頃のわたしにはなかなか理解することができず大変でした…。
それぞれのパスの違いや記述方法についてなんとなくはわかるけど、いまいち理解できていない方のために絶対パスと相対パスについて解説します！
１ 【そもそも、パスってなんのこと？】
絶対パス、相対パスを理解する前に、そもそもパスってなに？という方のためにまずはパスについて解説します。
パスとは、
使用したいファイルがどこにあるのか、場所を示す文字列のことです。
使用したいファイルが保存されている場所までの道順を、PCに対して伝える記述、ということです。
そして、伝え方にはいくつかの方法があります。
伝え方には、相対パスと絶対パス、ルート相対パスの３つがあります。
２ 絶対パスと相対パスってなに？
パスにはいくつか種類があります。
１絶対パス
２相対パス
３ルート相対パス
この３つパスの違いは、使用したいファイル（ゴール）へ向かうスタート地点にあります。
【絶対パス】
指定したいファイルをURL(誰からみても変わることのない道順)で指定する
スタート地点に関係なく、変わることのないゴール（住所）を伝える
例
「お住い（指定したいファイル）はどちらですか？」という問いに対し
「東京都品川区1-2-3（URL）です」と伝えるのが絶対値
記述方法
URLで記述する
例
https://webcreatetips.com/
このURLをクリックすれば誰でも同じところへ移動することができます。
つまり、どこが出発地点であっても（AさんのPCからでも、Bさんのスマホからでも）、指定された住所に向かえば目的地に誰もがたどり着ける、という指定方法が絶対パスです。
【相対パス】
指定したいファイルを自分のいる場所から（自分のいる位置によって毎回伝え方が変化する）指定する
自分が今編集しているファイルをスタート地点として説明する
例
「お住い（指定したいファイル）はどちらですか？」という問いに対し
「ここ（今現在編集しているファイル）から真っ直ぐ進んで２つ目の角を曲がったところ（指定したいファイルまでの道順）です」
記述方法
./css/style.css
初めて相対パスの記述を見ると「なにこれ？」って思いますよね、わかります。混乱します。これは日本語ではなくパソコン用の言葉で記述されているのでわかりにくいですが、記述を分解してひとつひとつを日本語に翻訳するとこうなります。
【今 編集しているファイルから見て】という、目指しているファイルに対して、相対的な位置をこの一行で示しています。
【今 編集しているファイルから見て】
./ → 同じ階層にある
css → css と名付けられているフォルダ
/ → の中にある
style.css → style.css と名付けられているファイル
こんな感じになります。
/ (スラッシュ)に挟まれているアルファベットは単純にフォルダやファイルの名前です。
文頭についている ./ には種類があります。
【今 編集しているファイルから見て】
./ → 同じ階層にある
【今 編集しているファイルから見て】
../ → ひとつ上の階層にある
【今 編集しているファイルから見て】
../../ → ふたつ上の階層にある
という感じです。
また、指定したいファイルが下階層にある場合、
./フォルダ名/ファイル名
さらに下にある場合
./フォルダ名/フォルダ名/ファイル名
という感じで下階層を指定していきます。
【ルート相対パス】
指定したいファイルを常に最上位階層（サーバールートの直下）をスタート地点として指定する
最上位階層(ルート)とは、制作時にwebのデータを入れているフォルダの一番最初に出てくる階層のことです。
例
「お住まい(指定したいファイル)はどちらですか？」 という問いに対して
「日本の東京都品川区1-2-3です」
日本に住んでいる人は自分のがいる位置がどこであっても常に日本から伝える
スタート地点が常に日本という大きな枠（最上位階層）から説明する
【記述方法】
/css/style.css
書き方が相対パスに似ています。
相対パスとの違いは、編集しているファイルが変わってもパスの書き方が変化しない点です。
/（スラッシュ）をつけることで、最上位階層から見て、指定したいファイルどこにあるのか、という道順を指定しています。
ルート相対パスの一番のメリットは、ファイル同士の相対的な位置関係が変わってもいちいちパスを書き直す必要がないところです。とっても便利！
【初心者でもパスの指定怖くない！】
【おしまい】
