baseタグで効率的にサイト編集とプレビュー

baseタグは参照を全て絶対パスに変更するタグです。あたかもサーバー上にあるファイルを編集しているかのようなレイアウト確認ができます。僅かな修正のためにわざわざローカルのテスト環境を更新する手間も省けます。HTMLファイル１枚で作業できます。

1.<base>タグの機能

<head>内にに<base href="(URL)">を記述すると、HTMLだけローカル環境に置いてレイアウトのテストを行えます。
<base>タグを使うと指定したURLでの絶対パス指定と認識します。

絶対パスとは「必ずドメインの直下を参照する」、相対パスとは「ファイルの場所より下位を参照する」です。

１）通常のサイトアクセス

ネット上でhttp://seo-jump/content/index.htmlから見ると-
(相対パス)./css/style.cssは、http://seo-jump/content/css/style.cssを指す。
(相対パス)../css/style.cssは、http://seo-jump/css/style.cssを指す。
(絶対パス)/css/style.cssは、http://seo-jump/css/style.cssを指す。

２）通常のPC内のファイルアクセス

ローカルでC:\home\desktop\site\index.htmlから見ると-
(相対パス)./css/style.cssは、C:\home\desktop\site\css\style.cssを指す。
(相対パス)../css/style.cssは、C:\home\desktop\site\style.cssを指す。
(絶対パス)/css/style.cssは、C:\css\style.cssを指す。

３）<base href=”http://seo-jump.com/”>を配置した場合　ー

ローカルでC:\home\desktop\site\index.htmlからのパスの変化
(相対パス)./css/style.cssは、http://seo-jump/content/css/style.cssを指す。
(相対パス)../css/style.cssは、http://seo-jump/css/style.cssを指す。
(絶対パス)/css/style.cssは、http://seo-jump/css/style.cssを指す。

上記のようにbaseを配置すると、１）通常のサイトアクセスと同じ参照をしてくれます。つまり、サーバに配置したファイルをブラウザで見るのと変わらなくなります。

<head>
/* headタグ直下 に配置すると*/
<base href="http://seo-jump.com/">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>最新のSEO対策ならSEO JUMP</title>

<link rel="stylesheet" href="./css/style.css" type="text/css">
/*　▲　http://seo-jump.com/css/style.css　として参照*/

<link rel="stylesheet" href="./css/sp.css" type="text/css">
/*　▲　http://seo-jump.com/css/sp.css　として参照*/

<script type="text/javascript" src="./js/jquerya.js"></script>
/*　▲　http://seo-jump.com/js/jquerya.js　として参照*/
</head>

2.<base>タグの特性

baseより下が影響する

影響を受けるのはbaseタグ以降（ここポイント）でbaseより上は影響しません。

<head>
<base href="http://seo-jump.com/">
<link rel="stylesheet" href="./css/styleA.css" type="text/css">
<link rel="stylesheet" href="./css/styleB.css" type="text/css">

/*どちらも　http://seo-jump.com/　の直下の階層を見に行く*/

baseより上は影響しない

<head>
<link rel="stylesheet" href="./css/styleA.css" type="text/css">
/* baseより上のファイルはbase URLの影響受けない*/
<base href="http://seo-jump.com/">
<link rel="stylesheet" href="./css/styleB.css" type="text/css">
/* http://seo-jump.com/　の直下の階層を見に行く*/

ローカルのCSSはbaseと１セットで扱う

上記のように挿入位置でコントロールできるのでHTML+CSSのセットで編集する場合にも活用できます。但し、複数のCSSを利用の場合は「CSSは後方のスタイルに上書きされる」事を考慮に入れましょう。

3.baseタグの利点は場所を選ばない事

HTML修正はbaseタグの運用で十分運用できます。追加ページを作るなど、テンプレートがネット上のファイルを再利用できる時もbaseタグの活用で「どこでも」編集可能になります。

サイトと同じ構成のコピーをフルセットで用意する必要が無いのが最大のメリットです。ネット環境、ブラウザ、テキストエディタがあれば、ブラウザからHTMLソースを取得し、直ぐにでも編集開始です。移動中でも、他の人の端末でも、どこでも編集可能になります。

4.baseタグ利用の注意点

必ず、サーバのアップ前にbaseタグを削除しましょう。
前述していますがCSS編集は後方のスタイル指定に上書きされてしまいます。
CSS内のパスの指定（background-image等）はbaseタグが機能しません。
CSSのパス指定やスクリプトの調整には向いていません。

HTMLとCSSの基本知識はこちらもどうぞ。