HTMLの相対パスと絶対パスの違いとは？画像・リンクの指定方法を初心者向けに解説

2026年8月23日2026年10月6日

HTMLの相対パスと絶対パスの違い、画像とリンクの指定方法を解説する使い方ガイド

HTMLで画像を表示したり別ページへリンクしたりするとき、srcやhrefへファイルの場所を指定します。ここで登場するのが「相対パス」と「絶対パス」です。

「./と../は何が違うの？」「先頭の/は絶対パス？」「同じ画像なのにページによって表示されない」と迷う人も多いでしょう。

この記事では、パスを「探し始める場所」で3つに整理し、画像とリンクの書き方を解説します。最後は手元の練習フォルダーで画像を表示し、2つのページを行き来して確かめましょう。

この記事で分かること

相対パス・絶対パス・ルート相対パスの違い
./・../・先頭の/が表す場所
画像のsrcとリンクのhrefへパスを書く方法
制作環境や用途に合うパスの選び方
画像やリンクが動かないときの確認順

HTMLのパスとは？ファイルまでの「道順」

パスとは、画像、HTML、CSS、JavaScriptなどのファイルがどこにあるかを示す道順です。ブラウザはパスを読み取り、目的のファイルを取得して表示や移動を行います。

この記事では、pages/about.htmlからimages/logo.pngなどを参照する練習用の構成例を使います。次のコードはabout.htmlのbody内に書く例で、../images/logo.pngが画像までのパスです。全体のフォルダー構成は後で示します。

<img src="../images/logo.png" alt="サイトのロゴ">

リンクでは、aタグのhref属性へ移動先のパスを書きます。

<a href="contact.html">お問い合わせへ</a>

imgやaなどタグ自体の役割から確認したい場合は、HTMLタグの基本を先に読むと理解しやすくなります。

href・srcとURL

HTMLでは、aのhref、imgのsrc、linkのhref、scriptのsrcなどにURLを指定します。URLはhttps://から始まる完全な形だけでなく、必要な部分を省略した相対的な形でも書けます。

以下のexample.comは説明用のドメインです。実際に公開するときは、自分の公開URLとファイル名に合わせて読み替えてください。練習用HTMLにはbase要素を置かない前提です。

最初に「パスを書くページのURL」と「読み込みたいファイルの場所」をセットで確認するのが基本です。練習用の静的HTMLではフォルダー構成から考えられますが、公開サイトでブラウザが基準にするのはページのURLです。サーバー内部の保存場所とは限りません。

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

初心者向けの説明では、https://example.com/images/logo.pngのような完全URLを「絶対パス」、../images/logo.pngのような指定を「相対パス」と呼ぶことがあります。

ただし、/images/logo.pngを絶対パスと呼ぶ資料もあれば、URLの用語では相対URLとして扱う資料もあります。混同を避けるため、この記事では次の3つに分けます。

種類	書き方の例	探し始める場所
完全URL（絶対URL）	`https://example.com/images/logo.png`	URL自体にすべて含む
ルート相対パス	`/images/logo.png`	現在のドメイン直下
文書相対パス	`../images/logo.png`	現在のページURLの階層

MDNの「相対参照のURLへの解決」では、現在の階層・親の階層・サイトのルートを基準にする指定を、それぞれ確認できます。

HOAI Point

「絶対か相対か」の二択だけで覚えると、先頭/で混乱しやすくなります。初心者のうちは「完全URL・ルート相対・文書相対」の3つに分け、起点を言葉にしてからコードを書くのがおすすめです。

完全URLの書き方

完全URLは、通信方法を示すhttps://などのスキームと、サイトを示すドメイン名から書く指定方法です。必要に応じてフォルダー名やファイル名が続き、どのページから使っても同じURLを指します。

<a href="https://example.com/contact/">お問い合わせ</a>

別サイトへリンクするときは、相手サイトのドメインを含む完全URLが必要です。同じサイト内でも完全URLは使えますが、ドメイン変更時に書き換えが必要になるため、サイト内のファイルでは相対指定も検討します。

ルート相対パスと先頭の/

先頭が/のパスは、現在のドメイン直下を起点にします。ページが深い階層へ移動しても、サイト内の同じ場所を指しやすいのが特徴です。

<img src="/images/logo.png" alt="サイトのロゴ">

注意したいのは、先頭の/は、作業フォルダーの先頭を指す記号ではないことです。たとえばhttps://example.com/practice/に公開したサイトでも、/images/logo.pngはhttps://example.com/images/logo.pngを指します。practice/imagesの画像なら、ルート相対パスは/practice/images/logo.pngです。

