https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

絶対パスと相対パス

パス(path)とは ファイルやフォルダの置き場所を指定するものです。 パスには絶対パスと相対パスという指定方法があります。

■絶対パスと相対パス

絶対パスとは<a href="http://・・・・・・"> のようなURLの指定方法です。 ホームページの最上位階層から目的のファイルやフォルダの置き場所を指定します。

相対パスとは現在位置となる、あるHTMLファイルから見て目的の ファイルが何階層上にあるか、 何階層下に位置するかを指定する方法を言います。

文章ではわかりづらいので相対パスを図解で説明してみます。
現在位置となるHTMLファイルをstart.html、目的のファイルはgazou.jpg とします。

■下の階層から上の階層へリンクする場合

homepageフォルダ内の現在位置となる1階のstart.htmlという ページに デスクトップにある1階層上である2階のimageフォルダ内のgazou.jpgというファイル名の画像 を表示する場合・・・1つ上の階層にいく場合、下のソースのように ../フォルダ名/ファイル名というふうに記述します。
(2階層上なら../../フォルダ名/ファイル名)

1階のstart.html
1階
homepageフォルダ内にある1階のstart.htmlから2階のimageフォルダ のあるデスクトップに上がった(戻った)
後の画像→
2階のimageフォルダ
2階

start.htmlのソース

<img src="../image/gazou.jpg">

■上の階層から下の階層へリンクする場合

デスクトップのhomepageフォルダ内にある 現在位置となるstart.htmlのページにimageフォルダ内にある1階層下である地下1階のgazou.jpg を表示する場合・・・1つ下の階層にいく場合、下のソースのように ./フォルダ名/ファイル名、又はフォルダ名/ファイル名というふうに記述します。
(2階層下ならフォルダ名/フォルダ名/ファイル名)

1階のhomepageフォルダ
hp1階
1階のhomepageフォルダから地下1階のimageフォルダ内に降りた後の画像→ 地下1階のimageフォルダ
地下1階

start.htmlのソース

<img src="./image/gazou.jpg">
<img src="image/gazou.jpg">

■同じ階層でリンクする場合

デスクトップのhomepageフォルダ内にあるgazou.jpg を同じ階層にある現在位置となるstart.htmlという ページに表示する場合・・・同じ階層にあるファイルにいく場合、下のソースのように ファイル名だけの記述で済みます。

homepageフォルダと同じ階で
尚且つ双方のファイルが フォルダに格納されてない状態→
same
start.htmlのソース

<img src="gazou.jpg">

このエントリーをはてなブックマークに追加 Instagram