- 自分のWebサイト内で内部リンクを作りたいけど、どうすればいいのだろう？
- 相対パスと絶対パスとはなに？どうちがうの？
- 相対パスと絶対パスはどちらをよく使うの？
今回はこのような疑問に答えます。
今回学習する<a>タグの相対パスと絶対パスを使えるようになると下の画像のようにリンク先を作ることができます！
それでは見ていきましょう。
本記事のテーマ
【初心者向け】相対パスと絶対パスについて
目次
自己紹介
イマタケ(@imatakeblog)
○プログラミング学習歴3か月
○独学でHTML5/CSS3を学習修了
○Webサイト制作数件受注
なのでプログラミング初学者の気持ちはよく分かります。一緒に頑張りましょう！
テーマの要点
まずはこちらの画像をご覧ください。
今回の要点は３つあります。
- そもそもパス(path)とは何か？
- 相対パスと絶対パス
- 相対パスと絶対パスの違い
それでは見ていきましょう。
そもそもパス(path)とは何か？
まずパス(path)とは「道・経路」のことを指します。
何の道かというと、「リンクを飛ばしたい情報(サイトやファイル)までの道」のことを指します。
車を運転するときにカーナビを設定する方は目的地を設定してそこにたどり着くまでの道のりを調べますよね？
イメージとしては、目的地までの道のりがパス(path)で、目的地が共有したいファイルやサイトです。
また目的地までの道のり(path)を示す方法は主に２つあります。
相対パスと絶対パスです。
相対パスと絶対パス
相対パス
相対パスとは現在作業しているフォルダから見て共有したいサイトやファイルはどこにあるのか示す方法です。
車のイメージだと「現在地から一番近いコンビニ」という指定方法は相対パスになります。
実際の例を見てみましょう。
今回は上のような配置になっています。
hello.htmlとtest.htmlとファイルtryが同じフォルダにあり、ファイルtryの中にsub.htmlがあります。
例えばhello.htmlからtest.htmlにリンクを貼りたいときは<a>タグ(アンカータグ)を使って、"<a href="test.html">test</a>"とします。
次に一階層下のsub.htmlのファイルにリンクを貼りたいときは<a>タグを使って、"<a href="try/sub.html">sub</a>"とします。
最後にsub.htmlのファイルからhello.htmlのファイルにリンクを貼りたいときは<a>タグを使って、<a href="../hello.html">hello</a>とします。
まとめると、
①test.htmlのような同じ階層にあるファイルをリンクに貼りたいときは<a href="(ファイル名)">～</a>と指定する。
②sub.htmlのような同じ階層にあるフォルダの中のファイルをリンクに貼りたいときは<a href="(フォルダ名)/(ファイル名)">～</a>と指定する。
③hello.htmlのような１つ階層が上のファイルをリンクに貼りたいときは<a href="../(ファイル名)">～</a>と指定する。
となります。
応用
①２つ階層上のファイルをリンクに貼りたいときは<a href="../../(ファイル名)">～</a>と指定する。
②１つ階層上のフォルダのファイルをリンクに貼りたいときは<a href="../(フォルダ名)/(ファイル名)">～</a>と指定する。
参考程度に( ;∀;)
絶対パス
絶対パスとは一番階層が上のところから見て共有したいサイトやファイルはどこにあるのか示す方法です。
車の例えで言うと、「○○県△△市□□～～」という目的地の住所を入力してリンクを貼る方法が絶対パスです。
相対パスと絶対パスの違いとは？
相対パスと絶対パスについて説明しましたが、２つの違いはというと「道(path)の設定方法」くらいだと思います。
現場では相対パスのほうがフォルダごと共有したらそのまま表示されて便利なので主に相対パスを使用しています。
ブラウザ上のHTMLファイル文書の見え方
次は先程のHTMLファイルがブラウザ上ではどのように見えるのか確認しましょう。
↓コード
↓ブラウザ上のHTML文書の見え方
↓ちなみにフォルダの位置関係はこのようになっています。
hello.htmlとtest.htmlとファイルtryが同じフォルダ内にあって、tryフォルダの中にはsub.htmlがあります。
それでは今回のタグの効果を見てみましょう。
①１枚目のhello.htmlは相対パスでtest.htmlとファイルtry内のsub.htmlにリンクを作成しています。
②２枚目のtest.htmlは相対パスでhello.htmlとファイルtry内のsub.htmlにリンクを作成しています。
③３枚目のsub.htmlは相対パスで１階層上のファイル内のhello.htmlとtest.htmlにリンクを作成しています。
画像のみとなってしまうのですが、ブラウザ上でhello.htmlからtestやsubのリンクをクリックするとそれぞれtest.htmlやsub.htmlに飛ぶことが確認できます。
実際に動作を確認してみてください。
おまけ
今回使用したHTMLコードを載せておきます。よければ自分のテキストエディタで要素を追加したり変更したり遊んでみてください！
※今回は相対パスを使用したため、フォルダ内での位置の相対関係を考えて相対パスを作成してみてください！
hello.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Page | hello</title>
</head>
<body>
<p>このページはhelloです。</p><br>
<a href="test.html">test</a>
<a href="try/sub.html">sub</a>
</body>
</html>
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Page | test</title>
</head>
<body>
<p>このページはtestです。</p><br>
<a href="hello.html">hello</a>
<a href="try/sub.html">sub</a>
</body>
</html>
sub.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Page | sub</title>
</head>
<body>
<p>このページはsubです。</p><br>
<a href="../hello.html">hello</a>
<a href="../test.html">test</a>
</body>
</html>
まとめ
いかがでしたか？
①相対パスは現在作業している位置から目的地までの道、絶対パスは１番高いフォルダからの位置から目的地までの道のことを指す。
②相対パスのほうがコードを書く量が少なく分かりやすいので相対パスが主流。
以上の２点をまとめました。
次回もお楽しみに！