HTMLファイルをダブルクリックして開くと、アドレス欄は通常file://で始まります。この場合も先頭/は練習フォルダーを指すとは限りません。後の練習では、../などを使う文書相対パスを使います。

文書相対パスとページの階層

文書相対パスは、通常、現在のページURLの最後の/までを起点にします。pages/about.htmlならpages/が基準です。HTMLと画像の位置関係を保ったままフォルダー一式を移す場合に扱いやすく、学習用の小さなサイトでも使いやすい方法です。

たとえば、現在のページがhttps://example.com/practice/pages/about.htmlなら、../images/logo.pngはpages/から一つ上のpractice/へ戻って、images/logo.pngを探します。下の図は、この文書相対パスと、先頭/で始めた場合の違いです。ドメインはどちらもhttps://example.comとして省略しています。

同じ../images/logo.pngでも、現在のページURLが変われば参照先も変わり得ます。また、末尾の/にも意味があります。https://example.com/practice/でlogo.pngを指定すると/practice/logo.pngへ、末尾の/がないhttps://example.com/practiceを基準にすると/logo.pngへ解決されます。公開サイトでは、転送後にアドレス欄へ表示されたURLを確認しましょう。

相対パスの書き方｜同じ・下・上の階層

相対パスは、現在のHTMLファイルから目的のファイルまで、フォルダーを一つずつたどって書きます。練習用ファイルの作り方がまだ不安な場合は、HTMLの基本構造も確認してください。

次は、書き方を比較するためのフォルダー構成例です。pages/about.htmlを現在のHTMLファイルとし、以降の画像・リンク・CSS・JavaScriptの例もこの構成に合わせます。後の最小コードの練習で使うのは、about.html・contact.html・logo.pngの3ファイルだけです。

project/
├─ index.html
├─ images/
│  └─ logo.png
├─ css/
│  └─ theme/
│     └─ style.css
├─ js/
│  └─ main.js
└─ pages/
   ├─ about.html  ← 現在のファイル
   ├─ contact.html
   └─ icons/
      └─ mail.svg

図では、迷いやすい../images/logo.pngの道順だけを取り出しています。pages/から一つ戻った後に、隣のimages/へ進みます。about.htmlそのものをフォルダーとして数えないのがポイントです。

同じ階層のファイル

about.htmlから同じpagesフォルダーのcontact.htmlへリンクするなら、ファイル名だけで指定できます。

<a href="contact.html">お問い合わせ</a>

./contact.htmlと書いても同じ意味です。./は「現在の階層」を表しますが、省略できる場面ではファイル名だけの方が簡潔です。

下の階層のファイル

about.htmlからpages/icons/mail.svgを読み込むなら、下へ進むフォルダー名を順番に書きます。

<img src="icons/mail.svg" alt="メールのアイコン">

フォルダーがさらに深い場合も、名前を/で区切って順につなげます。ここでのicons/mail.svgは、project/pages/icons/mail.svgを指します。

上の階層と../

about.htmlからproject/images/logo.pngへ進むには、まずpagesから一つ上のprojectへ戻る必要があります。

<img src="../images/logo.png" alt="サイトのロゴ">

../は一つ上の階層へ戻る記号です。二つ上なら../../、三つ上なら../../../と増やします。

目的地との関係	パスの例	読み方
同じ階層	`contact.html`	同じフォルダーのファイル
下の階層	`icons/mail.svg`	iconsへ進んでファイルを探す
一つ上から別フォルダー	`../images/logo.png`	一つ戻ってimagesへ進む

画像とリンクでパスを指定する方法

パスの考え方は同じでも、画像とリンクでは使うタグと属性が異なります。ここでは、実際のHTMLへ書く形を確認します。

画像のsrcへの指定

pages/about.htmlのbody内に、imgタグを書きます。srcには画像までのパス、altには画像が伝える内容を書きます。imgには終了タグは不要です。飾りだけの画像ならalt=""とし、説明用の画像では内容に合う代替テキストを入れます。

<img src="../images/logo.png" alt="サイトのロゴ">

MDNの「HTMLの画像」では、srcに相対URLと絶対URLのどちらも使えること、altが画像の代替テキストになることを確認できます。

自分で管理していない外部サイトの画像を、許可なく完全URLで直接読み込むのは避けましょう。相手側の通信量を使うホットリンクになり、画像の削除やURL変更にも影響を受けます。

リンクのhrefへの指定

