HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎11. 絶対パスと相対パス

      2018/02/22   hatano

この章について

画像元やページのリンク先は「絶対パス」と「相対パス」の2種類の指定があります。れぞれの違いを知り使い分けができるようにしましょう。

絶対パス

https://(またはhttp://)から始まるリンクを記述する方法です。ページの階層に関係なくリンクさせることができます。

主に、外部サイトとのリンクに使用します。
注意点としてはリンク先のサイトのアドレスが変更されたり、サイトが閉鎖されるとリンク切れになってしまいます。

相対パス

ファイルの場所からリンク先の階層を記述する方法です。

ファイルから階層が下がるリンクは「フォルダ / ファイル」と記述します。
階層を下るたびにフォルダ名を追加します。
「フォルダ / フォルダ / ファイル」
フォルダとファイルを区切る記号は「/(スラッシュ)」を使用します。 階層が下がる相対パス

階層が上るリンクは「.. / ファイル」となりフォルダ名をつけません。
../は、ドット ドット スラッシュと記述します。
階層が上がるたびに .. / を追加します。 階層を上る相対パス

相対パスは自身のサイト内のリンクや参照で使用します。注意点としては、フォルダ名、ファイル名を変更したり、ファイルの階層を変更するとリンク切れになります。

練習問題

下記をクリックしてダウンロードして解凍してください。
問題内容は「exercise.txt」を見てください。 完成品は「compフォルダ」に用意してあります。
path.zip

まとめ

  • 絶対パスは、外部のサイトとのリンクに使用する
  • 相対パスは、自身のサイト内のリンクに使用する

広告

 - HTML・CSS