今さら聞けないホームページ制作の絶対パス・相対パスの使い分け｜使用例まで解説

ホームページ制作をしていると「パス」というものを聞いたことはあるでしょうか。

もしかすると、パスの意味がわからないという方もいるかもしれません。そのため、ホームページを制作にするにあたって様々な疑問が浮かぶことがあるでしょう。

この記事ではパスのことを知らない人でもわかるように紹介します。

この記事を読むことで、少しでもパスについての理解が深まれば幸いです。

パスとは何か

そもそも「パス」とは何でしょうか。

パスを英語にすると「Path」、日本語で直訳すると「道」「経路」と訳すことができます。

今回紹介する、Web文脈におけるパスとは、「目的のファイルまでの道」のことです。

目的のファイルは「住所」だと思ってみてください。

相対パスをわかりやすく簡単に言うと「目的のファイル、すなわち住所までの道のり」と言えるでしょう。

では、次にパスの必要性について紹介します。

パスの必要性

ホームページ制作にあたって必要になるのが「パス」です。

例えばコンピューターに表示したいファイルがある時に、表示したいファイルがどこにあるのかをコンピューターに伝える必要があります。そのファイルを表示させるパスを書く必要があるのです。

また、外部ファイルを読み込むときにもパスが必要です。

少し詳しくご説明すると、HTMLには画像ファイル以外にもWebページの見た目を調整しているCSSファイルや、アニメーション機能があるJavaScriptファイルを読み込むためにパスを書き記すのです。

他にも、テキストやボタンなどのリンク先にもパスを書くと、どのページに移ればいいのかを判断できます。

このようにパスを書くことでコンピューターは正しいファイルにたどり着ける、すなわちパスがなければファイルをみつけられないといえるのです。

パスにはそれだけ必要であり、重要な存在です。

パスの種類

パスは、3種類あります。

• 絶対パス
• 相対パス
• ルート相対パス

では、それぞれのパスについて、順にご紹介していきます。

絶対パス

絶対パスとは、ファイルを最初から最後まで全てを記す形式です。そのため、別名「フルパス」と呼ばれることもあります。

「http://~」や「https://~」からファイル名を指定して、ドメインから対象とするファイルまでの経路を記述します。

階層が深くなるにつれて「スラッシュ（/）」で区切り、URLを全て記述するのが絶対パスなのです。

メリット

絶対パス全てのURLを記載するため、ファイルの場所は変わりません。

リンク切れなどのミスを防げるメリットがあります。また、サイト全体をみても全体像が把握しやすいというメリットもあるのです。

デメリット

デメリットは次の2点です。

• ローカル環境ではテストが不可能
• コードが長くなることでWeb上で処理が少し重たくなる

絶対パスは「http://~」や「https://~」から記述するため、ローカル環境でテストができないなどのデメリットがあります。また、コードがどうしても長くなることにより処理が重くなるのもデメリットです。

そのため絶対パスは、サイト公開前の構築作業においては、向いていないと言えるでしょう。

相対パス

相対パスは決まったファイルの道筋を記す形式です。

いま編集しているファイルが置いてある場所を起点にして、対象のファイルのURLを記述する方法となります。

ドメイン部分を省略して、現在のファイル位置を「./」で表ます。1つ上の階層に存在するファイルを指定する場合は、「../」となり、階層が1つ上に行く度に「../」は増えていきます。

絶対パスは全てを記す形式だったため、大きな違いがありますね。

メリット

• ローカル環境でもテストが可能
• 記述が短いことでWeb上での処理も軽くなり時間も短くなる

上記のようなメリットがあります。

絶対パスとは違い、リンク切れのようなデメリットはあるものの、ローカル環境でもテストができるため構築作業においてはメリットとなります。

デメリット

現在のファイル位置を起点にしているので、パスを記載するページを移動しようとするとリンク切れを起こすデメリットがあります。

そのため、ページ移動にはかなり注意を払う必要があるのです。

ルート相対パス

相対パスと似た記述である「ルート相対パス」は、絶対パスと相対パスの特徴をそれぞれ受け継いでいます。

相対パスは現在編集しているファイルを起点としていましたが、ルート相対パスはルートフォルダ(一番上の階層ディレクトリ)を起点に記述されます。例えば「/aaa/bbb/html」のように、「https://www.lct.jp」のドメイン部分を省略し、それ以降のパスを記述する方法です。

ルート相対パスは絶対パスより短い記述になります。また、環境さえ整えば、ローカル環境でもテストが可能です。

SEOの観点で推奨されている記述方法

SEOの観点でおすすめの記述方法は「絶対パス」です。

とはいえ明確に決まっているわけではなく、どちらのパスで記述するにしても、適切に記述されていれば特に問題はありません。

しかし相対パスの場合、記述ミスやファイルの移動があった場合にリンク切れが起きる場合があります。検索エンジンクローラーがサイトを巡回する際に、自分のサイトがリンク切れを起こしていたら適切な情報が伝えられなくなってしまうでしょう。

そのため、可能なかぎり相対パスではなく絶対パスでリンク挿入することが推奨されています。

ホームページ制作での絶対パスと相対パスの使い分け5選

サイトを運営する上でどちらの記述方法をするべきか、パターン別に5つ紹介していきたいと思います。

• リンク先が外部サイト
• リンク先が内部サイト
• サイト内のファイルを指定する場合
• サイトで移転する予定がある場合
• 複数人でホームページ制作をする場合

それぞれについて、詳しく解説していきます。

リンク先が外部サイト

この場合は、絶対パスで記述します。

相対パスはどのようなもののファイルを読み込むかというと、同一サイトのファイルでした。そのため、同じサーバー内にファイルやデータがなくてはいけません。

リンク先が外部サイトの場合は必ず「絶対パス」を使うようにしましょう。

リンク先が内部サイト

この場合は相対パスになります。

データに関する命令を絶対パスで記述すると、外部からサーバー内のファイルを書き換える可能性があるのです。

そのため、データの書き込み命令などに関してはセキュリティの関係から、相対パスを使用します。

サイト内のファイルを指定する場合

この場合は、どちらでも問題はありません。

短く作業効率が良いのは相対パスでしたね。そのため、どちらかというと「相対パス」を利用する人が多いようです。

相対パスの場合はリンク切れが起きる可能性があるから、絶対パスの方がいいという答えもありました。

このことを踏まえ、どちらがいいのかを検討してみてはいかがでしょうか。

サイトで移転する予定がある場合

サイトを移転する時はコーディングしてあるものを変更していく必要があります。

この時、もし絶対パスを利用しているとドメイン以下の全てが書かれているため、全てを書き換える必要が出てしまうのです。

そのため、絶対パスではなく相対パスがおすすめです。

複数人でホームページ制作をする場合

この場合は、複数人がいるということで誰でも間違えないようにわかりやすくしておく必要があります。

このことから絶対パスがおすすめです。

全てが書かれている絶対パスであれば多くの人が見ても間違えにくいでしょう。このため、みんなが見てもわかるよう絶対パスを使うことがおすすめとなります。

まとめ

ホームページ制作、運営をしていると必要となるのが「パス」です。

自分であればどのパスを使うのか、絶対パス、相対パス、ルート相対パスについて理解し、うまく使い分けて利用してみてください。今後のホームページ運営において、ぜひ覚えておきたい内容となっています。

この記事で少しでもパスに関して理解が深まれば幸いです。