/ を記述する必要があります。下記の記述では遷移先は、https://www.ipentec.com/jump.html になってしまいます。 <base href="https://www.ipentec.com/document">
HTMLページで相対パスの基準となるURL位置を変更するコードを紹介します。
HTMLページで相対パスを記述した場合、通常はHTMLのページのURLの位置からの相対パスとなりますが、
相対パスの基準のURLを変更したい場合があります。
baseタグを利用すると、相対パスの基準を変更できます。
URLで指定する場合は以下の書式を利用します。
<base href="https://(URL)/">
<base href="http://(URL)/">
ホストのルートから指定する場合は次の書式を利用します。
<base href="/(フォルダパス)/">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>Baseタグがある場合のデモ</h2>
<a href="jump.html">リンク1です</a><br />
</body>
</html>
上記のHTMLファイルを (ホスト名)/index-non-base.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
URLのhtmlファイルの位置が基準となるため、リンク先は (ホスト名)/jump.html となります。
同じファイルを(ホスト名)/sub/index-non-base.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
URLのhtmlファイルの位置が基準となるため、リンク先は (ホスト名)/sub/jump.html となります。
baseタグにドメイン名を指定した場合の動作です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<base href="https://www.ipentec.com">
</head>
<body>
<h2>Baseタグがある場合のデモ(ドメイン名指定)</h2>
<a href="jump.html">リンク1です</a><br />
</body>
</html>
上記のHTMLファイルを (ホスト名)/index-base-domain.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているドメイン名が基準となり、https://www.ipentec.com/jump.html に遷移します。
同じファイルを(ホスト名)/sub/index-non-base.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているドメイン名が基準となり、https://www.ipentec.com/jump.html に遷移します。
baseタグにURLを指定した場合の動作です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<base href="https://www.ipentec.com/document/">
</head>
<body>
<h2>Baseタグがある場合のデモ</h2>
<a href="jump.html">リンク1です</a><br />
</body>
</html>
/ を記述する必要があります。下記の記述では遷移先は、https://www.ipentec.com/jump.html になってしまいます。 <base href="https://www.ipentec.com/document">
上記のHTMLファイルを (ホスト名)/index-base-url.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているURLが基準となり、https://www.ipentec.com/document/jump.html に遷移します。
同じファイルを(ホスト名)/sub/index-base-url.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているURLが基準となり、https://www.ipentec.com/document/jump.html に遷移します。
baseタグにパスを指定した場合の動作です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<base href="/contents/">
</head>
<body>
<h2>Baseタグがある場合のデモ</h2>
<a href="jump.html">リンク1です</a><br />
</body>
</html>
/ を記述する必要があります。下記の記述では遷移先は、(配置先HTMLのホスト)/contents/jump.html になってしまいます。 <base href="/contents/subdir">
上記のHTMLファイルを (ホスト名)/index-base-path.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているURLが基準となり、(ホスト名)/contents/jump.html に遷移します。
同じファイルを(ホスト名)/sub/index-base-path.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているURLが基準となり、(ホスト名)/contents/jump.html に遷移します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<base href="/contents/sub-contents/">
</head>
<body>
<h2>Baseタグがある場合のデモ (パスを指定)</h2>
<a href="jump.html">リンク1です</a><br />
</body>
</html>
上記のHTMLファイルを (ホスト名)/index-base-path-sub.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているURLが基準となり、(ホスト名)/contents/sub-contents/jump.html に遷移します。
同じファイルを(ホスト名)/sub/index-base-path-sub.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているURLが基準となり、(ホスト名)/contents/sub-contents/jump.html に遷移します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<base href="contents/">
</head>
<body>
<h2>Baseタグがある場合のデモ (相対パスを指定)</h2>
<a href="jump.html">リンク1です</a><br />
</body>
</html>
上記のHTMLファイルを (ホスト名)/index-base-relative-path.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているURLが基準となり、(ホスト名)/contents/sub-contents/jump.html に遷移します。
同じファイルを(ホスト名)/sub/index-base-relative-path.html に配置した場合の動作です。
ページを表示し、リンクをクリックします。
baseタグに指定されているURLが基準となり、(ホスト名)/sub/contents/sub-contents/jump.html に遷移します。
相対ディレクトリのため、HTMLファイルのある位置からの相対URLになります。
書式と遷移先の動作をまとめると次のようになります。
| baseタグのhrefの値 | HTMLファイルのURL | リンク先 | 遷移先URL |
|---|---|---|---|
| (設定なし) | (URL)/index.html | jump.html | (URL)/jump.html |
| https://www.ipentec.com | (URL)/index.html | jump.html | https://www.ipentec.com/jump.html |
| https://www.ipentec.com | (URL)/sub/index.html | jump.html | https://www.ipentec.com/jump.html |
| https://www.ipentec.com/document/ | (URL)/index.html | jump.html | https://www.ipentec.com/document/jump.html |
| https://www.ipentec.com/document/ | (URL)/sub/index.html | jump.html | https://www.ipentec.com/document/jump.html |
| /contents/ | (URL)/index.html | jump.html | (URLのホスト)/contents/jump.html |
| /contents/ | (URL)/sub/index.html | jump.html | (URLのホスト)/contents/jump.html |
| /contents/sub-dir/ | (URL)/index.html | jump.html | (URLのホスト)/contents/sub-dir/jump.html |
| contents/ | (URL)/index.html | jump.html | (URL)/contents/jump.html |
| contents/ | (URL)/sub/index.html | jump.html | (URL)/sub/contents/jump.html |
