絶対に覚えるべし!相対パスと絶対パスの違い【練習ファイル付き】

絶対パスと相対パスの違いについて紹介していきます。
Thanks to our advertisers


サイト制作を始めるなら必ず覚えておきたいのが絶対パスと相対パスの違いと指定方法です。

画像やCSS、プログラムなどのファイルを外部から読み込むためにパスの知識は必要不可欠です。

2つのパスの違いと指定方法、またどんなサイトが相対パスに向いているかを知ることで、それぞれの強みを生かしたサイト制作ができます。

最後に応用編として絶対パス・相対パスの練習ファイルを用意したので、実際にできるか確認したい方は練習してみてください。

Thanks to our advertisers

絶対パスと相対パス、2つのパスの違いと覚えかた。

絶対パスと相対パスとは、URLのことです。

パスとは、特定のファイルの場所を示すための文字列(URL)です。

HTMLで画像を表示させるときに使う「src属性」や、リンクを指定する時に使う「href属性」にパスを使うことで、その先の情報を読み込ませることができます。

<img src="ここにパスが入ります" alt="">

<a href="ここにパスが入ります"></a>

このパスはURLとも呼ばれていて、種類が2つあります。

 

一つは絶対パス(絶対URL)と呼ばれるものと、もう一つは相対パス(相対URL)です。

両方とも意味は「相手のいる場所までの道筋(住所)を表すもの」として同じですが、書き方が異なります。

2つの違いを見ていきましょう。

絶対パス

絶対パスを指定した時のイメージ画像です。

絶対パスとは、インターネット全体から見た相手の場所を表します。

 

絶対パスを現実の世界に例えてみましょう。

例えば、東京の中心「東京都庁」までの道筋を絶対パスで表すと。

<a href="http://地球/日本/東京都/新宿区/2丁目/8-1">東京都庁へ行く</a>

となります。

絶対パスには「http://」から始まる特徴があり、インターネット上の外部のサイトへリンクするときは全て絶対パスで書きます。

絶対パスはブラウザの上から確認できます。

絶対パスはブラウザの上から確認することができます。

相対パス

相対パスで指定したときのイメージ画像です。

相対パスとは、今、自分がいる場所から見た相手の場所を表します。

 

例えば今、僕は「家の中の自分の部屋」にいますが、そこからトイレの場所を表すのにわざわざ「地球の日本の千葉県の…」なんて言いません。

僕から見れば「廊下に出た先にトイレ」があります。

なので相対パスで書くと。

<a href="廊下/トイレ">トイレへ行く</a>

といった形になります。

相対パスの指定方法。

相対パスの指定方法について、下の画像のファイル構造(階層構造)をもとに説明していきます。

ファイルの階層構造を表したものです。

相対パスを書くときのルールは5つあります。

 

  • 今、自分のいる場所は書かない
  • 階層が変わるときは「/(スラッシュ)」で区切る。
  • 階層が一つ浅くなるたびに「../(ドット・ドット・スラッシュ)」で区切る。
  • フォルダ名はそのまま書く
  • ファイルの拡張子までしっかり書く

 

このルールに従って相対パスを書いていきます。

階層が深くなったとき

まず、階層が深くなったときの相対パスの書き方です。

「mainフォルダのindex.html」から「Macフォルダにあるindex.html」へhref属性でリンクさせます。

階層構造が深くなったときの相対パスの指定方法です。

注目するポイントは、「mainフォルダのindex.html」と「Macフォルダ」は同じ階層にあり、「Macフォルダのindex.html」は「mainフォルダのindex.html」より階層が深いということです。

なので相対パスはこのように書きます。

 <a href="Mac/index.html">Macのサイトへ</a>

言葉にすると「Macフォルダの中のindex.htmlに行く」となります。

階層が浅くなったとき

次に、階層が浅くなったときの相対パスの書き方です。

今度は逆で、「Macフォルダにあるindex.html」から「mainフォルダのindex.html」へhref属性でリンクさせます。

階層構造が浅くなったときの相対パスの指定方法です。

ここのポイントは、一つ浅い階層へ行った後に、同じ階層のファイルへ行くということです。

なので相対パスはこうなります。

 <a href="../index.html">Macのサイトへ</a>

よく、今いるファイルの名前から書こうとしてしまいがちですが、相対パスを書くときに今の場所を書くことは絶対にありません。

戻るときは必ず「../(ドット・ドット・スラッシュ)」を使います。

間違えやすいところなので気をつけましょう。

絶対パスと相対パスのSEOの関係性。

絶対パスと相対パスの画像です。

相対パスは記述が短くて済むのが最大のメリットですが、SEO的にどちらがいいのかといえば、どちらもほとんど差がないと言えます。

ですが検索エンジンを扱うGoogleは、絶対パス(絶対URL)を推奨しています。

可能な場合は、相対リンクではなく絶対リンクを使用します(たとえばサイト内の別のページにリンクする場合、mypage.html ではなく www.example.com/mypage.html とします)。
Google Search Console ペルプ

Googleが絶対パスを推奨している理由は、相対パスのデメリットである「リンク切れを起こしやすい」という点を回避するためと、絶対パスの方がサイトをインデックスするクローラーが巡回しやすいことが理由だと思われます。

多くのブログサービス(はてなブログ・Wordpressなど)はデフォルトの状態で画像や記事同士をつなげると、「絶対パス」で繋がるようになってるので、特に設定を変える必要はなさそうです。

相対パスで指定したほうがいいサイトは?

では相対パスがどのようなサイトに向いているのかというと、サイトの更新頻度が低くても安定したアクセスを必要とする企業サイトです。

絶対パスのデメリットとして、画像やソースコードを毎回ネットワークと接続してデータを取ってくるので、読み込みに時間がかります。

しかし相対パスであれば、わざわざネットワークを介さず同じファイル内から読み込むので、サイトを早く表示でき離脱率を下げることにもつながります。

実際にSonyやトヨタといったといった大手企業サイトは、画像を相対パスで繋げています。

相対パス・絶対パスをimgタグで練習してみよう。

「これからサイト制作を始めたい」という方に向けて、相対パスと絶対パスの練習ができるファイルを用意しました。

使うのはこの富士山の画像です。

富士山の画像です。

富士山の画像です。クリックすると画像が別タブで開きます。

配布するファイルは問題形式になっていて、富士山の画像があるものとないものがあります。

画像があるものには相対パスで、ないものには上の画像をクリックした先にある絶対パスで繋げてください。

問題の内容はソースコードにコメントアウトで説明しているので、詳しくはそちらをご覧ください。

Thanks to our advertisers