基礎11. 絶対パスと相対パス
2018/02/22
この章について
画像元やページのリンク先は「絶対パス」と「相対パス」の2種類の指定があります。れぞれの違いを知り使い分けができるようにしましょう。
絶対パス
https://(またはhttp://)から始まるリンクを記述する方法です。ページの階層に関係なくリンクさせることができます。
<a href="https://web-manabu.com/">WEB MANABU</a>
<img src="https://web-manabu.com/logo.png" alt="WEB MANABU">
主に、外部サイトとのリンクに使用します。
注意点としてはリンク先のサイトのアドレスが変更されたり、サイトが閉鎖されるとリンク切れになってしまいます。
相対パス
ファイルの場所からリンク先の階層を記述する方法です。
<a href="index.html">トップ</a>
<img src="images/logo.png" alt="ロゴ">
ファイルから階層が下がるリンクは「フォルダ / ファイル」と記述します。
階層を下るたびにフォルダ名を追加します。
「フォルダ / フォルダ / ファイル」
フォルダとファイルを区切る記号は「/(スラッシュ)」を使用します。
階層が上るリンクは「.. / ファイル」となりフォルダ名をつけません。
../は、ドット ドット スラッシュと記述します。
階層が上がるたびに .. / を追加します。
相対パスは自身のサイト内のリンクや参照で使用します。注意点としては、フォルダ名、ファイル名を変更したり、ファイルの階層を変更するとリンク切れになります。
練習問題
下記をクリックしてダウンロードして解凍してください。
問題内容は「exercise.txt」を見てください。 完成品は「compフォルダ」に用意してあります。
path.zip
まとめ
- 絶対パスは、外部のサイトとのリンクに使用する
- 相対パスは、自身のサイト内のリンクに使用する