VIDEO LESSON

HTMLのbaseタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の百五本目は、ベースタグです。
0:08ベースは、文書の中にある相対ユーアールエルの基準を変えるための要素です。
0:13普段は今のページの場所を基準にリンク先や画像を探しますが、ベースタグを置くと、
0:17その基準を別の場所へ移せます。
0:21さらに、リンクを同じタブで開くか、新しいタブで開くかという既定の開き方も、
0:24まとめて指定できます。
0:28画面には何も表示されない、地味ですが影響範囲の広い要素です。
0:32今回は、基準ユーアールエルの考え方、エイチレフ属性とターゲット属性、ヘッド内への配置、
0:38コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。
0:44まず、相対ユーアールエルの仕組みを押さえましょう。
0:47ユーアールエルには、ドメインから全部を書く絶対ユーアールエルと、今いる場所からの道順だけを書く相対ユーアールエルがあります。
0:56たとえば、スタートとだけ書いたリンクは、短くて便利ですが、これだけでは最終的な行き先は決まりません。
1:03今のページがどのフォルダーにあるかという基準と組み合わせて、初めて完全な住所になります。
1:09ここがポイントです。
1:10基準を変えれば、本文のリンクを一文字も書き換えなくても、行き先がまとめて変わります。
1:16サイトを別のフォルダーへ移したときや、プレビュー環境で本番の場所を基準にしたいとき、
1:20この仕組みが役立ちます。
1:23逆に言えば、基準を間違えると、全部のリンクがまとめてずれてしまうということでもあります。
1:29ベースタグの役割は、大きく二つあります。
1:32一つ目は、エイチレフ属性で相対ユーアールエルの基準を指定することです。
1:38エー要素のリンクだけでなく、画像のエスアールシー、外部シーエスエスの読み込み、
1:44フォームの送信先など、ユーアールエルを使う要素の多くがこの基準の影響を受けます。
1:50二つ目は、ターゲット属性で、リンク先や送信結果をどこに表示するかという既定値を決めることです。
1:57個別のリンクで指定がなければ、ベースのターゲットが使われます。
2:02記事でも、相対ユーアールエルの基準を変える要素であり、画像やページ内リンクにも影響する、
2:06と説明されています。
2:11一か所の指定が文書全体へ効く、という広い影響範囲を、まず頭に入れておいてください。
2:17基本の書き方と配置を確認します。
2:20ベースは空要素です。
2:21終了タグや内側の本文は書きません。
2:24置き場所はヘッドの中だけです。
2:26ボディの中に置いても意味を持ちません。
2:29そして最も大切な条件が、ユーアールエルを持つ要素より前に置くことです。
2:35ベースより前に書かれたリンクや画像には、新しい基準が間に合いません。
2:40あとから書かれたものにだけ基準が効きます。
2:44また、ベースを複数書いても有効になるのは基本的に最初のものだけで、二つ目以降は無視されます。
2:51だからこそ、ヘッドのなるべく早い位置に、一つだけ置くのが原則です。
2:56タイトルやメタ情報と並ぶ、文書設定の一つとして扱ってください。
3:01スライドの例でも、ベースをリンク要素より前に置いています。
3:06エイチレフ属性を詳しく見ます。
3:08ここに書いたユーアールエルが、文書内のすべての相対ユーアールエルを完全な住所へ変換するときの土台になります。
3:15書き方のコツは二つです。
3:17一つ目は、絶対ユーアールエルで書くこと。
3:20基準自体を相対的に書くと、今度はその基準を何で解釈するのかという話になり、
3:24読み手もブラウザーも混乱しやすくなります。
3:28二つ目は、フォルダーを基準にするなら、末尾をスラッシュで終わらせることです。
3:34たとえばガイドというフォルダーの最後にスラッシュがある場合、その後ろにスタートと続ければ、
3:38ガイドの中のスタートという住所になります。
3:43スラッシュがないと、ガイドがファイル名のように扱われ、意図と違う住所になることがあります。
3:49最後の一文字までが意味を持つ、と覚えてください。
3:53次にターゲット属性です。
3:55これは、リンク先やフォームの送信結果を、どの閲覧コンテキストに表示するかの既定値を決めます。
4:02代表的な値は、今のタブで開くセルフ、新しいタブやウィンドウで開くブランク、
4:08そしてフレームを使っている場合の親へ開くペアレント、最上位へ開くトップです。
4:15たとえば外部サイトへのリンクが多いページで、ベースにブランクを指定しておけば、
4:19リンクごとに毎回書く手間が省けます。
4:24ただし優先順位に注意してください。
4:27個別のエー要素やフォーム要素にターゲットが書かれていれば、そちらが優先され、
4:32ベースはあくまで指定がない場合の既定値です。
4:37なお、ブランクで新しいタブを開く運用では、リンク先の扱いなど安全面の指定を個別に検討することも忘れないでください。
4:46記事の活用事例をもとに、コード例を確認します。
4:50ヘッドに、ガイドというフォルダーを基準とするベースタグを置いています。
4:55するとボディでは、スタートとだけ書いたリンクが、ガイドフォルダーの中のスタートを指すようになります。
5:02画像も同じです。
5:03イメージズの中の画像という相対指定が、基準の後ろに続けて解釈されます。
5:08本文側の書き方は短い相対ユーアールエルのままで、行き先だけを一か所でそろえられる。
5:14これがベースの便利さです。
5:16練習では、エイチティーエムエル入門で作ったファイルをコピーし、ヘッドにベースを置いてから、
5:21開発者ツールで実際のリンク先を確認してみてください。
5:26例に出てくるエグザンプルドットコムは説明用のドメインなので、自分の環境の住所へ置き換えて試します。
5:33意外な落とし穴が、ページ内リンクです。
5:36シャープで始まるリンクは、今のページの中を移動するためのもの、という感覚が強いと思います。
5:44しかし仕様上、このリンクも相対ユーアールエルの一種として、ベースの基準で解決されます。
5:51つまり、基準が別のページや別のドメインを指していると、ページ内移動のつもりが、
5:57その基準ページの該当箇所へ飛んでしまうことがあるのです。
6:03記事でも、シャープで始まるリンクも基準ユーアールエルの影響を受けるので、
6:09ページ内移動が意図通りか確認してください、と注意されています。
6:14ベースを導入したら、目次リンクやトップへ戻るリンクなど、シャープだけのリンクを実際にクリックして確かめる。
6:23この一手間が、静かな不具合を防ぎます。
6:27では、どんな場面で導入を検討すべきでしょうか。
6:30一つは、サイトの置き場所が変わる場面です。
6:33制作中のプレビュー環境や、移転先のフォルダーで、本文のリンクを直さず、基準だけを差し替えて確認したい場合に有効です。
6:41もう一つは、プログラムで自動生成するページなど、相対パスの基準を共通でそろえたい場合です。
6:47逆に、普通にフォルダー構成が安定しているサイトでは、ベースを使わない書き方のほうが、
6:52リンク先が目で追いやすく、トラブルも少なくなります。
6:57ベースは便利な近道ではなく、基準を文書全体で統一したい明確な理由があるときの道具です。
7:03導入するなら、影響を受けるリンク、画像、スタイルシート、フォームを一覧で洗い出してからにしてください。
7:10ブラウザー互換性を確認します。
7:13記事が紹介するエムディーエヌのデータでは、ベース要素本体は、クロームが一以降、
7:18エッジが十二以降、ファイアフォックスが一以降、サファリが三以降から対応しています。
7:24属性ごとに見ても、エイチレフとターゲットは、どちらもまったく同じ世代から対応しています。
7:31つまり、ベースはエイチティーエムエルの初期からある仕組みで、現在の主要ブラウザーで使えない場面はまず考えなくてよい、
7:36ということです。
7:40互換性の心配よりも、この要素で注意すべきは動作の理解のほうです。
7:45対応しているからこそ、置いた瞬間に文書全体へ静かに効いてしまいます。
7:50モバイル環境も含め、利用対象のブラウザーで実際のリンク先を確認する作業を、
7:54導入手順に含めておきましょう。
7:58まとめとして、よくある間違いを三つ挙げます。
8:01一つ目は、ベースをリンク要素や画像より後ろに置いてしまうことです。
8:07前にある要素には基準が効かず、ページの中で行き先がばらばらになります。
8:12二つ目は、ベースを二つ書いて、二つ目にも期待することです。
8:17有効なのは最初のものだけです。
8:20三つ目は、導入後に確認を省くことです。
8:23特にシャープだけのページ内リンクや、画像、フォームの送信先は、見た目では異常に気づきにくいまま行き先が変わります。
8:32ベースタグは、相対ユーアールエルの基準と、リンクの既定の開き方を、文書全体へ一括で決める要素です。
8:40置くのはヘッドの先頭近くに一つだけ、導入後は全リンクを確認。
8:45これでベースタグの解説を終わります。
8:48まずは記事の例で、基準を変えたときの行き先の変化を試してみてください。

この動画で学べること

baseタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。相対URLの基準を変えます。画像やページ内リンクにも影響するため、導入時は全リンクを確認します。

解説記事・サンプルコードを読む：HTMLのbaseタグとは？属性・使い方・ブラウザー互換性と活用例 →