相対パス、絶対パス、ルート相対パスの書き方

相対パス、絶対パス、ルート相対パスとは

パスとは英語で道、通路という意味です。

Webサイトから画像やCSSなどのファイルを読み込むときに

そのファイルがある場所を示すものです。

そもそも絶対・相対とは

絶対・相対という言葉を調べてみると

■絶対
他に比較するものや対立するものがないこと。

■相対
他との関係の上に存在あるいは成立していること。

デジタル大辞泉（小学館）

だそうです。これを踏まえて以下をみてください。

絶対パス

【例】絶対パスの場合
[jin-yohaku40]
[chat face=”mameshiba001.png” name=”まめしばくん” align=”right” border=”gray” bg=”none”]Aさんの家はどこ？？[/chat]
[chat face=”mameshiba001.png” name=”まめしばくん” align=”left” border=”gray” bg=”none”]東京都渋谷区1丁目1番地だよ[/chat]
[jin-yohaku50]
と「住所で答える」のが絶対パスです。

相対パス

【例】相対パスの場合
[chat face=”mameshiba001.png” name=”まめしばくん” align=”right” border=”gray” bg=”none”]Aさんの家はどこ？？[/chat]
[chat face=”mameshiba001.png” name=”まめしばくん” align=”left” border=”gray” bg=”none”]ここから３つ隣の家だよ[/chat]
[jin-yohaku50]
と「今いる場所から説明する」のが相対パスです。

絶対パスの書き方

一番わかりやすいのが絶対パスです。

絶対パスとは読み込みたいファイルのURLそのものを指定する方法です。

<img src=”https://〜〜〜〜〜〜〜〜〜〜/gazou.jpg”>

といった具合ですね。

相対パスの書き方

読み込み元のファイルの場所を基準に、読み込むファイルの場所を指定する方法です。

HTMLから同じフォルダ内の画像を読み込む

以下のようにHTMLから同じフォルダの中にある画像を読み込みたい場合

[jin-yohaku50]
<img src=”gazou.jpg”>と書きます。
[jin-yohaku40]

HTMLと同じ階層にimgフォルダがあり、その中の画像を読み込む

[jin-yohaku50]
<img src=”img/gazou.jpg”>と書きます。
[jin-yohaku40]

階層を戻って指定する

階層を戻って指定することも可能です。どういうことかというと

srcフォルダとimgフォルダが同じ階層にあって
それぞれ、srcフォルダの中にHTML、imgフォルダの中にgazou.jpgがある場合です。

[jin-yohaku50]
<img src=”../img/gazou.jpg”>と書きます。

..は一つ上の階層に戻るという意味です。
[jin-yohaku10]
2つ上の階層を指す場合は../../img.gazou.jpgと書きます。

ルート相対パスの書き方

Webサイトのトップページを基準にして、読み込むファイルの場所を指定する方法です。

例えば

https://〜〜〜〜〜〜〜〜〜〜/.index.htmlがサイトのトップページだった場合

https://〜〜〜〜〜〜〜〜〜〜/が基準になります。

書き方は、必ずスラッシュが先頭にきます。

index.htmlと同じ階層に画像があれば

<img src=”/gazou.jpg”>

index.htmlと同じ階層にimgフォルダがあって、その中に画像があれば

<img src=”/img/gazou.jpg”>

と指定します。