---
title: "baseタグとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "HTMLの``タグの仕組みと、AI生成HTMLをプレビューサービスで公開する際の活用法・注意点を解説。パス問題を解決したいWeb制作者・開発者向け。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-base-tag-html-share"
markdown: "https://giga-site.com/articles/what-is-base-tag-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# baseタグとは？HTML共有・AI生成サイトでの意味をやさしく解説
HTMLの``タグは、ドキュメント内のすべての相対URLの基準となるURLを一括指定する要素です。AIが生成したHTMLをプレビューURLで公開した際に画像やCSSが読み込まれない問題の回避策として名前が挙がりますが、意図せずページ内リンクやフォームの動作を変えてしまうリスクも伴います。
> Source HTML: https://giga-site.com/articles/what-is-base-tag-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
``のように``内に書くと、ページ内のすべての相対URLがそのURLを起点に展開されます。`
`は`https://example.com/app/logo.png`として扱われます。``タグは1ページにつき1個だけ有効で、複数書いても最初の1個のみ適用されます。
`href`の末尾スラッシュの有無が動作に影響します。``（スラッシュなし）の場合、`logo.png`は`https://example.com/logo.png`に展開されます（`app`が末尾のファイル名として扱われるため）。必ず`/`で終わるURLを設定することがほぼすべての用途で正しい記述です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
ギガサイト便のようなサービスは、アップロードされたHTMLの``に``を動的に挿入することで、ZIPに含まれるすべてのアセットへの参照を正しく解決できます。この挿入処理がある場合、利用者は相対パスで書かれたHTMLをそのままアップロードすれば崩れずに表示されます。
しかし``タグがすでに埋め込まれたHTMLをアップロードした場合は注意が必要です。AIが``を出力したHTMLをサービスが再度書き換えると、2つの基準URLが競合します。正しく動作させるには、AIに生成させる際に``タグを出力しないよう指示するか、アップロード前に手動で削除しておくことをお勧めします。
## よくある誤解
「``タグを設定すれば外部リンク（別ドメインへのリンク）も影響を受ける」と心配する人がいますが、絶対URLで書かれたリンクは``の影響を受けません。``は``の設定に関係なく`google.com`に遷移します。影響を受けるのは`href="contact.html"`のような相対URLのみです。
「``を設定するとすべてのリンクが新しいタブで開く」という効果は意図的に使うケースもありますが、同一ページ内のアンカーリンク（``）も新しいタブで開こうとするため、ページ内ナビゲーションが壊れます。``の`target`属性は全体への影響を十分理解したうえで設定してください。
## 安全に使うための注意点
``タグの`href`にユーザー入力を直接含める実装は避けてください。悪意のある値（例：`javascript:`スキーム）が設定されると、ページ内のすべてのリンクが悪意のあるURLに向いてしまうCSRF的な攻撃に悪用できます。サービス側で``を動的に挿入する場合は、URLをホワイトリストのドメインに限定するか、厳密に正規化してから埋め込んでください。
AIが生成したHTMLに``タグが含まれていないことを確認したうえで共有サービスにアップロードすると、サービス側の挿入処理が確実に機能します。アップロード前に`grep '`タグを出力した場合は、プロンプトに「``タグは使用しないでください」と明記することで次回の生成から除外できます。
## よくある質問
### ``タグはHTMLの``の先頭に書く必要がありますか？
必ずしも先頭でなくてもよいですが、``より前に書かれた相対URLには影響しないため、実質的に``の最初に書くことが推奨されます。``と``の直後に置くのが一般的なパターンです。
### `<base>`タグを使わずにルート相対パスを修正する別の方法はありますか？
テキスト一括置換で`href="/`を`href="./`に変換する方法が最もシンプルです。ただし絶対URLのパスが誤って変換されないよう正規表現を慎重に設定する必要があります。`href="https://`や`href="http://`で始まるURLは変換対象外にしてください。
### `<base>`タグがあるページでフォームのsubmitは正常に動きますか？
フォームの`action`属性が相対パスの場合、`<base>`タグの影響を受けます。`<form action="/api/submit">`は`<base>`の基準URLを起点に解決されます。意図したエンドポイントに送信されているかをブラウザの開発者ツールのNetworkパネルで必ず確認してください。
## 関連記事
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "baseタグとは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "HTMLの`<base>`タグの仕組みと、AI生成HTMLをプレビューサービスで公開する際の活用法・注意点を解説。パス問題を解決したいWeb制作者・開発者向け。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-base-tag-html-share",
"url": "https://giga-site.com/articles/what-is-base-tag-html-share",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "用語解説",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "`<base>`タグはHTMLの`<head>`の先頭に書く必要がありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "必ずしも先頭でなくてもよいですが、`<base>`より前に書かれた相対URLには影響しないため、実質的に`<head>`の最初に書くことが推奨されます。`<meta charset>`と`<title>`の直後に置くのが一般的なパターンです。"
}
},
{
"@type": "Question",
"name": "`<base>`タグを使わずにルート相対パスを修正する別の方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "テキスト一括置換で`href=\"/`を`href=\"./`に変換する方法が最もシンプルです。ただし絶対URLのパスが誤って変換されないよう正規表現を慎重に設定する必要があります。`href=\"https://`や`href=\"http://`で始まるURLは変換対象外にしてください。"
}
},
{
"@type": "Question",
"name": "`<base>`タグがあるページでフォームのsubmitは正常に動きますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "フォームの`action`属性が相対パスの場合、`<base>`タグの影響を受けます。`<form action=\"/api/submit\">`は`<base>`の基準URLを起点に解決されます。意図したエンドポイントに送信されているかをブラウザの開発者ツールのNetworkパネルで必ず確認してください。"
}
}
]
}
```