同じサイト内のページへ移動する場合は、相対パスまたはルート相対パスを使えます。

<a href="../index.html">トップページへ戻る</a>

別サイトへリンクする場合は、完全URLを指定します。次は書式の例です。hrefの値を実際のリンク先URLへ置き換えてください。targetを省略した通常のリンクは同じタブで開きます。

<a href="https://example.com/">Exampleへ移動する</a>

MDNの「リンクの作成」では、内部リンクと外部リンク、ルートから始めるリンクの例をまとめて確認できます。

画像とリンクの練習コード

パソコンのテキストエディターと、自分が使用できるPNG画像を1枚用意します。projectの中にpagesとimagesを作り、PNG画像をimages/logo.pngとして保存してください。JPEG画像の拡張子だけをPNGに変えても画像形式は変わらないため、PNG画像を使うか、実際の拡張子に合わせてコードも変更します。

次をproject/pages/about.htmlへ、UTF-8で保存します。既存サイトではなく、新しい練習フォルダーで試してください。ファイル名がabout.html.txtにならないよう、エディターの保存形式も確認します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>パスの練習</title>
</head>
<body>
  <h1>パスの練習</h1>
  <img src="../images/logo.png" alt="練習用に用意した画像" width="240">
  <p><a href="contact.html">お問い合わせへ</a></p>
</body>
</html>

続いて、次をproject/pages/contact.htmlへ保存します。このページはリンクの移動を確かめる練習用で、問い合わせを送信する機能はありません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>お問い合わせ</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <p><a href="about.html">練習ページへ戻る</a></p>
</body>
</html>

about.htmlをブラウザで開きます。用意した画像が表示され、「お問い合わせへ」を押すと「お問い合わせ」の見出しがあるページへ移動し、戻るリンクで元のページへ戻れれば成功です。画像のwidth="240"は表示幅の指定で、HTMLのこの属性にはpxを付けません。パス自体には単位は不要です。

比較するなら、控えを残したうえでsrcだけをimages/logo.pngへ変えて保存・再読み込みしてください。今回の構成にはpages/images/logo.pngがないため画像を読み込めませんが、contact.htmlへのリンクは動きます。確認後は../images/logo.pngへ戻します。

CSS・JavaScriptの読み込み

CSSで見た目を変えたり、JavaScriptで動きを付けたりするときも、HTML側のhref・srcは同じ基準で書きます。構成例では、次のlinkをpages/about.htmlのhead内へ、scriptをbodyの終了タグの直前へ置きます。実際に読み込むには、指定先のCSS・JavaScriptファイルも必要です。

<link rel="stylesheet" href="../css/theme/style.css">
<script src="../js/main.js"></script>

一方、外部CSSファイル内のurl()は、そのCSSファイルのURLが基準です。css/theme/style.cssからimages/logo.pngへ進むには、theme/、css/の順に二つ上へ戻るので、url("../../images/logo.png")と書きます。HTML側の../images/logo.pngをそのままコピーすると、違う場所を探してしまいます。

相対パスと絶対パスはどう使い分ける？

パスはタグの種類だけで決めるのではなく、リンク先が自分のサイト内か外部か、ページやサイトの配置が変わるかで選びます。

場面	第一候補	理由
学習用の小さなサイト	文書相対パス	フォルダー構成をそのまま練習できる
同じサイトで共通画像を使う	ルート相対パス	ページ階層が変わっても起点が一定
別サイトへリンクする	完全URL	相手サイトのドメインまで指定できる
サブフォルダーへ公開する	文書相対パスを検討	サーバー最上位とのずれを避けやすい

HOAI Point

「短いから相対パス」「分かりやすいから完全URL」と決めるのではなく、移動する可能性がある単位を考えます。プロジェクト一式を移すなら文書相対、同じサイト内でページだけ動かすならルート相対、外部へ出るなら完全URLが判断の出発点です。

同じサイト内のリンクでも、運用ルールに合わせて完全URLを使う場合があります。チーム制作では、個人の好みで混在させず、プロジェクトの公開先と更新方法に合うルールへ統一しましょう。

パスが合っているか確認する4ステップ

画像が表示されない、リンクが開かないときは、コードを何度も書き換えるより、起点から順番に確認すると原因を絞れます。

STEP

パスを書く場所と起点を確認する

練習では、編集したファイルがproject/pages/about.htmlか確認します。HTMLの文書相対パスは、base要素がなければ、ブラウザに表示されたページURLのパス部分で最後の/までが起点です。

