baseタグとは?|相対URLの基準となるURLを指定しよう

baseタグとは?|相対URLの基準となるURLを指定しよう
リンゴ
博士、<base>タグって一体どんなタグなんですか?
博士
<base>タグは相対URLの基準となるURLを指定する際に使うんじゃ。
リンゴ
??
早退?
博士
少し分かりづらかったかの。
<base>タグは記述しておくと何かと便利じゃから、今回は使い方を解説しておこう。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<base>タグとは

 

<base>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類メタデータ・コンテンツ
利用場所head要素内に1つだけ
内容


 
 
<base>タグは、ページに記載されたリンク先URL(相対URL)の基準となるURLを指定する際に使用するタグです。

<head>〜</head>の中で1つだけ指定でき、基準としたURLはその文書内の全ての相対URL(リンク、画像、フォームなど)に適用されます。

<base>タグを使用する場合は、href属性とtarget属性のどちらか、または両方を指定しなければいけません。

base要素が複数指定された場合、最初のhref属性とtarget属性の値が使用され、他はすべて無視されます。
 
 

base要素の利用場所に関して

base要素は、URLが指定された他の要素よりも前に配置しなければなりません。
例えば、head要素内にlink要素などが含まれる場合は、それよりも前にbase要素を配置する必要があります。
ただし、html要素は除きます。
 
 

href属性

その文書の基準となるURLを絶対パスで指定します。

 
 
この指定を行うと、それ以降に現れる相対URLが、このURLを基準としてブラウザに認識されるようになります。
 
 

スポンサーリンク

target属性

リンク先の表示方法の基準を指定します。

 
 
指定できる値は以下の通りです。

_blank新規のウィンドウ(フレーム)に表示
_self現在のウィンドウ(フレーム)に表示
_parent現在のウィンドウ(フレーム)に親があれば、その親ウィンドウ(フレーム)に表示
_topフレームを解除してウィンドウ全体に表示
ターゲット名任意の名前を付けたウィンドウ(フレーム)で表示

 
 

使用例

 
 

表示例

HTML5 タグ図鑑はこちら

 
 
博士
基準となるURLを指定しておけば、文書を他のディレクトリに移動したとしても、いちいち文書内のリンクを書き換えずに済むんじゃ。
リンゴ
なるほど!
 
 

スポンサーリンク

まとめ

<base>タグは、相対URLの基準となるURLを指定する際に使用するタグです。

博士
href属性・target属性の指定は忘れないようにしよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








baseタグとは?|相対URLの基準となるURLを指定しよう