--- title: "相対パスと絶対パスの違い｜公開してもCSSや画像が崩れない書き方" description: "共有したら画像やCSSが消えてしまった経験のある方向け。相対パスと絶対パスの違いを整理し、公開後も崩れないファイル指定の書き方とよくあるつまずきポイントを具体例で確認できます。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/relative-vs-absolute-path" markdown: "https://giga-site.com/articles/relative-vs-absolute-path/index.md" category: "用語解説" publishedAt: "2026-06-21" updatedAt: "2026-06-25" readingMinutes: 7 --- # 相対パスと絶対パスの違い｜公開してもCSSや画像が崩れない書き方 手元のブラウザでは正しく表示できていたのに、共有したら画像やCSSが消えた。その多くはパスの書き方が原因です。この記事では相対パスと絶対パスの違いを整理し、公開しても崩れないファイルの指定方法と、つまずきやすいポイントを具体例で解説します。 > Source HTML: https://giga-site.com/articles/relative-vs-absolute-path > Article index: https://giga-site.com/articles/index.md ## パスとは「ファイルの場所を示す住所」 HTMLから画像やCSS、JavaScriptを読み込むときは、それらのファイルがどこにあるかを文字列で指定します。これがパスです。img要素のsrcやlink要素のhrefに書く部分を指し、ここが正しくないとブラウザはファイルを見つけられず、画像が割れたり装飾が外れたりします。 パスには大きく分けて2つの書き方があります。今いるファイルから見た位置関係で示す「相対パス」と、起点を固定して示す「絶対パス」です。どちらが正しいというものではなく、それぞれ向いている場面が異なります。まずは両者がどう違うのかを押さえておくと、崩れたときの原因を切り分けやすくなります。 ## 相対パスと絶対パスの違い 相対パスは、いま開いているHTMLファイルを起点に「そこから見てどこにあるか」で書きます。同じ階層のファイルなら名前だけ、ひとつ下のフォルダなら「images/photo.png」、ひとつ上に戻るなら「../style.css」という具合です。フォルダごとまとめて移動してもファイル同士の位置関係が保たれていれば、リンクが切れにくいのが利点です。 絶対パスには2種類あります。ひとつはサイトのトップ（ルート）を起点とする「ルート相対パス」で、先頭にスラッシュを付けて「/images/photo.png」のように書きます。もうひとつは「https://」から始まるフルのURLです。前者は配置されるサイトの構造に依存し、後者は外部の特定の場所を直接指す書き方です。 違いを整理すると次のようになります。手元のフォルダ一式をそのまま公開する用途では、相対パスが最も扱いやすい選択肢になります。 - 相対パス: 例「images/logo.png」。今のファイルから見た位置で指定する - ルート相対パス: 例「/images/logo.png」。サイトのトップを起点に指定する - 絶対URL: 例「https://example.com/images/logo.png」。特定の場所を直接指す - ローカル絶対パス: 例「C:/Users/...」。自分のPC内だけを指すため公開すると必ず壊れる ## 実務ではどこで関係する？ 相対パス 絶対パス 違いは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。 相対パスと絶対パスについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。 - 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する - 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける - 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない - 運用の話: 期限、差し替え、削除、共有メッセージまで決める ## 公開すると画像やCSSが崩れる主な原因 最も多い失敗は、自分のパソコン内だけを指すパスをそのまま残してしまうことです。「file:///Users/名前/...」や「C:/Users/...」で始まる指定は、あなたのPCにしか存在しない場所を見にいくため、他人の環境では何も表示されません。手元で開いた画像をエディタにドラッグして貼り付けると、こうしたパスが自動で入ることがあるので注意が必要です。 次に多いのが、大文字と小文字の食い違いです。Windowsやお使いの環境では「Logo.PNG」と「logo.png」を同じものとして扱う場合がありますが、公開先のサーバーは区別することがあります。ファイル名の表記とパスの表記は完全に一致させるのが安全です。日本語ファイル名やスペースを含む名前も思わぬ崩れの原因になるため、英数字とハイフンに統一しておくと無難です。 ルート相対パス（先頭スラッシュ）も崩れやすいポイントです。これは「サイトのトップ」がどこかによって指す先が変わるため、サブフォルダの下に置かれた場合に意図とずれることがあります。配置場所がはっきりしないうちは、相対パスで位置関係を素直に書くほうが事故が起きにくいです。 ## 崩れないパスの書き方のコツ 公開を前提にするなら、ファイル一式をひとつのフォルダにまとめ、その中での位置関係だけで指定するのが基本です。HTMLと画像やCSSを近い階層に置き、相対パスでつなげば、フォルダごと移動しても関係が保たれます。外部のフォントやライブラリを読み込むときだけ、相手の場所を直接指す絶対URLを使う、と使い分けると整理しやすくなります。 具体的に気をつけたい点を挙げます。これらを守るだけで、共有後に崩れる確率は大きく下がります。 - ファイル名は半角英数字とハイフンにそろえる(日本語やスペースを避ける) - 大文字小文字をパスとファイル名で完全に一致させる - 「C:/」や「file:///」で始まるパスが残っていないか確認する - 画像やCSSはHTMLと同じフォルダ群にまとめ、相対パスでつなぐ - 外部サービスのフォントやライブラリだけ「https://」の絶対URLにする ## ギガサイト便で崩れを確認しながら公開する手順 パスが正しいかは、自分のPC以外の環境で開いて初めて確実に分かります。ギガサイト便は、HTML単体やZIP（HTML・CSS・JS・画像一式）をそのままアップロードして、認証付きの共有URLとして公開できるサービスです。サーバーの用意やデプロイ設定は不要で、本番に近い状態で表示を確かめられます。 次の手順で、崩れがないかを確認しながら公開できます。 1. 関連ファイルをひとつのフォルダにまとめ、ZIPに圧縮する 2. ギガサイト便のトップページにそのZIPをドロップする 3. アップロード時のセキュリティスキャンで、外部スクリプト依存などの警告が出ないか確認する 4. 発行された共有URLを開き、画像やCSSが正しく表示されているか目視で確かめる 5. 崩れが残っていれば、同じURLのままファイルを差し替えて再確認する ## 公開範囲と期限もあわせて整えておく 表示の確認が済んだら、誰に見せるかを決めておくと安心です。リンクを知っている人なら誰でも見られる方式のほか、パスワード、指定アドレス宛のメール認証、会社ドメイン単位での制限など、用途に応じて閲覧条件を選べます。社外に出したくない確認段階では、見られる相手を絞っておくとよいでしょう。 公開期限を設定すれば、期限が過ぎると自動的に閲覧できなくなります。一時的な確認用ページには検索結果に出にくくするnoindexが付きますが、これは閲覧そのものを止める仕組みではない点には留意してください。確実に見せる相手を制御したいときは、認証方式の設定とあわせて使うのが安全です。 ## よくある質問 ### 相対パスと絶対パスはどちらを使えばいいですか 手元のファイル一式をそのまま公開するなら、フォルダ内の位置関係で書ける相対パスが扱いやすいです。外部のフォントやライブラリを読み込む場合だけ、相手の場所を直接指す絶対URLを使うと整理できます。 ### 画像が表示されないのはなぜですか 多くは、自分のPC内だけを指すパス(「C:/」や「file:///」)が残っている、ファイル名の大文字小文字がずれている、日本語やスペースを含む名前を使っている、のいずれかです。パスとファイル名の表記を完全に一致させると改善することが多いです。 ### ローカルでは表示できるのに公開すると崩れます 自分のPC環境に依存したパスや表記ゆれが原因のことが多く、別の環境で開いて初めて発覚します。本番に近い状態で確認できる共有URLで一度開き、画像やCSSが正しく読み込まれているか目視で確かめるのが確実です。 ### ルート相対パス(先頭スラッシュ)は使わないほうがいいですか 先頭スラッシュのパスは「サイトのトップ」を起点にするため、置かれる場所によって指す先が変わります。配置場所がはっきりしないうちは、位置関係を素直に書ける相対パスのほうが崩れにくく安全です。 ### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？ 細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。 ## 関連記事 - [ルート相対パスとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-root-relative-path-html-share/index.md) - [静的サイトとは？動的サイトとの違いをわかりやすく解説](https://giga-site.com/articles/what-is-static-site/index.md) - [ZIPサイトとは？index.htmlの役割をやさしく解説](https://giga-site.com/articles/what-is-zip-website/index.md) - [path traversalとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-path-traversal-html-share/index.md) - [認証付きURLとは？仕組みと安全な使いどころをやさしく解説](https://giga-site.com/articles/what-is-authenticated-url/index.md) - [noindexとは？仕組みと、できることできないこと](https://giga-site.com/articles/what-is-noindex/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "相対パスと絶対パスの違い｜公開してもCSSや画像が崩れない書き方", "description": "共有したら画像やCSSが消えてしまった経験のある方向け。相対パスと絶対パスの違いを整理し、公開後も崩れないファイル指定の書き方とよくあるつまずきポイントを具体例で確認できます。", "datePublished": "2026-06-21", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/relative-vs-absolute-path", "url": "https://giga-site.com/articles/relative-vs-absolute-path", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "用語解説", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "相対パスと絶対パスはどちらを使えばいいですか", "acceptedAnswer": { "@type": "Answer", "text": "手元のファイル一式をそのまま公開するなら、フォルダ内の位置関係で書ける相対パスが扱いやすいです。外部のフォントやライブラリを読み込む場合だけ、相手の場所を直接指す絶対URLを使うと整理できます。" } }, { "@type": "Question", "name": "画像が表示されないのはなぜですか", "acceptedAnswer": { "@type": "Answer", "text": "多くは、自分のPC内だけを指すパス(「C:/」や「file:///」)が残っている、ファイル名の大文字小文字がずれている、日本語やスペースを含む名前を使っている、のいずれかです。パスとファイル名の表記を完全に一致させると改善することが多いです。" } }, { "@type": "Question", "name": "ローカルでは表示できるのに公開すると崩れます", "acceptedAnswer": { "@type": "Answer", "text": "自分のPC環境に依存したパスや表記ゆれが原因のことが多く、別の環境で開いて初めて発覚します。本番に近い状態で確認できる共有URLで一度開き、画像やCSSが正しく読み込まれているか目視で確かめるのが確実です。" } }, { "@type": "Question", "name": "ルート相対パス(先頭スラッシュ)は使わないほうがいいですか", "acceptedAnswer": { "@type": "Answer", "text": "先頭スラッシュのパスは「サイトのトップ」を起点にするため、置かれる場所によって指す先が変わります。配置場所がはっきりしないうちは、位置関係を素直に書ける相対パスのほうが崩れにくく安全です。" } }, { "@type": "Question", "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？", "acceptedAnswer": { "@type": "Answer", "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。" } } ] } ```