これだけは覚えておきたい！絶対パスと相対パスの違いとは【初心者向け】
初心者向けに、HTMLの基礎を解説した記事です。今さら聞けない！【絶対パスと相対パスの違い】について解説しました。絶対パスと相対パスの定義から、サンプルファイルを使った具体的な相対パスの使い方まで説明。読めばWebサイト制作に役立ちます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。
今回は、HTMLの絶対パスと相対パスの違いについて解説します。
目次
【動画でも解説しています。クリックで見る！】
絶対パスと相対パス
もともと、パス(path)とは英語で「道・通り道」という意味です。
サイトのURLやファイルはリンクによって互いに結ばれていますが、パスはその情報やファイルがどこにあるのかをたどっていきます。
HTMLでは、特定の情報にたどり着くまでのアプローチ方法が2種類あり、それぞれ絶対パスと相対パスと呼びます。
絶対パス(absolute path)
URLでページを指定して、目的地（情報）がどこにあるのかを確実に伝えます。
たとえば実際に道案内をするときに、目的地の住所（URL）を教えるのが絶対パスの伝え方です。
相対パス(relative path)
今いる場所（階層）を基準にして、目的地（情報）がどこにあるのかを伝えます。
ある地点から道を曲がって道路沿いのつきあたりを右…というように、今いる場所から目的地までの経路を案内するのが相対パスの伝え方です。
相対パスは自分がいる場所を起点にした位置、絶対パスはトップからの位置と理解しましょう。
相対パスの使い方
具体的に相対パスはどのように使うのか見ていきましょう。
今回は例として、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」です。
一方、「sub.html」から見ると、「top.html」と「another.html」はデスクトップという一つ上の階層に属しています。
ですので、「sub.html」からの相対パスは「../top.html」「../another.html」です。
実際にブラウザで表示してみると、Topとanotherとsubのページが相互にリンクされ、自由に行き来できるようになりました。
基本的な使い方はこれだけです。
相対パスと階層構造
相対パスも絶対パスも、リンクしたいファイルがどこにあるのかを指定します。
しかし、パスの記述通りにファイルが指定されていなかったり、ファイルの階層構造を崩してしまうと、ファイルに記述していたリンクのパスが通らなくなりエラーが生じます。
試しに、「sub.html」のファイルをfolder2からデスクトップに移動させてみましょう。
こうすると、subページはエラーが出てしまいました。
これは「sub.html」のファイルが「folder2/sub.html」と記述してあったにもかかわらず、folder2のなかにはファイルが存在せず、ページを見つけることができなかったためです。
相対パスは relative path とあるように、それぞれのファイルがどの場所でどのように関連しているかを理解することが肝心です。
しかしその関係性は同一サーバー内でのみ有効です。
一方、各サイトが持つURLは、それぞれの固有の住所に例えられます。
URLを指定すると確実な情報により、リンク同士をつなげることができます。
他サイトへのリンクには、URLを指定してリンクを貼ります。
これが絶対パス absolute path です。
この違いを理解した上で、Webサイト制作などにお役立てください。
さらにHTMLの基礎を学びたい場合は、HTMLで引用タグを使う方法も合わせてご覧ください。
執筆してくれたメンター（現役エンジニア）
| 太田和樹（おおたかずき）
ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。 守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。 その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。
開発実績 画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント 地方在住。仕事のほとんどをリモートオフィスで行う。 通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。 |
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
