--- title: "ルート相対パスとは？HTML共有・AI生成サイトでの意味をやさしく解説" description: "ルート相対パスの仕組みと、AIが生成したHTMLをプレビューURLで共有する際のパス問題・解決策を解説。HTMLのリソース読み込みエラーに悩むWeb制作者・担当者向け。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/what-is-root-relative-path-html-share" markdown: "https://giga-site.com/articles/what-is-root-relative-path-html-share/index.md" category: "用語解説" publishedAt: "2026-06-25" updatedAt: "2026-06-25" readingMinutes: 5 --- # ルート相対パスとは？HTML共有・AI生成サイトでの意味をやさしく解説ルート相対パスとは、Webサイトのルート（`/`）から始まるパス記述方式です。`/assets/style.css`のように書くと、どのページからでも同じファイルを参照できます。しかしAIが生成したHTMLにルート相対パスが含まれていると、オブジェクトストレージやローカルで開いた際にリソースが読み込めない問題が頻繁に起きます。 > Source HTML: https://giga-site.com/articles/what-is-root-relative-path-html-share > Article index: https://giga-site.com/articles/index.md ## ひとことで言うと Webのパスには3種類あります。絶対パス（`https://example.com/style.css`）、ルート相対パス（`/style.css`）、そして文書相対パス（`./style.css`や`style.css`）です。ルート相対パスは「このサーバーのルートから数えたパス」を意味し、`/style.css`は`https://同じホスト/style.css`に展開されます。HTMLファイルを別のホスト（`r2.dev`や`pages.dev`など）で配信した場合、ルートが変わるのでリソースの場所も変わります。 AIツール（Claude・GPT・v0など）がHTMLを生成する際、プロジェクトの一般的なWebサーバー環境を想定してルート相対パスを使うことがあります。``や`