タイトル: base要素
SEOタイトル: HTML <base> 要素の使い方と落とし穴（相対 URL / アンカーリンク / target）
| この記事の要点 |
base 要素とは
HTML 文書内のすべての相対 URL のベースを指定する要素。 内に 1 つだけ書けます。
サンプル
はじめに
属性
| 属性 | 意味 | 例 |
|---|---|---|
href | ベース URL | https://cdn.example.com/v2/ |
target | 全リンクのデフォルトターゲット | _blank / _self / _parent / _top / フレーム名 |
少なくともどちらか 1 つ指定が必要。両方指定も可。
target 属性で全リンクを新タブに
ドキュメントサイトやヘルプセンターで「全リンクを新タブで開きたい」用途に便利。ただしUX を損ねることが多いので注意。
副作用1: ページ内アンカーが効かなくなる
最大の落とし穴。 が同ページ内のアンカーではなく https://example.com/#section への新規ナビゲーションになります:
副作用2: フォーム送信先
同様に も base からの解釈になります。意図しないエンドポイントに POST される可能性があります。
SPA での活用例
React / Vue / Angular のシングルページアプリケーションで、サブディレクトリ配置するときに使われます:
// React Router
import { BrowserRouter } from 'react-router-dom';
// public/index.html に
...
// Vue Router
const router = createRouter({
history: createWebHistory('/admin/'),
routes: [...]
});
// Angular
// angular.json の "baseHref": "/admin/" + index.html の 動的に base を変える
// JavaScript で base を変更
const base = document.querySelector('base');
if (base) {
base.href = 'https://cdn-region-jp.example.com/';
} else {
const newBase = document.createElement('base');
newBase.href = 'https://cdn-region-jp.example.com/';
document.head.prepend(newBase);
}
// 注意: すでにパース済の相対 URL（![]()
等）は再評価されない
// → 動的に変えても効果は限定的base を使う代替手段
| 用途 | base を使う | 代替 |
|---|---|---|
| サブディレクトリ配置 | | 絶対パス書く or サーバ側で配信パス調整 |
| 全リンクを新タブ | | JS で document.links ループ |
| CDN への切替 | base.href 変更 | ビルド時にパス置換 |
| ローカル / 本番のパス切替 | 環境別 base | 環境変数 + テンプレート |
セキュリティ上の注意
XSS 攻撃で
Content-Security-Policy: base-uri 'self'
# base 要素の href として許可するオリジンを制限
# 攻撃者が 歴史と互換性
- HTML2.0 (1995) で導入
- 当初は
hrefのみ。targetは HTML4 で追加 - すべてのブラウザで対応（IE 含む）
- HTML5 仕様で「1 ページに 1 つだけ」が明文化
非推奨なパターン
- 本文中で href 切替のためだけに base → 絶対 URL を書いた方が明確
- SEO 対策で base を使う → 検索エンジンに canonical URL を伝えるなら
を使う - JS で頻繁に base を書き換える → SPA ルーターを使う
- iframe 内に異なる base → 親フレームと混乱の元
FAQ
Q: 同 1 ページに複数の
A: HTML5 仕様で1 つだけと明記。複数あるとブラウザは最初の 1 つを採用、それ以外を無視します。
Q: base を使うと相対 URL の動作が変
A: base が想定通り効いている可能性大。view-source: でレンダリング後の URL を確認、ブラウザ DevTools の Network タブで実際のリクエスト URL をチェックしましょう。
Q: SPA で BrowserRouter の basename と
A: 両方推奨。basename はルーティングを担当します。