はいどうもこんにちは、双極くんです(^^)/
今回はHTMLの相対パスと絶対パスについて学んで行きたいと思います。
まずはパスとは何なのでしょうか？
目次
パスとは
パス(path)とは「道・通り道」の事を指します。
私たちがどこかへ出かける際の目的地まで行く道のりというイメージと同じように、目的のファイルまでの行き方などの道のりです。
このパス(path)には相対パスと絶対パスの２つがあります。
では、まず相対パスについて学んで行きましょう。
相対パスとは
相対パスとは現在作業しているファイルから見て、共有したいファイルはどこにあるのかを示す方法です。
今いる場所を基準にして相手がどこにいるのか伝える書き方をします。
こういう書き方をします。
- 今いる場所にある他のファイルは→ファイル名
- 今いる場所の「フォルダ」に中のファイルは→フォルダ名/ファイル名
- 今いる場所の1階層上にあるファイルは→ ../ファイル名（../で1階層上を意味）
- ‥‥‥‥‥‥2階層上にあるファイルは→ ../../ファイル名（3階層上は../../../となる）
このように相対的にありとあらゆる場所を指定することが出来ます。
例えるなら、相対パスとは「ココを出て、右に出たら最初の角を左に曲がった先にあります」という道案内のようなものです。相対パスの場合は今いる場所がどこであるかによって目的地が変わることになりますね。
これに対して絶対パスというものはどういう事でしょうか？
絶対パスとは
絶対パスとは相手がどこにいるのかを確実に伝える書き方です。
これはURLに相当するものです。
例えるなら、絶対パスは道案内で住所を伝えるようなものです。どこから出発しても住所が分かっていれば確実にたどり着けるというわけです。
実際にやってみる
では相対パスについて実際にやってみるとどうなるのかを見て行きましょう！
これからアンカータグを利用して相対パスを学んで行きたいと思います。
相対パスを書く前の準備
ファイルを用意する
今回は以下の通り3つのファイルを用意しました。これにならってコードエディタで書いてみましょう。
(私はVScodeを利用しています。" "(ダブルクォーテーション)の中にはまだ何も記入しておりません。)
1つ目はindex.htmlファイルです。
２つ目はtest.htmlファイルです。
３つ目はsub.htmlファイルです。
フォルダとファイルの関係性を確認する
この３つのファイルの関係性は以下のように行っています。これにならってファイル構成を整理してみましょう。
HTMLフォルダの中身をこのように整理してみました。
そして、以下ようにtryフォルダの下にsub.htmlファイルがあるという感じにしました。
では、この３つのファイルを行ったり来たり出来るように書き込みを行っていきましょう。
相対パスー３つのファイルを行ったり来たりする
indexから飛ぶ
まずindexファイルをGoogle Chromeから開いてみるWebページ上ではこのように表示されます。これは" "(ダブルクォーテーション)の中にはまだ何も記入していないページです。
このWebページではtestとsubのアンカータグが用意されているだけの状態です。
ですからどちらをクリックしてもどこにも飛ぶことはありません。
ではここからindexからtestやsubに飛ぶための相対パスの書き方をご紹介していきます。
indexからtestに飛ぶための相対パスの書き方
まずはindexファイルからtestファイルに飛ぶための書き方を実際にやってみましょう。
HTMLのファイルを見てみるとtestファイルはindexファイルと同じところにあります。
この場合どのように書いたら良いかは上述の方で学習した相対パスとは‥‥‥の説明を見れば確認出来ます。
この相対パスとは‥‥‥の説明を見ると、indexファイルからtestファイルに飛ぶ場合は
- 今いる場所にある他のファイルは→ファイル名
となっていますので単純に
と書けばいいという事になります。
indexからsubに飛ぶための相対パスの書き方
つぎにindexからsubに飛ぶための相対パスの書き方ですが、フォルダとファイルの関係性を見ますとsubというファイルはtryというフォルダの下にありました。
ですからこの場合は上の相対パスとは‥‥‥の説明から
- 今いる場所の「フォルダ」に中のファイルは→フォルダ名/ファイル名
ですのでこのように書きます。
では実際にこの2つを書いたコードをご覧ください。
そしてこれに倣って実際に書いてみましょう。
indexからtest、indexからsubに飛ぶファイルをエディタに書いて確認する
それでは以下のindexファイルからtestファイルへ、indexファイルからsubファイルへ飛ぶためのコードをご覧下さい。
以下のコードに倣って実際に書いてみましょう。
それからこのindexファイルをプログラムから開いて(Google Cromeを選択)みましょう。
するとWebページには以下のようindexファイルが表示されました。これがデフォルトのページです。
では、こちらのデフォルトのWebページに表示されているtest subのうちtestの方をクリックしてみてください。
すると
このように このページはtestです。 とWebページに表示されてtestファイルに飛んだことが確認出来るはずです。
その下にはindex subと表示されます。
そして、ここで一旦デフォルトのページに戻り(←左矢印をクリック)ましょう。
次にsubの方ををクリックしてみましょう。
すると
このように このページはsubです。 とWebページに表示されsubファイルに飛んだことが確認出来きるはずです。
それでは次にtestファイルからindexファイル、testファイルからsubファイルに飛ぶための相対パスの書き方をご紹介します。
testから飛ぶ
testからindexに飛ぶための相対パスの書き方
では、今度はtestファイルからindexファイルへ飛ぶ相対パスはどう書くのか見て行きましょう。
再度、上述の相対パスとは‥‥‥の説明を確認してみます。
ファイルの関係性は以下のようになっていましたね。
testファイルから見てindexファイルに飛ぶためには相対パスとは‥‥‥の説明を見れば…
- 今いる場所にある他のファイルは→ファイル名
となっていますので単純に
と書きましょう。
testからsubに飛ぶための相対パスの書き方
次にtestからsubに飛ぶ相対パスを書く場合はどうなるのでしょうか。
この場合はtestファイルを基準にしてsubファイル(tryフォルダの下にあります)を見ます。
これを上述の相対パスとは‥‥‥の説明で確認すると…
- 今いる場所の「フォルダ」に中のファイルは→フォルダ名/ファイル名
となっていますので
と書きましょう。
testからindex、testからsubに飛ぶファイルをエディタに書いて確認する
では実際にこのtestからindex、testからsubへ飛ぶということをまとめてエディタに以下のように書いてみましょう。
このtestファイルをプログラムから開いて(Google Cromeを選択)みましょう。
すると以下のようにWebページ上にはtestファイルが表示されます。これがデフォルトのページです。
このページのindexの方をクリックするとこうなります。
このように、indexファイルに飛んでいるのが確認出来るはずです。
では今度はデフォルトのページに一旦戻ってsubをクリックしてみましょう。
すると以下のようにsubファイルに飛んでいることが確認出来ると思います。
では今度はsubファイルからみてindexファイルやtestファイルに飛ぶための相対パスの書き方を見てみましょう。
subから飛ぶ
subからindexに飛ぶための相対パスの書き方
まずsubから見るとindexは1つ上の階層ですので、ここで../が登場します。
このようにsubから見るとindexは1つ上の階層であるということは、上述の相対パスとは‥‥‥の説明によると
- 今いる場所の1階層上にあるファイルは→ ../ファイル名
になりますので
と書くことが出来ます。
subからtestに飛ぶための相対パスの書き方
次にsubからtestを見るとこれも1つ上の階層にあります。
ですので、この場合も
と書くことが出来ます。
では実際にこのsubからindexに飛ぶ、subからtestに飛ぶプログラムを書いてみましょう。
subからindex、subからtestに飛ぶファイルをエディタに書いて確認する
では、subからindex、またsubからtestに飛ぶファイルを実際にエディタに書いてみましょう。
以下のように書いてみましょう。
それから、このファイルを実際にWebページに表示させてみます。
以下のように表示されるはずです。このページがデフォルトです。
では、まずindexをクリックしてみてください。
すると、このようにindexファイルのページに飛んだことが確認出来ます。
つぎに、今回はデフォルトのページに戻らずにtestをクリックしてみてください。
このようにデフォルトに戻らなくてもtestファイルのページに飛んだことが出来ました。
同様に、前のページに戻らずにtestをクリックすればtestファイルに、subをクリックすればsubファイルに、indexをクリックすればindexファイルに次々に飛ぶことが出来るプログラムを作成することが出来ました。
こうして
- test、subに飛ぶindexファイル
- index、subに飛ぶtestファイル
- index、testに飛ぶsubファイル
の３つの相対パスで書いたファイルよって、それぞれのファイルのページを行ったり来たり出来るようになりました。
このようにして相対パスを使うことで
このHTMLフォルダごと移転させた時や誰かに渡したり他のサーバーに移したとしても、上記のようなファイルの関係性さえ変わっていなければ、どんな場所でもこのファイルの行き来を再現させることが出来るようになります。
これが相対パスのメリットです。よくプログラミングではテスト環境と本番環境が違う際に使われることが多いので是非覚えておきましょう！
まとめ
今回のプログラミング学習part13では相対パスと絶対パスについて学習することが出来ましたが、絶対パスに関しては住所のようなものでURLを記述することになると思うので問題はないと思います。
特に今回覚えなければならなったのは相対パスの方でしたね。
今回の学習ではindex.html、test.html、tryフォルダの下にsub.htmlを用意してそれぞれのそのファイル以外の2つのアンカーを用意した後、3つの相対パスによるファイルをすべて完成させることにより、3つのファイルを行ったり来たりできるプログラムを作成できました。
最後にもう一度相対パスの書き方を復習しておきましょう。
- 今いる場所にある他のファイルは→ファイル名
- 今いる場所の「フォルダ」に中のファイルは→フォルダ名/ファイル名
- 今いる場所の1階層上にあるファイルは→ ../ファイル名（../で1階層上を意味）
是非この相対パスを覚えて実際に活用して行きましょう。
学び
すべての人は上位の権威に従わなければなりません。存在する権威は神によって相対的な地位に据えられています。
（ローマ13:1）
