base要素(baseタグ)はかなり前からある要素なのですが、どういったものか知らない人も多いかと思います。
使い方によって結構便利だったりしますので、今回詳しく解説していきます。
base要素(baseタグ)とは
base要素とは、html内の全ての相対URLの基準となるURLを指定する事ができる要素です。必ずhead内に記述する必要があり、後述のhref属性またはtarget属性が必要となります。
次項で詳しい使い方を解説していきます。
base要素の使い方
base要素の使い方は難しくありません。head内に以下のように記述するだけとなります。
<head>
<base href="基準となるURLを記述">
</head>先程も記載しましたが、必ずhead内にしてください。
記述したURLがそのhtml内で指定されるファイルの読み込みやリンク先の相対URLの基準となります。例えば当サイトのURLを入力して場合の挙動は以下のようになります。
<head>
<base href="https://cdg-blog.jp/">
<link rel="stylesheet" href="./css/style.css">
<!-- ↑ https://cdg-blog.jp/css/style.cssが読み込まれる -->
</head>
<body>
<a href="./test.html">
<!-- ↑ https://cdg-blog.jp/test.htmlへのリンクとなる -->
</body>上記のように、base要素のhref属性にいれたURLが全ての相対パスの基準となります。
ページ構成が複雑になればなるほど相対パスの記述ミスが出てきますので、どのページから見ても同じ相対パスで済むのは結構便利です。
今回使用しているのはhref属性のみですが、target属性というのもありますので後述します。
base要素で使用出来る主な属性について
base要素で使用出来る主な属性は以下となります。
href
基準となるURLを指定することができます。主にこちらを使用するかと思います。
target
aタグなどに記載したURLをどこに開くは指定する事ができます。(例：_blankなど)
これらの属性を複数使用する場合は以下のようにまとめて記載ができます。
<head>
<base href="https://cdg-blog.jp/" targe="_blank">
</head>このように記載する事で、全ての相対パスは当サイトのトップページを基準とし、aタグなどのリンクは全て別タブ(新しいウインドウ)で開くようになります。
base要素の注意点
base要素の注意点としては以下があります。
- base要素の各属性はページ内に1つのみ有効。2つ目以降は無視されます。
- base要素が記載された後の要素のみに有効となります。
- 絶対パス(URL)についてはbase要素は反映されません。相対パス(URL)のみとなります。
- ページ内リンクを設置する際はtarget属性に注意してください。
- WordPressなどのCMSやJSで出力するものについては意図しない挙動となる場合があります。
さいごに
いかがでしたでしょうか。
今回は、基準となるURLを指定できるbase要素(baseタグ)の使い方と注意点について解説しました。
複雑な階層での「../../../」などの記載がなくなる・ミスが少なくなるのはとても便利だなと思いました。CMSが多い昨今ではあまり活躍の場は無いかもしれません(独自のURL参照関数等がある為)が、使い方によっては便利ですので、ぜひ使ってみてください。
