前回までの記事でHTMLの基本的な部分を学び、ひとまず区切りをつけましたが、
その後の学習で「これはしっかり押さえておきたい！」と思った内容がいくつかありました。
今回はサイト内リンクと相対パスについて補足的にまとめておきたいと思います🌿
◆ サイト内リンクってなに？
サイト内リンクとは、自分のウェブサイトの中で、別のページに移動できるリンクを作ることです。
例えば、自分のサイトに「自己紹介ページ」や「お問い合わせページ」を作ったとしましょう。
こういったページがあったとき、それぞれのページに移動するためのリンクを作りたいですよね。
そのリンクを作るときに使うのが「サイト内リンク」です。
例えば、「自己紹介ページ」に移動したいとき、こんな風に書きます
<a href=”about.html>自己紹介</a>
ここで「about.html」というのは、「自己紹介ページ」というファイルの名前です。
このリンクをクリックすると、「自己紹介」のページに飛ぶことができる仕組みになっています。
ブログやホームページを作るときには必須の知識なので、
この段階でしっかり理解しておきたいですね😊
◆ 相対パスとは？
相対パスとは、今いる場所（ファイル）から見た、目的のファイルまでの道順を表す書き方です。
たとえば、今いるファイルが index.html で、同じ階層に contact.html がある場合は
こう書きます。
<a href=”contact.html”>お問い合わせ＜/a>
もし、about というフォルダの中にある team.html へリンクを貼るなら
<a href=”about/team.html”>チーム紹介</a>
逆に、「上の階層にあるファイル」を指定したいときは ../ を使います。
<a href=”../index.html”>トップページへ戻る</a>
この考え方がしっかり理解できていないと、リンク切れの原因になってしまうこともあるので注意が必要です！
🔁 ファイル名付きで、たとえをもっとわかりやすく書いてみると…
🏠 あなたのおうち（フォルダ構成）
📁 project/
├── index.html ← 🛋️ リビング
├── contact.html ← 🍳 キッチン
└── 📁 about/
└── team.html ← 🛏️ 寝室
👣 たとえ話（ファイル名つきバージョン）
- 今いる場所：
index.html（＝リビング） - 同じ階にある：
contact.html（＝キッチン）- 👉
<a href="contact.html">お問い合わせ</a>
- 👉
- 2階（フォルダの中）にある：
about/team.html（＝寝室）- 👉
<a href="about/team.html">チーム紹介</a>
- 👉
- 逆に1階下（フォルダの外）にある：
../index.html（＝玄関）- 👉
<a href="../index.html">トップページへ戻る</a>
- 👉
🏠「トップページ」ってどこ？
たとえばこんなフォルダ構成を思い浮かべてみてね：
📁 project/
├── index.html ← トップページ（＝🏠リビング）
├── contact.html ← 🍳キッチン
└── 📁 about/
└── team.html ← 🛏️寝室（2階の部屋）
🔁「相対パス」でいう「../index.html」ってどういう意味？
たとえば今、about/team.html にいます。
つまり、「2階の寝室」にいる状態。
そこから「1階にあるリビング＝トップページ（index.html）」に戻りたい。
だからこう書きます👇
<a href=”../index.html”>トップページへ戻る</a>
../は「1階におりる（1つ上のフォルダに戻る）」という意味。index.htmlは「その階にあるリビング＝トップページ」。
✅ 結論！
「トップページ」は index.html（リビング） のこと！
「../index.html」は、「フォルダの中から、リビング（トップページ）に戻る」っていう意味！
この考え方がしっかり理解できていないと、リンク切れの原因になってしまうこともあるので注意が必要です！
◆ なぜ相対パスが大事なの？
実際にサイトを作るようになると、フォルダの構成やファイルの置き場所が複雑になってきます。
そのときに「相対パスでの書き方」を知っておくと、柔軟にリンクを貼ることができて、作業効率も
ぐっと上がります✨
また、ローカル環境（自分のパソコン上）での動作確認も簡単にできるので、
初心者にとっても使いやすい方法と言えます。
◆ ちょっとした気づきと感想
最初は「相対パスってなんかややこしいな〜」と感じていたんですが、
実際にいくつかのパターンを自分で手を動かして試してみたら、
だんだんと「なるほど、こういうことか！」と理解が深まってきました😊
最初から完璧を目指すよりも、
試してみて失敗して、また覚えての繰り返しが大切なんだなと改めて実感しています。
◆ まとめ
今回は、前回までのHTMLの基本に加えて、サイト内リンクと相対パスについて補足しました。
リンクの書き方はシンプルに見えて、じつはとても奥深く、サイト作成の基礎としてとても重要で
す。
💬次回は、外部リンク・絶対パス・ページ内リンク・画像の挿入などについても
学びながら、わかりやすくまとめていけたらと思っています♪
最後まで読んでいただきありがとうございました。
