どんなタグ？
base要素は、文書のベースとなるURLを
指定するときに使用します。
<head>
<title>baseのサンプル</title>
<base href="https://codehero.shibajuku.net/html/base/">
</head>
<body>
<p>
<a href="base01/">ここをクリック</a>でリンク先へ
</p>
</body>
<base> タグは、 href属性 に指定したURLが文書内のベースとなるURLであることを表すタグです。
また target属性 と組み合わせることで、ページ内にあるリンク先のデフォルトの表示方法を指定することができます。
- どのカテゴリに属しているの？
- base要素は メタデータ・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
- base要素は空要素(内容を持たない要素）のため、梱包できるタグ（コンテンツ・モデル）はありません。
また、終了タグも必要ありません。
ベースとなるURLを指定したいときに使いましょー！
どうやって使うの？
<head> タグ内に記述し、
href属性属性、target属性を指定する。
<base> タグは <head> タグ内に記述し、href属性に指定したURLをそのページ内のすべてのリンクに対するベースのURLとすることができます。
またtarget属性には、リンク先のデフォルトの表示方法を指定することができます。
- 使い方
<base href="ベースとなるURL" target="キーワードもしくは定義した名前">
※下記のブラウザの表示例では、アドレスバーのURLは変更されません。
アドレスバーの変更を確認する場合は、別ウインドウでサンプルを開いてください
<head>
<title>baseのサンプル</title>
<base href="https://codehero.shibajuku.net/html/base/">
</head>
<body>
<p>
<a href="base01/">ここをクリック</a>でリンク先へ
</p>
</body>https://codehero.shibajuku.net/html/base/base01/
- どこでも使えるの？
- base要素は、他のbase要素を含まない
head要素内 で使えます。
つまり、文書内に置くことができるbase要素は1つだけです。 - 気をつけることは？
- 文書内に複数のbase要素が存在する場合は、最初のhref属性 と target属性 が使用され、それ以外のものは無効となります。
またbase要素に href属性 や target属性 が指定されている場合、<link>タグの href属性 のように、URLの属性値を持つ要素の前に置く必要があります。
文書内にbase要素は１つだけ！他にリンクをもつ、どの要素よりも先に記述してあげましょう！
使える属性は？
グローバル属性の使用が可能です。
また、以下の属性も使用可能です。
<base> タグには、どの要素にでも使えるグローバル属性の使用が可能で、以下の固有属性のいずれかもしくは両方の使用が必要です。
href 属性
base要素においては、ベースとなるURLを指定する属性です。
- 属性値
-
- URL
- 相対パス、絶対パスのどちらも可
target 属性
リンク先の表示方法を指定する属性です。
- 属性値
-
_self初期値- 現在のウィンドウに表示
_blank- 新規のタブ、もしくは新規のウィンドウを立ち上げそこに表示
タブかウィンドウかは、ブラウザによって異なる _parent- 現在のフレームの親フレームで表示
親に当たるものがないときは、_selfや_topと同じ動きをする _top- 最上位の領域に表示
特にフレームに分割されていなければ、_selfと同じ動きをする
href属性かtarget属性なくして、base要素は使えません！！！
サンプルが見たい
<base>タグを使ったサンプルを
いくつか紹介。
<base> タグを使ったサンプルを紹介します。
※下記のブラウザの表示例では、アドレスバーのURLは変更されません。
アドレスバーの変更を確認する場合は、別ウインドウでサンプルを開いてください
基本的な<base>タグのサンプル
下記の２つのコードは、
base要素を指定する以外全て同じコードです。
target属性は指定していませんが_self指定と同様の挙動です。
<head>
<title>base要素を指定しない場合</title>
</head>
<body>
<h1>base要素を指定しない場合</h1>
<p>
<a href="/html/base/">ここをクリック</a>でこのタブにリンク先を表示
</p>
</body>https://codehero.shibajuku.net/html/base/base04-1/
<head>
<title>base要素に"https://shibajuku.net/"を指定した場合</title>
<base href="https://shibajuku.net/" />
</head>
<body>
<h1>base要素に"https://shibajuku.net/"を指定した場合</h1>
<p>
<a href="/html/base/">ここをクリック</a>でこのタブにリンク先を表示
</p>
</body>https://codehero.shibajuku.net/html/base/base04-2/
target 属性を使ったサンプル
<head>
<title>_blankを指定した場合</title>
<base target="_blank" />
</head>
<body>
<p>
<a href="https://codehero.shibajuku.net/html/base/">新規タブ（ウィンドウ）で開く</a>
</p>
<p>新規タブで開くけど、ちゃんと戻ってきてね。。。</p>
</body>https://codehero.shibajuku.net/html/base/base02/
ここで指定した属性値は、ページ内の全てのリンクに反映されますー
デフォルトスタイルは？
特に表示に影響する
スタイルはついていません。
base要素は目に見えない系のタグです。
対応ブラウザは？
どのブラウザでも使えます！
base要素は HTML1以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar あり
- Edge
- Edge あり
- Google Chrome
- Google Chrome あり
- Firefox
- Firefox あり
- Safari
- Safari あり
- Opera
- Opera あり
モダンブラウザは問題ありません。
