絶対パスと相対パスの違いとは?書き方と注意点を徹底解説!

「絶対パスと相対パスってなんだろう」や「絶対パスと相対パスは、なにが違うの」と悩んでいませんか?

ここでは、絶対パスと相対パスの違いや注意点、書き方について、分かりやすく解説します。

絶対パスと相対パスは、それぞれ異なる目的や使い方があります。 この違いをしっかりと理解することで、適切なパスを選んで、ホームページの構造を分かりやすくすることができます。

ここでは、絶対パスと相対パスの基本や書き方、注意点について詳しく説明するので、ぜひ最後までご覧ください。

このページを読んでわかること

絶対パスと相対パスの基本知識

まずは、絶対パスと相対パスの基本知識からお伝えします。

絶対パスとは?

絶対パスとは、ホームぺージ上のファイルやページへの「完全な住所のこと」です。

たとえば、「神奈川県横浜市中央区1-1 パークスクエア101号室」というマンションに、佐藤さんが住んでいるとします。

もしあなたが、「佐藤さんがいる場所はどこですか?」と誰かに聞かれたら、「神奈川県横浜市中央区1-1 パークスクエア101号室です」と答えますよね。

このように、一番最初から住所を指定すること(完全な住所のこと)を、「絶対パス」と言います。

相対パスとは?

一方、相対パスとは、今いる位置から場所を指定することです。

先ほどの例でいうと、たとえばあなたがパークスクエアに住んでいたとしたら、佐藤さんの場所を「101号室です」と答えるかもしれません。

このように、住所を省略して、今いる位置から場所を指定することを、「相対パス」と言います。

絶対パスと相対パスの書き方

たとえば、https://toretama.jp/kouza/yougo17.html というURLがあったとします。

もし、このページにリンクを貼る場合、「絶対パス」で指定するなら、そのまま https://toretama.jp/kouza/yougo17.html と書きます。

ただ、同じホームページの中のページであれば、わざわざ場所を一番上から指定する必要はありません。

そのため、トップページからこのページにリンクを貼るときは、 ./yougo17.html というように、「相対パス」で指定することもできます。

これが、絶対パスと相対パスの書き方の違いです。

相対パスがちょっとややこしい

絶対パスは、URLを最初から全部 書けばよいだけであるため、分かりやすいと思います。 ただ、ちょっとややこしいのが、「相対パス」です。

この相対パスは、今いる位置から場所を指定するので、たとえば、img というフォルダの中にある sky.jpg を指定する場合、./img/sky.jpg という形で指定します。

相対パスの場合、今いる位置から場所を指定する必要があるので、ファイルがある場所をしっかりと把握しておくことが必要になります。

【補足】

./」は、「今いる場所と同じ場所」という意味になります。
./」は、省略することもできます。

絶対パスと相対パスの違い

ここでは、絶対パスと相対パスの違いについて、お伝えします。

基本的な違い

絶対パスと相対パスの一番大きな違いは、その書き方と使い方です。

まず、絶対パスは、ホームぺージの住所全体を書きます。

たとえば、https://toretama.jp/kouza/yougo17.html は絶対パスです。 どこからでも、この住所に行くことができます。

一方、相対パスは、今いる場所から見た住所を書きます。 たとえば、yougo17.htmlは相対パスです。この書き方は、同じフォルダ(場所)にいるときに使います。

絶対パスと相対パスのメリットとデメリット

絶対パスのメリット
– どこからでも同じ場所に行ける。
– 他のサイトからリンクするときに使いやすい。

絶対パスのデメリット
– URLが長くなる。
– サイトのアドレスが変わると、すべての絶対パスを変更する必要がある。

相対パスのメリット
– 短くて書きやすい。
– 同じフォルダ内や近い場所へのリンクが簡単。

相対パスのデメリット
– 現在の場所に依存するため、間違えるとリンクが動かなくなる。
– サイトの構造が変わると、リンクを修正する必要がある。

絶対パスと相対パスの書き方と注意点

ここでは、絶対パスと相対パスの書き方と注意点について、お伝えします。

絶対パスの書き方

絶対パスは、ホームぺージの住所全体を書きます。 これには、プロトコル(httpやhttps)、ドメイン名、ファイルのパスが含まれます。

たとえば、下記のように記述します。

<a href=”https://toretama.jp/kouza/yougo17.html”>ページへのリンク</a>

このリンクは、どこからクリックしても、https://toretama.jp/kouza/yougo17.html に移動します。

絶対パスは、インターネットのどこからでも、同じ場所に行けるようにするために使います。

相対パスの書き方

相対パスは、今いる場所から見た住所を書きます。
そのため、同じフォルダ内や、近い場所へのリンクによく使います。

たとえば、同じフォルダ内の yougo16.html にリンクする場合は、下記のように記述します。

<a href=”yougo16.html”>ページへのリンク</a>

なお、一つ上のフォルダにファイルがある場合は、「../」を使います。

<a href=”../yougo16.html”>一つ上のフォルダのページへのリンク</a>

