ywork2020.com

Title

リンクの基底URLを示す

目次 (INDEX)

baseとは

ここで説明する base とは次の語句からなるHTMLの要素です。
base
読み: ベース
意味: 土台、基部

目次に戻る

base要素の概要

この要素は、リンク URL の基底 (ベース) を設定するために使用します。

base 要素の href 属性は Web ページの他の要素に使われる href 属性や src 属性との関りがあり、 リンク先の URL の基底を設定するために使用されます。

設定する基底 URL には絶対 URL と相対 URL の両方が使用できます。

base 要素を使用する場合の注意点は次の 2つです。

  • head 要素内に1つだけ設置する。
  • href 属性を使用している他の要素よりも前に記述する。

この要素は、開始タグのみで機能します。終了タグを使ってはいけません。
<base href="基底URL">

目次に戻る

URLの参照サンプルと解説

まず、サンプルとして以下のタグをページに設置したとします。

サンプルコード: HTML
<head>
	<base href="https://example.com/content/">
</head>

次に a 要素の href 属性に任意のファイルへのリンクを 相対参照 URL で指定したとします。

サンプルコード: HTML
<body>
	<a href="./file.name"> リンクテキスト </a>
	<a href="file.name"> リンクテキスト </a>
</body>

上記のコードは 2 つとも同じ URL を参照することになります。 「 ./ 」 は、「 現在のドキュメントが存在するフォルダ 」 という意味になり、 相対参照としては「 ./ 」 がない場合と同じ結果となります。

リンク先の結果については、以下のようになります。

https://example.com/content/file.name

これを単純に説明すると、base要素の href 属性の値と a 要素の href 属性の値をあわせたものになっています。 つまり、<base href="aaa"> が記述してあるページの <a href="bbb"> の href の値は、結果として "aaabbb" になるということです。

このことを踏まえて上記の結果を具体的に示すと次のようになります。

https://example.com/content/

./file.name

このマーカーで示した「 content 」 と 「 . 」の部分がシンクロして URL を形成しているということです。


それでは次にもう少し相対参照のことについて深堀していきます。 「 ./」は 「 現在のドキュメントが存在するフォルダ 」 の意味だということは分りました。 では別のフォルダを参照したい場合の例をサンプルとして紹介しておきます。

content というフォルダと同じ階層に css というフォルダがあった場合を想定します。 この場合は次のような相対参照 URL となります。

サンプルコード: HTML
<head>
	<base href="https://example.com/content/">
</head>
</body>
	<a href="../css/file.name"> リンクテキスト </a>
</body>

これは、どういうことかというと 「 ./ 」は今いるフォルダの意味ですが、「 ../ 」は今いるフォルダから一つ上の階層 (親フォルダ) に基底を移してから URL の参照をするという意味になります。 エクスプローラーに例えた言い方をすると「 今いるフォルダから1つ上のフォルダに移動して 」から参照するということです。

結果として、 https://example.com/css/file.name が参照されます。
つまり、この a 要素から見た場合の基底 URL は base 要素で指定したものから1つ上の階層までということになり、 https://example.com/ が基底になっているということです。

目次に戻る

サンプルコードと実行結果

javascript で base 要素の href 属性の値を取得する場合には baseURI プロパティを参照します。

サンプルコード: script
<script>document.write(document.baseURI);</script>
<script>document.write(document.body.baseURI);</script>
実行結果:

目次に戻る

使用できる属性

目次に戻る