<base>タグの解説
<base>は、そのドキュメントの基準となるURLをヘッダーの内部で指定します。指定されたページの中で、その内容に準じた相対パスを使う事が出来ます。
この要素は<head>要素の中にひとつだけ置くことができます。複数記述した場合、最初の宣言だけが認められ、他の内容は無視されます。
<base>タグの特徴
- この要素は可視化されないため、レイアウトには影響を与えません。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
- 同一のページ内に複数使うことは推奨されません。設置する場合は最初の値が優先され、他は無視されます。
<base>要素に指定できる属性
href- 基準となるURLを指定します。
target- 表示ターゲット名を指定する際に使用します。
_self：同じウィンドウで開く（初期値）_blank：新しいタブまたは新しいウィンドウで開く_parent：親の閲覧コンテキストがある場合はそこで開く。ない場合は"_self"_top：最上位の閲覧コンテキストで開く。ない場合は"_self"
<base>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<base>要素は必ず<head>要素の中に配置されます。
<head>
<base href="URL">
</head>
target属性を指定する場合の参考例です。対象のリンクをクリックした時にウィンドウの開き方に影響します。技術的な用語で表すと閲覧コンテキストの定義を表します。
// 閲覧中のウィンドウやタブで開く
<base href="URL" target="_self">
// 新しいウィンドウやタブで開く
<base href="URL" target="_blank">
続いて、<base>要素を実際に使用する場合のマークアップを見ていきましょう。ヘッダーで定義したURLが、本文の中に設置されたリンクの基準となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>BASEサンプル</title>
<base href="https://weblan3.com/" target="_self">
</head>
<body>
<h1>コンテンツ一覧</h1>
<p>移動先のリンクを選択して下さい。</p>
<a href="html/list">HTML一覧へ</a>
<a href="css/list">CSS一覧へ</a>
<a href="javascript/list">JavaScript一覧へ</a>
</body>
</html>
例えば、上記の内容で「HTML一覧」のリンクを選択した場合、移動先のURLはhttps://weblan3.com/の後ろにhtml/listが足されたものになります。特定の領域で共通するサブドメインやディレクトリを使っている場合は、<base>要素で定義しておくと管理がしやすくなります。