これだけは覚えておきたい!絶対パスと相対パスの違いとは【初心者向け】

初心者向けに、HTMLの基礎を解説した記事です。今さら聞けない!【絶対パスと相対パスの違い】について解説しました。絶対パスと相対パスの定義から、サンプルファイルを使った具体的な相対パスの使い方まで説明。読めばWebサイト制作に役立ちます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLの絶対パスと相対パスの違いについて解説します。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

絶対パスと相対パス

もともと、パス:pathとは英語で「道・通り道」という意味です。

サイトのURLやファイルはリンクによって互いに結ばれていますが、パスはその情報やファイルがどこにあるのかをたどっていきます。HTMLでは、特定の情報にたどり着くまでのアプローチ方法が2種類あり、それぞれ絶対パスと相対パスと呼びます。

 

・絶対パス  absolute path

URLでページを指定して、目的地(情報)がどこにあるのかを確実に伝えます。

 

・相対パス  relative path

今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを伝えます。

 

たとえば実際に道案内をするときに、目的地の住所(URL)を教えるのが絶対パスの伝え方。一方、ある地点から道を曲がって道路沿いのつきあたりを右…というように、今いる場所から目的地までの経路を案内するのが相対パスの伝え方になります。

 

20160620

 

相対パスは自分がいる場所を起点にした位置、絶対パスはトップからの位置でいいですか?

 

20163020-2

 

そうだよ。

 

20160620

 

相対パスと絶対パスは、どちらを使えばいいんですか?

 

20163020-2

 

相対パスだと、ドメインが変わっても書き直さなくてもいいんだよ。家から一番近いコンビニって書いておけば、引っ越してもそのまま通用するよね。外部サイトへは、絶対パス以外は書けないよ。

 

20160620

 

なるほど!

 

相対パスの使い方

具体的に相対パスはどのように使うのか見ていきましょう。

今回は例として、Topとanotherとsubの3つのページをリンクで行き来するHTMLをつくってみることにします。

 

相対パスを記述する際は以下の3つのようにします。

  • 同じ階層内にあるファイル →ファイル名 で記述
  • 同じ階層内にある、別フォルダの中にあるファイル → フォルダ名/ファイル名 で記述
  • 今いる階層の1つ上の階層にあるファイル → ../ファイル名 で記述(※2つ上の階層にあるファイル の場合は「../../ファイル名」となります)

 

まずはじめにページを3つ作成し、各ファイルがどの場所(どの階層)にあるのかを確認しましょう。(今回は例としてデスクトップ上にファイルとフォルダを置いています)

 

3つのページはそれぞれ下記のフォルダに置きました。

  • Topページのファイル名は「top.html」で、デスクトップ
  • anotherページのファイル名は「another.html」で、デスクトップ
  • subページのファイル名は「sub.html」で、folder2 というフォルダ

 

「top.html」と「another.html」はデスクトップの同じ階層内にあります。ですので、「top.html」と「another.html」はそのままファイル名をリンク先として指定しましょう。

subページだけfolder2という別フォルダに入っているので、相対パスの書き方は「folder2/sub.html」になります。

soutaipath

一方、「sub.html」から見ると、「top.html」と「another.html」はデスクトップという一つ上の階層に属しています。

ですので、「sub.html」からの相対パスは「../top.html」「../another.html」になります。

 

実際にブラウザで表示してみると、topとanotherとsubのページが相互にリンクされ、自由に行き来できるようになりました。

path_true

基本的な使い方はこれだけです。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

相対パスと階層構造

相対パスも絶対パスも、リンクしたいファイルがどこにあるのかを指定します。しかし、パスの記述通りにファイルが指定されていなかったり、ファイルの階層構造を崩してしまうと、ファイルに記述していたリンクのパスが通らなくなりエラーが生じます。

 

試しに、「sub.html」のファイルをfolder2からデスクトップに移動させてみましょう。こうすると、subページはエラーが出てしまいました。これは「sub.html」のファイルが「folder2/sub.html」と記述してあったにもかかわらず、folder2のなかにはファイルが存在せず、ページを見つけることができなかったためです。

path_false

相対パスは relative path とあるように、それぞれのファイルがどの場所でどのように関連しているかを理解することが肝心です。しかしその関係性は同一サーバー内でのみ有効です。

一方、各サイトが持つURLは、それぞれ固有の住所に例えられます。URLを指定すると確実な情報により、リンク同士をつなげることができます。他サイトへのリンクには、URLを指定してリンクを張ります。これが絶対パス absolute path です。

 

この違いを理解した上で、Webサイト制作などにお役立てください。

さらにHTMLの基礎を学びたい場合は、HTMLで引用タグを使う方法も合わせてご覧ください。

 

20160620

 

絶対パス・相対パスをマスターしたので、ファイルやフォルダに適切にリンクを張れるようになりました!

 

20163020-2

 

実は・・・。今はまだいいんだけど、ルート相対パスというのもあるんだよ。

 

20160620

 

えー!まだパスの指定方法があるんですか?

 

20163020-2

 

PHPプログラミングなどを学ぶ時に使うんだけど、Webではこちらのほうが都合が良い場合が多いんだよ。

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。