検索

キーワード


【HTML/CSS】絶対パスと相対パス

  • 公開日:2020-09-16 21:58:04
  • 最終更新日:2020-11-16 22:36:44
【HTML/CSS】絶対パスと相対パス

こんにちは。駆け出しエンジニアの竹前です。

ここでは、絶対パス・相対パスの違いと相対パスの使い方について説明します。

HTMLについて勉強している方の参考になれば幸いです。


絶対パスと相対パス

パスとは

パス(path)とは、英語で「道筋」という意味であり、目的のファイルやディレクトリの位置を示す経路のことをいいます。

HTMLで画像等を表示させるには、表示させたいファイルのファイル名と格納場所を指定する必要があります。

HTMLではファイルの位置を示す方法が2種類あり、それぞれ「絶対パス」と「相対パス」と呼びます。


絶対パスとは

絶対パスとは、最上位のディレクトリ(ルートディレクトリ)から、目的のファイルまでの経路を全て記述する方法です。

具体的には、以下のように記述します。

http://sample.com/images/001.png


絶対パスのメリットとデメリット

メリット

  • ファイルの位置を変更してもリンク切れを起こしにくい
  • 最上位のディレクトリから目的のファイルまでの位置をすべて記載するので、ファイルの位置が分かりやすい

デメリット

  • 文字数が多くなるのでソースコードが見づらくなる
  • ドメインを変更した場合、リンクをすべて修正しなければならない
  • Webサーバ上のURLを記載するため、Webサイトのファイルをサーバにアップしている必要があり、ローカル環境ではテストできない


相対パスとは

相対パスとは、特定のファイルの現在位置から、目的のファイルまでの経路を記述する方法です。

具体的には、以下のように記述します。

/images/001.png


相対パスのメリットとデメリット

メリット

  • ソースコードの記述が短くなる
  • ドメインを変更してもリンクを修正する必要がない
  • ローカル環境でもテストができる

デメリット

  • ファイルの位置を変更するとリンク切れを起こしやすい
  • ファイル構造が複雑になるとファイルの位置が分かりにくい


相対パスの使い方

それでは、相対パスの使い方について説明します。

ディレクトリ構成は以下の通りです。

sample.com
  ├─index.html
  │
  ├─images
  │  ├001.png
  │  └002.png
  │
  └─abc
     └sample.html


index.htmlから001.pngを指定する

<img src="images/001.png">


index.htmlから見て、001.pngは一つ下の階層にあります。

この場合、対象のファイルが入っているディレクトリ名とファイル名を指定します。


また、現在のディレクトリを示す「./」を入れてから、対象のファイルが入っているディレクトリ名とファイル名を指定する方法もあります。

「./」を入れるサンプルは以下の通りです。

<img src="./images/001.png">


sample.htmlから002.pngを指定する

<img src="../images/002.png">


sample.htmlから見て、002.pngは1つ上の階層にあるimageディレクトリに含まれています。

この場合、1つ上のディレクトリに上がることを示す「../」を入れ、その後、対象のファイルが入っているディレクトリ名とファイル名を指定します。

今回の例は、1つ上のディレクトリの場合でしたが、2つ上の場合は「../../」となり、1つ上のディレクトリに上がるごとに「../」を付け加えます。




【著者】

たけまえ

駆け出しエンジニアの竹前です。 私自身が勉強したことをもとに、難しい内容はできるだけ簡単になるように読みやすく、分かりやすい記事を心がけています。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