HTML5

2021.11.30

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

ディレクトリ階層が深い時などに役立つ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の影響を受けたくない場合は、個別で絶対パスで指定するなどして対応しましょう。

こちらの記事もおすすめ

この記事をシェアする

関連記事

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2021.11.09

    HTML5で使える全要素まとめ

    HTML5

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

おすすめ記事

  • 2022.06.15

    スキルを上げたきゃ数をこなせ!1ヶ月毎日ロゴを作った話

    デザイン

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.06.30

    【作業のお供に!】おすすめ深夜ラジオ3選

    社員ブログ

×