リンクが「/(スラッシュ)」始まりのサイトをローカルで構築する方法(baseタグ)

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

当記事はこんな方にオススメ

・「href=”/style.css”」みたいに、リソース系のリンクが全て「/(スラッシュ)」始まりのサイトを、本番以外で確認するのが面倒

 

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タグの削除を忘れがち

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

 

まとめ

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

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

セールスのお電話に関しまして

制作業務の電話がつながりにくい状態になり、業務に支障がでる事がございます
当社では営業の電話は全てお断りさせて頂いております

スネアクロス株式会社

〒810-0012
福岡県福岡市中央区白金1-12-24 Pt.1224 201

https://s-cross.net

TEL: 092-260-6570