MENU

出張デモ

資料請求
見積依頼

お問い合わせ

CONTACT

お問い合わせ

サイト職人CMSに関する
お問い合わせ・ご相談はこちらまで

東京本社

03-5366-3277

受付時間 平日9:30~18:00

関西オフィス

06-6123-7260

受付時間 平日9:30~18:00

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. 【初心者エンジニア必見】絶対パスと相対パスの違い

サイト職人スタッフブログ

【初心者エンジニア必見】絶対パスと相対パスの違い

【初心者エンジニア必見】絶対パスと相対パスの違い

ホームページにリンクや画像を追加する際に、参照ファイルを指定するためにパスを記述する必要があります。何気なく使用しているパスにも種類があることはご存知でしょうか。

 

また、コーディング経験がない方だと、パスのことを“パスワード”のことだと勘違いされていることもあります。そもそも、普段何気なく使用しているパスとはどのようなものなのでしょうか。今回は、初心者エンジニアに向けて、パスの基本的な知識や絶対パスと相対パスの違いについてわかりやすく解説していきます。

 

パス(Path)とは

パスとは、英語で“道・通り道”という意味のある言葉です。一般的に、あるファイルについて最上位から順番にディレクトリ名を記述したもののことをパスといいます。パスのうち、最上位に位置するものは、ルートディレクトリと呼ばれるため頭の片隅に入れておきましょう。

 

HTMLにおいて、特定の情報へアプローチする際は、主に2種類の方法を利用します。絶対パスと相対パスと呼ばれる方法です。仕事上でも、頻繁に出てくるため、その違いをしっかりと覚えておきましょう。

 

絶対パスの基礎知識

絶対パスとは、特定のファイルの位置情報を最初から最後まで記述する方法のことをいいます。参照ファイルまでの場所をURLで指定していくため、目的地がどこにあるのかということを確実に伝えることができます。

書き方の例

絶対パスを書く際は、URLを利用します。記述したものは、アドレス欄に入力すればファイルを表示できます。

 

「https://XXXX.co.jp/aaaa/bbbb.html」

 httpまたはhttpsから始まるURL

メリット

すべてのURLを記述するため、リンク切れなどのミスが生じづらいというメリットがあります。ファイルの場所を移動しても問題なく稼働するため、ページの増設時に役立ちます。

デメリット

http://~の技術を必要とするため、ローカル環境でテストを遂行できません。また、絶対パスは、長文になりがちなため、記述に時間がかかります。

 

相対パスの基礎知識

相対パスとは、編集ファイルの設置場所を起点として、今いるファイルから参照ファイルまでの場所を記述する方法です。ドメイン部分は省略され、自身のファイル位置を”./”で記述し、ファイルの道筋を示していきます。

書き方の例

相対パスでは、下記のような書き方をします。慣れるまでは、少し難しいかと思いますが、概念だけでも覚えておきましょう。index.htmlというファイルがあると仮定します。

 

contents/contents1.html

 

相対パスの場合、index.htmlと同じ階層に置かれたcontentsフォルダ内にあるcontents1.htmlにアクセスすると考えます。これは、“1階層下のファイルを参照”する記述方法です。

そのため、サイト内部の構造が変更されれば、パスが上手く機能しなくなります。

 

1階層下のファイルを参照する記述方法

相対パスの勉強は、自社サイトで勉強するのが1番です。“こういう構造で、この画像が表示されているのだな”というのがわかれば、自然と相対パスが記述できるようになっています。勉強の参考になる代表的な記述をご紹介しますので、参照しながら学んでみてください。

現在の階層にあるファイルを参照

そのままの、「ファイル名」または「./ファイル名」を記述します。

下図の例の場合a01.htmlを起点として「a02.html」または「./a02.html」となります。

現在の階層にあるファイルを参照

1階層下のファイルを参照

「ディレクトリ名/ファイル名」または「./ディレクトリ名/ファイル名」を記述します。

下図の例の場合a01.htmlを起点として「img/a01.jpg」または「./img/a01.jpg」となります。

1階層下のファイルを参照

1階層上のファイルを参照

「../ファイル名」を記述します。

下図の例の場合a01.htmlを起点として「../index.html」となります。

1階層上のファイルを参照

2階層上のファイルを参照

「../../ファイル名」を記述します。

下図の例の場合b01.htmlを起点として「../../index.html」となります。

2階層上のファイルを参照

メリット

Webに繋がらないため、ローカル環境でのテストができます。記述が短く、ファイル容量が軽量化されるため、作業時間が短縮化されるというメリットがあります。

デメリット

自身のファイルを起点とするため、移動すればすぐにリンク切れを起こします。サイト内を移動する場合は、表示に問題が出ていないかの確認が必要になります。

 

補足:ルート相対パス

相対パスの仲間には、ルート相対パスと呼ばれるものがあります。ルート相対パスは、最上位の階層から参照ファイルまでの場所を記述します。

書き方の例

「/ディレクトリ/ファイル名」を記述します。

下図の例の場合「/aaa/bbb/b01.html」となります。

「/ディレクトリ/ファイル名」を記述

絶対パス、相対パスとの違い

ルート相対パスは、ドメイン部分が省略されるため、絶対パスよりも記述が短くなります。また、ドメイン部分については、相対パスを利用して記述するため、ドメインが変更されてもリンク切れを起こさないというメリットがあります。この点は、相対パスとの違いといえますね。

 

まとめ

パスにも種類に応じて異なるメリットとデメリットがあります。また、どちらを利用するべきかについては、ホームページの構造にもよります。それぞれの特性に応じて、最適なパスを記述しましょう。

PAGETOP