見出し画像
Photo by mikaruma

初めてのHTML入門講座⑬

えも

今回は、相対パスと絶対パスについて勉強していきます。
パス（Path）には、「道」や「通り道」といった意味合いがあります。そのファイルにたどり着くまでの道順を示すものだと考えてください。

相対パス

今いる場所を基準にして、相手がどこにいるのか伝える書き方です。書き方としては、

今いる場所にあるほかのファイル：ファイル名
今いる場所の「フォルダ」：フォルダ名/ファイル名
今いる場所の1階層上にあるファイル：../ファイル名
※1階層上：../ファイル名
　2階層上：../../ファイル名
　というように階層が上がるごとに”../”を繰り返します。

という風になり、相対的に、ありとあらゆる場所を指定できるようになります。

絶対パス

相手がどこにいるのかを確実に伝える書き方（=URL）です。
住所を指定して場所を伝えるイメージです。
住所が明確になることによって、自分がどこにいてもその場所を知ることができます。

HTMLを書いて見る①

今回は3つのファイルを用意してください。

ファイル名：index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<p>このページはindexです。</p><br>
<a href="">test</a>
<a href="">sub</a>
</body>
</html>
ファイル名：test.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習|test</title>
</head>
<body>
<p>このページはtestです。</p><br>
<a href="">index</a>
<a href="">sub</a>
</body>
</html>
ファイル名：sub.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習|sub</title>
</head>
<body>
<p>このページはsubです。</p><br>
<a href="">index</a>
<a href="">test</a>
</body>
</html>

それぞれのファイルは次のようにフォルダ分けしておいてください。

画像1

HTMLというフォルダの中に”index.html”と"test.html"をいれて、”try”というフォルダの中に”sub.html”を入れておきます。
これらのファイル間を行ったり来たりできるようにしていきましょう。

HTMLを書いて見る②

”index.html”から”test”　"sub”に飛ぶための相対パスの書き方を見ていきましょう。

ファイル名：index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<p>このページはindexです。</p><br>
<a href="test.html">test</a>
↑”test.html”は"index.html"と同じフォルダ内にあるので純粋にファイル名を記入します。
<a href="try/sub.html">sub</a>
↑”sub.html”は『try』というフォルダの中にありますので、
このように記入します。
</body>
</html>

同じように、”test.html”と”sub.html”にもhref属性を付加していきましょう。

ファイル名：test.html
<body>
<p>このページはtestです。</p><br>
<a href="index.html">index</a>
<a href="try/sub.html">sub</a>
</body>
ファイル名：sub.html
<body>
<p>このページはsubです。</p><br>
<a href="../index.html">index</a>
<a href="../test.html">test</a>
</body>

これで、それぞれのファイル間を行ったり来たりできるようになりました。note上では表現しにくいので、ぜひ自分の手を動かして実際に試してみてください。

この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/2QuEQS8GYa0
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。



この記事が気に入ったらサポートをしてみませんか？