「baseタグってなんだろう」や「baseタグはどんなときに使うの」と悩んでいませんか？
ここでは、baseタグの使い方とメリットをわかりやすく解説します。
HTMLの中には、たくさんのタグがありますが、その中でも、baseタグは少し特殊な役割を持っています。
あまり使う機会はないかもしれませんが、baseタグの使い方とメリットをお伝えするので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- baseタグの基本知識
- baseタグの具体的な使い方
- baseタグの属性
- baseタグを使う5つのメリット
- baseタグに関するよくある質問（FAQ）
- 【まとめ】baseタグとは
|
baseタグの基本知識
まずは、baseタグの基本知識からお伝えします。
baseタグとは
baseタグは、リンクや画像のパスをまとめて設定するタグです。
このタグを使うと、ホームページの中のリンクが、すべて同じURLを使うようになります。
たとえば、ホームページにたくさんのリンクがあるとき、それぞれに長いURLを書かなくても、baseタグを使えば簡単に管理できるようになります。
baseタグを書く場所
baseタグは、HTMLのheadタグの中に書きます。
そして、「href属性」を使って、基本となるURLを設定します。
この設定をすると、ホームページ内のすべてのリンクが、そのURLから始まるようになります。
baseタグの具体的な使い方
ここでは、baseタグの具体的な使い方をお伝えします。
baseタグの基本的な使い方
まず、HTMLファイルのheadタグの中に、baseタグを追加します。
たとえば、以下のように書きます。
<!DOCTYPE html>
<html>
<head>
<base href="https://toretama.jp/">
</head>
<body>
<a href="page1.html">ページ1</a>
<a href="page2.html">ページ2</a>
</body>
</html>
|
上記のように書くことで、baseタグで設定した href属性のURL（https://toretama.jp/）が、ホームページ内のすべてのリンクの基本となります。
そのため、ページ1やページ2のリンクは、それぞれ、https://toretama.jp/page1.html と https://toretama.jp/page2.htmlに変わります。
target属性の使い方
次に、target属性を使ってみましょう。
target属性は、以下のように書きます。
<!DOCTYPE html>
<html>
<head>
<base href="https://toretama.jp/" target="_blank">
</head>
<body>
<a href="page1.html">ページ1</a>
<a href="page2.html">ページ2</a>
</body>
</html>
|
この場合、page1.html や page2.htmlのリンクをクリックすると、新しいタブでページが開きます。
target属性を「_blank」に設定することで、ホームページ内のすべてのリンクが、新しいタブで開くようになります。
<base target="_top"> の使い方
<base target="_top"> は、フレーム（iframeタグ）を使っているホームぺージで使う記述です。
もし、フレーム（iframeタグ）を使っているホームぺージで、
<base target="_top"> の記述を入れていないと、下記のようにフレームの中でページが開いてしまいます。
これを防ぐために、<base target="_top"> の記述を入れます。
<base target="_top"> の記述を入れることで、フレーム内のリンクがクリックされたときに、新しいページがフレームを外して表示されるようになります。
つまり、ホームページがキレイに表示されるということですね。
なお、サンプルサイトでは、サイドバーにフレーム（iframe）を使っていて、<base target="_top"> の記述を入れているので、良かったら記述や動作を確認してみてください。
baseタグの属性
baseタグには、2つの属性があります。
ここでは、baseタグの属性について、お伝えします。
1. href属性
「href属性」は、baseタグの中で、基本になるURLを設定するために使います。
このURLは、ホームページ内のすべてのリンクや画像のパスの基準になります。
たとえば、baseタグで「href属性」を「https://toretama.jp/」と設定すると、ホームページ内のすべてのリンクは、このURLから始まるようになります。
2. target属性
target属性は、リンクをクリックしたときに、新しいタブやウィンドウで開くかどうかを設定します。
target属性には、いくつかの値がありますが、最もよく使うのは「_blank」です。
これは、リンクを新しいタブで開くことを意味します。
たとえば、baseタグで target属性を「_blank」と設定すると、ホームページ内のすべてのリンクが新しいタブで開くようになります。
baseタグを使う5つのメリット
ここでは、baseタグを使う5つのメリットをお伝えします。
1. リンクの管理が簡単になる
baseタグを使うと、ホームページ内のすべてのリンクの基本URLを、一ヶ所で設定できます。
これにより、各リンクごとに長いURLを書く必要がなくなり、リンクの管理が簡単になります。
2. コードがスッキリする
baseタグを使うと、HTMLのコードがスッキリします。
リンクや画像のパスが短くなるので、コードが読みやすくなり、修正もしやすくなります。
3. ミスが減る
リンクや画像のパスを一ヶ所で設定するため、間違ったURLを書くミスが減ります。
これにより、リンク切れなどのトラブルが少なくなります。
4. 新しいタブで開く
target属性を使うと、リンクをクリックしたときに新しいタブで開くように設定できます。
これにより、元のページに戻りやすくなり、ユーザーの使い勝手がよくなります。
5. メンテナンスが楽
ホームページの基本URLを変更したいときも、baseタグを修正するだけで済むので、メンテナンスが楽になります。
baseタグに関するよくある質問（FAQ）
最後に、baseタグに関するよくある質問（FAQ）をご紹介します。
Q1: baseタグはどこに書くのですか？
baseタグは、HTMLのheadタグの中に書きます。headタグの中に書くことで、ホームページ全体のリンクや画像の基本URLを設定できます。
Q2: baseタグのhref属性にはどんなURLを書けばいいのですか？
href属性には、ホームページの基本となるURLを書きます。たとえば、「https://toretama.jp/」のように書くと、ホームページ内のすべてのリンクがこのURLから始まるようになります。
Q3: baseタグのtarget属性にはどんな値が使えますか？
target属性には、「_blank」などの値が使えます。「_blank」は、新しいタブでリンクを開くことを意味します。
Q4: baseタグを使わないとどうなりますか？
baseタグを使わない場合、各リンクや画像に完全なURLを書かなければなりません。これにより、コードが長くなり、管理が難しくなります。
Q5: baseタグはどのブラウザでも使えますか？
はい、baseタグは主要なブラウザ（Google Chrome、Mozilla Firefox、Microsoft Edge、Safari、Opera）で正しく動作します。
Q6: baseタグを使うとSEOに良い影響がありますか？
はい、baseタグを使うことで、リンクの一貫性や正しいURLの設定ができるため、検索エンジンがページを理解しやすくなり、SEOに良い影響を与えることがあります。
Q7: baseタグを使うときの注意点はありますか？
baseタグを正しく使うためには、HTMLのheadタグの中に書くことと、href属性に正しいURLを書くことが重要です。また、target属性を使うときは、指定する値が正しいかどうかを確認しましょう。
【まとめ】baseタグとは
baseタグとは？その使い方とメリットをわかりやすく解説！の内容は、いかがでしたでしょうか？
baseタグは、リンクや画像のパスをまとめて設定するタグです。
このタグを使うと、ホームページの中のリンクが、すべて同じURLを使うようになります。
ただ、baseタグについては、使う機会は少ないかもしれません。
フレームを使っているホームページの場合は、<base target="_top"> の記述を入れる必要があるため、baseタグは使います。
しかし、一般的なホームページの場合は、baseタグはあまり使う機会がないので、参考程度に覚えておいてくださいね。
