TOP
【HTML5】base要素の使い方と注意点を解説

2024.06.18

【HTML5】base要素の使い方と注意点を解説

コーディング

HTML

ディレクトリ階層が深い時などに役立つbase要素について解説します！

説明を読んだだけではどんな意味を持つ要素なのかわかりづらい要素なので、サンプルコードを用いてわかりやすく解説します！

base要素とは？

base要素は、HTMLファイル内で指定されている相対URLの基準となるURLを設定するための要素です。

また、target属性を指定することで、HTMLファイル内全体のリンクの表示方法を指定することができます。

ルール

HTMLファイル内に1つまでしか指定できない
必ずhead要素内に書く
記述する際は、href属性かtarget属性のいずれかを指定する必要がある

実際にこんなことを言われてもよくわからないと思うので、サンプルコードを例に解説していきます！

base要素で基準URLを指定してみよう

それでは、実際にbase要素をどのように指定するのか見てみましょう。

https://sample.com/というサイトがあり、ディレクトリが以下のようになっていたとします。

index.htmlの中身は以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <base href="https://sample.com/index.html">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <title>テスト</title>
</head>

<body>
    <p>テスト</p>
</body>
</html>

base要素にhttps://sample.com/index.htmlを指定しています。この指定をすることで、このHTMLファイル内の相対パスの基準URLは、https://sample.com/index.htmlとなります。

base要素下にある外部CSSファイルの相対パスは絶対パスに直すと以下のようになり、CSSファイルを正しく読み込んでいます。

<link rel="stylesheet" type="text/css" href="./css/style.css">
↓
<link rel="stylesheet" type="text/css" href="https://sample.com/css/style.css">

ここまでの話なら、https://sample.com直下のindex.htmlがcssディレクトリ内のstyle.cssを読みにいくために./css/reset.cssと記述するのは普通のことですよね。

base要素がない場合は現在のページが基準URLとなります。そのため、現在のページを基準として指定するなら指定しなかった時とでは違いがありません。

base要素の指定によって相対パス基準が変わる例

上記の例ではbase要素を指定している意味があまりわかりませんが、次の例でよくわかると思います。

https://sample.comの下層、testディレクトリを例とします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <base href="https://sample.com/test/index.html">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <title>テスト</title>
</head>

<body>
    <p>テスト</p>
</body>
</html>

base要素に、現在のページであるhttps://sample.com/test/index.htmlを指定しています。

外部cssファイルの読み込みを見てみましょう。

testディレクトリ内のcss/stye.cssを読み込んでいます。絶対パスに直すと以下の通りです。

<link rel="stylesheet" type="text/css" href="./css/style.css">
↓
<link rel="stylesheet" type="text/css" href="https://sample.com/test/css/style.css">

では、base要素を以下のように変更してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <base href="https://sample.com/">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <title>テスト</title>
</head>

<body>
    <p>テスト</p>
</body>
</html>

基準URLをhttps://sample.com/としました。

この場合、外部CSSファイルはhttps://sample.com/css/style.cssを読みに行きます。

https://sample.com/index.htmlを指定したためです。

このようにbase要素で基準URLを指定すると、相対パスの基準位置を変更することができるのです。

base要素のtaeget属性でファイル全体のリンク表示方法を指定する

base要素のtarget属性でファイル全体のリンク表示方法を指定することができます。

たとえば、別タブで開くという指定target="_blank"をbase要素に指定すると、ファイル内のデフォルトのリンク表示方法が別タブ表示になります。

<base href="https://sample.com/" target="_blank">

base要素の使い方まとめ

階層が深いファイルにルートディレクトリのファイルを読み込ませたい時に、../../../ とか指定しなくて済み、とても便利です！

base要素の基準URLの影響を受けたくない場合は、個別で絶対パスで指定するなどして対応しましょう。

こちらの記事もおすすめ

【HTML5】base要素の使い方と注意点を解説

この記事をシェアする

WEB担当者になったらまず読んで欲しいおすすめ書籍

カスタムタクソノミーページのURLをカスタマイズする方法

【HTML5】base要素の使い方と注意点を解説

base要素とは？

base要素で基準URLを指定してみよう

base要素の指定によって相対パス基準が変わる例

base要素のtaeget属性でファイル全体のリンク表示方法を指定する

base要素の使い方まとめ

関連記事

おすすめ記事