そして、別のフォルダ内のファイルにリンクする場合は、フォルダ名を指定します。

<a href=”folder/yougo16.html”>フォルダ内のページへのリンク</a>

絶対パスの注意点

URLが長くなること
絶対パスは、ホームぺージの住所全体を書くので、URLが長くなります。これは書き間違いやすいので注意が必要です。

URLが変わるとリンクが動かなくなること
絶対パスは、ホームぺージのURLが変わるとリンクが動かなくなります。 たとえば、「https://toretama.jp」が「https://fxmovie.jp」に変わると、すべての絶対パスを修正する必要があります。

相対パスの注意点

現在の場所に依存すること
相対パスは、今いる場所からの距離を基にしています。そのため、フォルダの構造が変わると、リンクが動かなくなることがあります。

フォルダの階層が深いと間違いやすくなること
相対パスを使うとき、フォルダの階層が深いと間違いやすくなります。たとえば、「../../images/photo.jpg」といったパスは、書き間違えるリスクが高まります。

絶対パスと相対パスの使い分け

ここでは、絶対パスと相対パスの使い分けについて、お伝えします。

ホームページの目的とパスの選び方

ホームページを作るとき、絶対パスと相対パスをどう使い分けるかが大切です。
どちらを使うかは、ホームページの目的によって変わります。

大規模サイトの場合
大規模なホームぺージには、たくさんのページやフォルダが存在します。 この場合、「絶対パス」を使うことが多いです。

絶対パスを使うことで、どのページからでも正しいリンク先に行けるからです。 たとえば、メインのナビゲーションバーのリンクには、絶対パスを使うと良いでしょう。

小規模サイトの場合
小規模なホームぺージでは、ページ数が少なく、フォルダ構造もシンプルです。 この場合、「相対パス」を使うことが多いです。

相対パスは短くて書きやすいので、サイト内のリンクを作るのが簡単です。 たとえば、同じフォルダ内のページへのリンクには、相対パスを使うと良いでしょう。

絶対パスと相対パスの使い分け

絶対パスの良い使い方
– 外部リンクや他のホームぺージへのリンクに使う。
– 重要なナビゲーションリンクに使う。
– サイトのURLが変わらない場合に使う。

相対パスの良い使い方
– 同じフォルダ内のリンクに使う。
– フォルダが一つ上や隣のフォルダにリンクするときに使う。
– 開発中やテスト中のサイトで使う。

絶対パスと相対パスの使い分けのまとめ

「絶対パス」は外部リンクや重要なナビゲーションに、「相対パス」はサイト内の簡単なリンクに使うと良いです。

この使い分けを理解して、ホームぺージをうまく管理しましょう。

絶対パスと相対パスに関する よくある質問

ここでは、絶対パスと相対パスに関する よくある質問をご紹介します。

Q1: 絶対パスと相対パスのどちらを使うべきですか?

絶対パスは、外部のサイトや重要なページへのリンクに使うと良いです。 相対パスは、同じフォルダ内や近い場所へのリンクに便利です。

どちらを使うかは、リンクの目的や場所によって決めましょう。

Q2: なぜ相対パスがうまく動かないことがあるのですか?

相対パスは、今いるページの位置に依存します。 フォルダの構造が変わったり、書き間違えたりすると、リンクが動かなくなります。

リンクが正しいフォルダやファイルを指しているか確認しましょう。

Q3: 絶対パスを使うときの注意点は何ですか?

絶対パスは、URLが長くなるため、書き間違えやすいです。 また、サイトのアドレスが変わると、すべての絶対パスを修正する必要があります。

書くときは、URLが正しいか確認しましょう。

Q4: 相対パスでリンクが動かないとき、どうすれば良いですか?

相対パスが動かないときは、パスが正しいか確認しましょう。 フォルダの構造が正しいか、ファイル名が間違っていないかをチェックします。

Q5: 絶対パスと相対パスを混ぜて使っても良いですか?

はい、絶対パスと相対パスを混ぜて使うことができます。 たとえば、外部リンクには絶対パスを、サイト内リンクには相対パスを使うと便利です。

状況に応じて使い分けることが大切です。

Q6: SEOには絶対パスと相対パスのどちらが良いですか?

SEOの観点からは、絶対パスが有利な場合があります。 絶対パスは検索エンジンにとって明確なリンクになるからです。

しかし、相対パスも正しく使えば問題ありません。 どちらを使うかは、サイトの構造や目的に合わせて決めましょう。

【まとめ】絶対パスと相対パスとは

絶対パスと相対パスの違いとは?書き方と注意点を徹底解説!の内容は、いかがでしたでしょうか?


絶対パスは、インターネット上のどこからでも同じ場所に行ける完全な住所です。
一方、相対パスは、今いる場所から見た住所です。

絶対パスと相対パスは、どちらを使っても問題はないのですが、絶対パスは外部リンクや重要なナビゲーションに、相対パスはサイト内の簡単なリンクに使うと良いと思いますよ。

ホームページを作るときは、絶対パスと相対パスを意識しながら、作るようにいましょうね。

このページを読んでわかること