現役エンジニア・デザイナーの備忘録ブログ

2020.3.28
HTML・CSS

絶対パスと相対パスの違い【初心者向け / 使い分け】

パスとは特定の情報へたどり着くまでのルートのことです。ここでは絶対パスと相対パスの違いをわかりやすく解説していきます。

 

絶対パスと相対パスの違い

パスには絶対パスと相対パスがあります。

絶対パス

  • 誰がどの位置から見ても変わらない住所
  • URLで表記される
  • 外部リンクさせたい時に使う

 

相対パス

  • 今自分がいる場所から見た道のり
  • ファイルの階層で表記する
  • 内部リンクさせたい時や画像を表示したい時などに使う(ローカルでの開発時)

 

イラストで見るとこのようなイメージです。

 

コードで見るとこのようになります。

絶対パス

<a href="https://shiroi-ponzu.com/books/book-18/">

 

相対パス

<a href="books/book-18/">

 

それぞれの使い分け

絶対パス

主に外部サイトへリンクさせる時に使います。

 

相対パス

一般的に開発環境で使用するのはこの相対パスです。

 

ディレクトリ(中身の階層)が変更されないので、ドメインが変更(サイトのURLが変更)されても、修正しなくていいというメリットがあります。

 

構造が理解できれば迷わず使い分けることができると思います。よかったら参考にしてください。

関連記事