先頭/のルート相対パスはWebサイトのドメイン直下、完全URLは指定したURLを使います。外部CSS内の文書相対URLなら、ページではなくCSSファイルのURLを基準にします。パスを書く場所と指定方法を先に見分けましょう。

STEP

目的のファイルまでフォルダーをたどる

文書相対パスなら、同じ階層はファイル名、下へ進むならフォルダー名、上へ戻るなら../を書きます。頭の中だけで数えず、フォルダーツリーを指で追うと確実です。

STEP

名前・拡張子・大文字小文字を照合する

logo.pngとlogo.PNG、imagesとimageは同じとは限りません。ファイル名、拡張子、記号、英字の大文字小文字を実ファイルと一文字ずつ照合します。

STEP

保存・再読み込み後に最終URLを確認する

編集したHTMLやCSSを保存してブラウザを再読み込みし、リンクを実際に開いて目的のページへ着くか確認します。画像は表示だけでなく、パソコンで右クリックして画像を新しいタブで開くなどの方法で、参照先URLも確認します。メニュー名はブラウザにより異なります。URLが正しいのに画像を開けない場合は、アップロード漏れや画像ファイル自体の破損も調べてください。

画像が表示されない・リンクが開かないときの確認ポイント

4ステップで原因が見つからない場合は、次の項目を上から確認してください。

../の数

../を一つ書くたびに、一つ上の階層へ戻ります。現在のHTMLファイルではなく、プロジェクトの先頭から数えていないか確認しましょう。

先頭の/の有無

images/logo.pngと/images/logo.pngは起点が異なります。先頭/は現在のHTMLファイルではなくサイトの最上位を指します。ローカルファイルを直接開く練習では、Webサーバーのルートと一致しないことがあります。

区切り文字の/とバックスラッシュ

Windowsのフォルダーパスで見かける\ではなく、URLでは/を使います。C:\Users\...のような自分のパソコンだけで通じる絶対ファイルパスを公開用HTMLへ書かないでください。

ファイル名の文字

日本語や空白を含むURLも扱えますが、入力や共有時の間違いを減らすなら、英小文字・数字・ハイフンを中心にした名前が管理しやすくなります。名前を変更したら、HTML側のパスも同時に直します。

CSS内の画像の起点

外部CSSの相対URLは、CSSファイル自身のURLを基準に確認します。構成例のcss/theme/style.cssでは、背景画像の指定はurl("../../images/logo.png")です。画像URLを直接開けるのに背景が見えない場合は、CSSの読み込み・セレクタ・対象要素の高さも確認します。詳しい構文と基準はMDNの「CSSのurl()」で確認できます。

base要素の影響

これはテンプレートなどを使う場合の補足です。head内に<base href="...">があると、文書内の相対URLの基準が変わります。例として<base href="https://example.com/practice/">があるページでは、contact.htmlはhttps://example.com/practice/contact.htmlを指します。意図が分からないまま削除すると他のリンクにも影響するので、まず指定値を確認してください。詳細はMDNの「base要素」を参照できます。

HOAI Point

一度に../、ファイル名、フォルダー名を全部変えると、どの修正が効いたか分からなくなります。「一項目確認→保存→再読み込み」の順で、一つずつ切り分けましょう。

よくある質問

/images/logo.pngは絶対パスですか？: 資料によって呼び方が異なります。サイトルートから見れば絶対的な位置ですが、https://example.comを省略しているため、URLの分類では相対URLです。この記事では混乱を避けるため「ルート相対パス」と呼んでいます。
./は省略してもよいですか？: はい。./images/logo.pngとimages/logo.pngは、通常どちらも現在の階層を起点にします。チームのルールがなければ、省略した方が簡潔です。
外部サイトの画像を完全URLで表示できますか？: 技術的には指定できますが、利用許可と相手サイトの方針を確認してください。許可のないホットリンクは避け、自分が使用権を持つ画像を自分のサーバーや適切な配信先で管理するのが基本です。
ローカルでは表示できるのにサーバーで表示されないのはなぜですか？: 大文字小文字、公開先のフォルダー構成、先頭/の起点、アップロード漏れを確認してください。ローカル環境とサーバーでファイル名の扱いが異なることがあるため、実際の公開先で一文字ずつ照合します。
CSSの背景画像もHTMLファイルを基準にしますか？: 外部CSSファイルに書いたurl()は、そのCSSファイルのURLが基準です。一方、HTML内のstyle要素やstyle属性に直接書く場合は文書の基準URLに従います。まずCSSをどこに書いたか確認し、その場所から画像までのパスを数え直してください。