HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのbase要素のtarget属性とは？リンクのデフォルト表示先を一括設定する方法

base要素のtarget属性とは

HTMLの<base>要素におけるtarget属性は、ドキュメント内に含まれるすべてのハイパーリンクに対して、デフォルトの表示先（ターゲット）を一括して設定するための属性です。各リンクに個別にtarget属性を書かなくても、<base>要素で一度指定しておけば、ページ全体のリンクの開き方を統一できるのが大きな特徴です。

基本構文

target属性の基本的な構文は以下のとおりです。

<base target="_blank|_self|_parent|_top|frame">

target属性に指定できる値

target属性には、主に次の5種類の値を指定できます。

  • _blank：リンク先のドキュメントを新しいウィンドウまたは新しいタブで開きます。
  • _self：リンクがクリックされたのと同じフレーム内でドキュメントを開きます（デフォルトの動作）。
  • _parent：親フレーム内でドキュメントを開きます。
  • _top：フレーム構成を解除し、ウィンドウ全体でドキュメントを開きます。
  • frame名：あらかじめ名前を付けた特定のフレーム内でドキュメントを開きます。

実装例

それでは、<base>要素のtarget属性を使った具体的なコード例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com/tutorials/" target="_blank">
</head>
<body>
<h2>チュートリアル一覧</h2>
<p>Javaチュートリアル<br>
（https://www.example.com/tutorials/java.html へのリンクとして機能します）</p>
<p>jQueryチュートリアル<br>
（https://www.example.com/tutorials/jquery.html へのリンクとして機能します）</p>
<p>ブロックチェーンチュートリアル<br>
（https://www.example.com/tutorials/blockchain.html へのリンクとして機能します）</p>
<p>Pythonチュートリアル<br>
（https://www.example.com/tutorials/python.html へのリンクとして機能します）</p>
</body>
</html>

このコードを実行すると、上記のような出力が得られます。target属性に「_blank」が設定されているため、ページ内のどのリンクをクリックしても、必ず新しいウィンドウまたはタブで開く点に注目してください。

コードの解説

この例では、head要素内でベースURLとターゲットを次のように1行で指定しています。

<base href="https://www.example.com/tutorials/" target="_blank">

href属性によって、ページ内の相対URLはすべて「https://www.example.com/tutorials/」を基準として解決されます。さらに、target属性を次のように「_blank」に設定しているため、

target="_blank"

ページ内のすべてのURLが、個別に指定しなくても自動的に新しいウィンドウで開くようになります。このように、<base>要素のtarget属性を活用すれば、多数のリンクを持つページでも表示先の制御をシンプルに管理できます。

  1. HTMLのstart属性とは？順序付きリストの開始番号を指定する方法

    HTMLのstart属性は、順序付きリスト（<ol>要素）において、最初のリスト項目に付与される番号（開始値）を指定するための属性です。通常、順序付きリストは「1」から自動的に採番されますが、start属性を使うことで、任意の番号からリストを開始させることができます。 構文 start属性の基本的な構文は以下のとおりです。 <ol start="number"></ol> start属性の値には正の整数を指定します。例えば「5」を指定すれば、リストは「5、6、7…」というように採番されます。 使用例 それでは、HTMLのstart属性を使

  2. HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説

    HTMLのrowspan属性は、表（テーブル）のセルが縦方向にまたぐ行数を指定するための属性です。この属性を使用することで、複数の行にまたがるセルを作成でき、より柔軟なテーブルレイアウトを実現できます。rowspan属性を適用できるのは、td要素またはth要素のみです。それ以外のHTML要素には使用できない点に注意しましょう。rowspan属性の構文rowspan属性の基本的な構文は以下のとおりです。<タグ名 rowspan=数値></タグ名>「数値」には、セルがまたぐ行数を整数で指定します。たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを持つことに