こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！
絶対パスと相対パスについて解説していきます。
HTMLを書いている際にURLを指定するときや、画像を読み込むURLを指定する場合に、絶対パスと相対パスのどちらかで指定する場面が出てきます。
絶対パスと相対パスで使い分ける必要があるのか？…など、疑問に思う方もいるかと思います。
- 全部絶対パスだとダメなの？…
- そもそも、絶対パスと相対パスって何？…
- 指定方法が分からない…
絶対パスと相対パスについては、Web制作を行う上で、ページを結ぶリンクであったり、画像を呼び込むリンクなどで使用する場面にで多く使用されます。
このようなリンクの指定方法にはルールがあり、それぞれの違いを理解することで、より良いWebサイトを作成することができます。
ここでは、違いを理解できていなかったり、指定方法が分からない方へ、分かりやすく解説していこうと思います！
※HTMLについては、こちらの記事「【初心者向け】HTMLとは？HTMLの書き方」を読んでみてください。
1 絶対パスと相対パスについて
パス（path）とは、「道、通り道」という意味があり、Webサイトで言いますと、他のページに飛べるように道を結ぶことを指します。
他のページに限らず、Webサイトに表示させたい画像を呼び込むための道であったりなど、特定の情報に辿り着くための道を指定します。
これらの指定方法に大きく2種類あげられ、これが「絶対パス」と、「相対パス」になります。
この2つを下記にて、細かく解説していきます！
絶対パスとは？
絶対パスとは、そのファイルの位置を最初（最上位に位置するファイル）から対象のファイルまでの道順を全て記述する方法になります。
「http//~」最後のURLまで記述します。
この記述方法は、ユーザーがどのページにいても変わることがなくファイルを表示させることができます。
例えば、道案内をする例で言いますと、目的地の住所（URL）をそのまま教えるのが絶対パスです。
相対パスとは？
相対パスとは、今自分が編集しているを基準として、対象のファイルのURLを記述する方法です。
自身のファイルを「./」で表し、そこから上や下のディレクトリにあるファイルへの道筋を記述します。
こちらも道案内をする例で言いますと、自分が今いる場所を基準に、目的地までどこをどう曲がって…と経路を案内するのが相対パスになります。
2 絶対パスと相対パスの違いは？指定方法は？
絶対パスと相対パスの違いにつきまして、上記でも述べたように、ファイルの呼び込みをどこを基準にして呼び込むかの違いになります。
ここまで簡単に理解できたとこところで、実際に使い方を解説していきます！
絶対パスの指定方法
絶対パスの書き方としては、「http、https」から始まるパスは絶対パスの指定方法となっています。
・階層が深くなるごとに「/」で区切る。
・例https:/フォルダ名/フォルダ名/ファイル名
・最上位に位置するディレクトリから目的のファイルまでの道順を記述。
相対パスの指定方法
相対パスの書き方としては、現在いるファイルから対象のファイルまでの道順（階層構造）を記述する方法になります。
・目的のファイルが同じ階層（カレントディレクトリ、カレントフォルダ）に存在する場合は、「./ファイル名」。
・1つ上の階層に存在するファイルを指定する場合は、「../フォルダ名/ファイル名」。
・階層が1つ上に行く度に「../」が増えていき、「../../フォルダ名/ファイル名」。
※同じ階層に存在するファイルを指定する場合は「./」は省略することが可能です。
絶対パス・相対パスのメリット/デメリット
【絶対パスのメリット】
- 全体一から見た位置関係が分かりやすい。
- 外部サイトへのリンクを指定するには、絶対パスのみ有効。
- リンク切れを起こしにくい。
【絶対パスのデメリット】
- 最上位に位置するディレクトリから目的のファイルまでの階層を全て記述する必要があるため記述が長くなってしまう。
- 長文の記述になってしまうので、ソースコードが読みにくい。
- ドメイン変更などをした場合は、全てのリンクの修正が必要になる。
【相対パスのメリット】
- 絶対パスに比べて記述が少なく、ソースコードを読みやすい。
- 記述が少ないので効率化ができる。
- ドメイン変更などをした際でもサイト内の構造が変わらない限りはリンクの修正は発生しない。
【相対パスのデメリット】
- リンク切れを起こしやすい。
- 外部サイトへのリンク指定は不可能。
- 目的ファイルまでの位置関係を把握しておく必要がある。
3 まとめ
今回は、絶対パスと相対パスについて解説してきました！
絶対パスと相対パスの使い分けに、SEO的に有利不利は無いと言われておりますが、Googleでは絶対パスでの記述を推奨しております。
ただし、URLの記述ミスでクロールができないことがあるため絶対パスを推奨しますといった内容なので、相対パスが記述されているからと言って、ランキングに影響されるわけではありません。
※SEOについては、こちらの記事「【初心者向け】SEOって何？SEOの基礎基本を学ぼう！」を読んでみてください。
リンクの指定をする際は、この2つのパスを上手く自分なりに使い分けることが重要になってきます。
コメント