今回は、webコーダーが意外と知らない「baseタグ」と、「baseタグの便利な使い方」についてご紹介します。

baseタグとは？

baseタグとは、スラッシュ始まりのパスで記述されたURI（例：/style.css）の、基準となるURIを指定するタグです。

例えばドメイン「hogehoge.com」直下のhtmlファイル、つまり「hogehoge.com/index.html」ですね。
この「index.html」の中に、以下のソースがあるとします。

▼hogehoge.com/index.html

	
		<link rel="stylesheet" href="/style.css">
	

リンク指定におけるスラッシュ始まりは「絶対パス」です。
つまり上記cssは「hogehoge.com/style.css」を読み込んでいます。

では次に「baseタグ」を追加した場合を見てみましょう。

▼hogehoge.com/index.html（baseタグを追加した場合）

	
		<base href="http://example-hoge.com">
		<link rel="stylesheet" href="/style.css">
	

上記の場合「style.css」は、実際に自分を格納しているドメイン「hogehoge.com」を無視し、「http://example-hoge.com/style.css」を読み込みに行きます。

baseタグの便利な使い方

冒頭で軽く触れたように、baseタグは「本番サーバーからhtmlファイルをダウンロードして、とりあえずローカルで表示させる」という時に使えます。

href属性に本番ドメインを記載したbaseタグを追加すれば良いので、簡単ですよね。

しかし、baseタグを使用した編集には以下のデメリットがあります。

特に「baseタグの削除」は本当に忘れがちなので、注意しておきましょう。

まとめ

以上、baseタグの使い方紹介でした。
恐らく、サーバーサイドの知識が豊富な方はもっといろんな使い方をしていると思います。

私のようなイチコーダーは、「たまに使うかな」という程度ですね。