こんにちは、＠AWAKOJIです。
この記事では、絶対パスと相対パスの違いと書き方について簡単にわかりやすく説明しました。
プログラミング初心者の僕が3か月前の僕に向けて書いた内容です。
もしよかったらご覧ください。
この記事の内容
パスとは？
パスとは英語でかくと“path”。
つまり道のことです。
ある画像を表示したり、あるページをリンクするとき、読み込むファイルまでの道順を教えてくれる文字列がパスというわけです。
パスには
- 絶対パス
- 相対パス
の2種類があります。
絶対パスと相対パスを簡単に理解する
２つの違いを簡単に説明します。
２つの違いを理解するために以下の話を読んでみてください。
おばあちゃんがAWAKOJIの家を訪ねようとして道に迷いました。
ある家の住人に道を尋ねます。
おばあちゃん
『あのう、○○町×丁目△番地のAWAKOJIさん家はどこでしょう？』
住人は答えます。
住人
『あー、その人の家なら隣だよ』
この話でおばあちゃんが言った『○○町×丁目△番地のAWAKOJIさん家』というのが絶対パスです。
そして、住人が言った『隣』というのが相対パスです。
つまり絶対パスとは、誰が見てもわかる場所のことを言います。
一方で相対パスは、ある場所を基準にして示される場所のことを言います。
それぞれもう少しだけ詳しく説明していきます。
絶対パスとは？
英語で“absolute path”と書きます。
すでに説明したとおり『○○町×丁目△番地のAWAKOJIさん家』のことです。
つまり、見ればだれでもそのファイルのまでの道がわかるのが絶対パスです。
パソコン内のあるファイルの場所を絶対パスで書くと、
C:フォルダ名/フォルダ名/フォルダ名/ファイル名
というような感じになります。
インターネット上では、ファイルの場所を絶対パスで書くと
https://○○○○.○○.○○
というような感じです。
つまりインターネット上の絶対パスはURLというわけですね。
絶対パスをつかうのはほとんどURLになることが多いです。
そのため、『絶対パス＝URL』と考えると理解しやすいです。
相対パスとは？
英語で“relative path”と書きます。
すでに説明したとおり『隣』というのが相対パスにあたります。
コードを書いているファイルから見た、目的のファイルまでの道がわかるのが相対パスです。
相対パスは他人のサイトのファイルは書くことができません。
別のサーバになってしまい相対的な場所を表示できないからです。
絶対パスの書き方
絶対パスは他人のサイト(別のサーバ)のリンクを貼るときに使います。
絶対パスを使ってリンクをはってみます。
|
1 |
<a href="https://positivelifeshow.com">AWAKOJIのブログだよ</a> |
ご覧のとおり、絶対パスというのは、URLのことです。
正確に言うとURLは絶対パスのうちの一つですが、絶対パス=URLという理解でも初心者の間は問題ないでしょう。
相対パスの書き方
以下の画像をご覧ください。
これはAWAKOJIフォルダの中身です。
a.htmlを基準にしてそれぞれのファイルへのリンクを貼ってみましょう。
同じフォルダ内の場合
a.htmlファイルの中で、b.htmlファイルのリンクを貼ってみます。
|
1 |
<a href="./b.html">bページのリンクだよ</a> |
同じフォルダ内にあるファイルを読み込むときはファイル名だけを入力すればOKです。
ちなみにb.htmlの前にある「.」はカレントディレクトリといって現在のディレクトリ(フォルダ)を意味しています。
./b.htmlを読みくだくと
. ⇒ 現在のフォルダ
/ ⇒ の中の
b.html ⇒ b.htmlファイル
となります。
ディレクトリとはフォルダのことです。
※最初の「./」は省略することもできます。
|
1 |
<a href="b.html">bページのリンクだよ</a> |
下層ファイルの場合
a.htmlファイルの中でc.htmlファイルのリンクをはります。
|
1 |
<a href="./JI/c.html">cページのリンクだよ</a> |
./JI/c.htmlを読みくだくと
. ⇒ 現在のフォルダ
/ ⇒ の中の
JI ⇒ JIフォルダ
/ ⇒ の中の
c.html ⇒ c.htmlファイル
となります。
上層ファイルの場合①
a.htmlファイルの中でd.htmlファイルのリンクをはります。
|
1 |
<a href="../d.html">dページのリンクだよ</a> |
上の階層のファイルを読み込む場合、使うのは「..」です。
これで「一つ上の階層の」という意味があります。
../d.htmlを読みくだくと
.. ⇒ 一つ上の階層のフォルダ
/ ⇒ の中の
d.html ⇒ d.htmlファイル
となります。
上層ファイルの場合②
a.htmlファイルの中でe.htmlファイルのリンクを貼ります。
|
1 |
<a href="../../e.html">eページのリンクだよ</a> |
二つ上の階層なら「../..」と二つ書きます。
../../e.htmlを読みくだくと
.. ⇒ 一つ上の階層
/ ⇒ の
.. ⇒ 一つ上の階層の
e.html ⇒ e.htmlファイル
となります。
もうわかると思いますが、階層があがるごとに「..」が増えるというわけです。
上層ファイルの下層ファイル
最後にa.htmlファイルの中でf.htmlのリンクを貼ります。
|
1 |
<a href="../WA/f.html">fページのリンクだよ</a> |
../WA/f.htmlを読みくだくと
.. ⇒一つ上の階層
/ ⇒の
WA ⇒WAフォルダ
/ ⇒内の
f.html ⇒f.htmlファイル
となります。
絶対パスと相対パスどちらで書くか？
同じサーバであれば、絶対パスでも相対パスでも読み込むことはできます。
URLを書けばいいわけなので絶対パスの方がややこしくなさそうですよね。
でも絶対パスで書くと、将来サイトを引っ越ししてドメインが変わった場合、リンク切れを起こすため修正が必要になってきます。
相対パスで書いておけばドメインが変わってもフォルダ名、ファイル名に変更はありません。
そのためできるだけ相対パスで書いた方がいいでしょう。
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール
独学でプログラミングを勉強するのは大変じゃないですか？
- ググるのが面倒
- エラーの対応に1日消費
- 重要なコードがわからない
お金はかからないものの、かなり効率が悪いです。
『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。
代表的なスクールは以下の２つ。
- TechAcademy
web系、アプリ系いずれもOK
完全オンラインでプログラミングを学習したい方 - テックキャンプ
web系、アプリ系いずれもOK
教室またはオンラインで学習したい方
この２つには以下のような特典もあります。
TechAcademy
- 1週間の無料体験
- １コース申し込むと、もう１コースプレゼント
テックアカデミー
- 1週間以内に申告あれば全額返金
- 転職できなかったら全額返金
かなりお得です。
確かにどのスクールも本格的にやれば20～30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。
目安の報酬をまとめておくと、
- ランサーズ：1件10万くらい
- 中小企業：1件30万くらい
- 大手企業：桁違い
こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。
この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。
テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。