【HTML&CSS】絶対パスと相対パスの違いと書き方

こんにちは、@AWAKOJIです。

この記事では、絶対パスと相対パスの違いと書き方について簡単にわかりやすく説明しました。

プログラミング初心者の僕が3か月前の僕に向けて書いた内容です。

もしよかったらご覧ください。

パスとは?

パスとは英語でかくと“path”
つまりのことです。

ある画像を表示したり、あるページをリンクするとき、読み込むファイルまでの道順を教えてくれる文字列がパスというわけです。

パスには

  • 絶対パス
  • 相対パス

の2種類があります。

絶対パスと相対パスを簡単に理解する

2つの違いを簡単に説明します。

2つの違いを理解するために以下の話を読んでみてください。

おばあちゃんがAWAKOJIの家を訪ねようとして道に迷いました。

ある家の住人に道を尋ねます。

おばあちゃん
『あのう、○○町×丁目△番地のAWAKOJIさん家はどこでしょう?』

住人は答えます。

住人
『あー、その人の家なら隣だよ』

この話でおばあちゃんが言った『○○町×丁目△番地のAWAKOJIさん家』というのが絶対パスです。

そして、住人が言った『隣』というのが相対パスです。

つまり絶対パスとは、誰が見てもわかる場所のことを言います。

一方で相対パスは、ある場所を基準にして示される場所のことを言います。

それぞれもう少しだけ詳しく説明していきます。

絶対パスとは?

英語で“absolute path”と書きます。

すでに説明したとおり『○○町×丁目△番地のAWAKOJIさん家』のことです。

つまり、見ればだれでもそのファイルのまでの道がわかるのが絶対パスです。

パソコン内のあるファイルの場所を絶対パスで書くと、

C:フォルダ名/フォルダ名/フォルダ名/ファイル名

というような感じになります。

インターネット上では、ファイルの場所を絶対パスで書くと

https://○○○○.○○.○○

というような感じです。

つまりインターネット上の絶対パスはURLというわけですね。

絶対パスをつかうのはほとんどURLになることが多いです。

そのため、『絶対パス=URL』と考えると理解しやすいです。

相対パスとは?

英語で“relative path”と書きます。

すでに説明したとおり『隣』というのが相対パスにあたります。

コードを書いているファイルから見た、目的のファイルまでの道がわかるのが相対パスです。

相対パスは他人のサイトのファイルは書くことができません

別のサーバになってしまい相対的な場所を表示できないからです。

絶対パスの書き方

絶対パスは他人のサイト(別のサーバ)のリンクを貼るときに使います。

絶対パスを使ってリンクをはってみます。

ご覧のとおり、絶対パスというのは、URLのことです。

正確に言うとURLは絶対パスのうちの一つですが、絶対パス=URLという理解でも初心者の間は問題ないでしょう。

相対パスの書き方

以下の画像をご覧ください。

これはAWAKOJIフォルダの中身です。

a.htmlを基準にしてそれぞれのファイルへのリンクを貼ってみましょう。

同じフォルダ内の場合

a.htmlファイルの中で、b.htmlファイルのリンクを貼ってみます。

同じフォルダ内にあるファイルを読み込むときはファイル名だけを入力すればOKです。
ちなみにb.htmlの前にある「.」はカレントディレクトリといって現在のディレクトリ(フォルダ)を意味しています。

./b.htmlを読みくだくと

.         ⇒ 現在のフォルダ

/         ⇒ の中の

b.html ⇒ b.htmlファイル

となります。

ディレクトリとはフォルダのことです。

※最初の「./」は省略することもできます。

下層ファイルの場合

a.htmlファイルの中でc.htmlファイルのリンクをはります。

./JI/c.htmlを読みくだくと

.           ⇒   現在のフォルダ

/          ⇒    の中の

JI         ⇒    JIフォルダ

/          ⇒    の中の

c.html  ⇒    c.htmlファイル

となります。

上層ファイルの場合①

a.htmlファイルの中でd.htmlファイルのリンクをはります。

上の階層のファイルを読み込む場合、使うのは「..」です。

これで「一つ上の階層の」という意味があります。

../d.htmlを読みくだくと

..    ⇒  一つ上の階層のフォルダ

/     ⇒  の中の

d.html   ⇒  d.htmlファイル

となります。

上層ファイルの場合②

a.htmlファイルの中でe.htmlファイルのリンクを貼ります。

二つ上の階層なら「../..」と二つ書きます。

../../e.htmlを読みくだくと

..     ⇒ 一つ上の階層

/      ⇒ の

..     ⇒ 一つ上の階層の

e.html  ⇒ e.htmlファイル

となります。

もうわかると思いますが、階層があがるごとに「..」が増えるというわけです。

上層ファイルの下層ファイル

最後にa.htmlファイルの中でf.htmlのリンクを貼ります。

../WA/f.htmlを読みくだくと

..    ⇒一つ上の階層
/     ⇒の
WA   ⇒WAフォルダ

/    ⇒内の
f.html ⇒f.htmlファイル

となります。

絶対パスと相対パスどちらで書くか?

同じサーバであれば、絶対パスでも相対パスでも読み込むことはできます。

URLを書けばいいわけなので絶対パスの方がややこしくなさそうですよね。

でも絶対パスで書くと、将来サイトを引っ越ししてドメインが変わった場合、リンク切れを起こすため修正が必要になってきます。

相対パスで書いておけばドメインが変わってもフォルダ名、ファイル名に変更はありません。

そのためできるだけ相対パスで書いた方がいいでしょう。

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか?

  • ググるのが面倒
  • エラーの対応に1日消費
  • 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。

おすすめ記事

フォローする