target属性を使いこなして、ユーザー体験を向上させる

HTMLのtarget属性：リンク先の表示場所を制御

属性値

target属性には、以下の属性値を指定できます。

• _blank：新しいウィンドウまたはタブでリンク先を開きます。
• _self：現在のフレームまたはウィンドウでリンク先を開きます。
• _parent：親フレームでリンク先を開きます。
• _top：最上位のフレームでリンク先を開きます。
• フレーム名：指定された名前のフレームでリンク先を開きます。

例

<a href="https://example.com/" target="_blank">新しいタブで開く</a>

上記のコードでは、"https://example.com/"へのリンクをクリックすると、新しいタブで開きます。

注意点

• target属性は、すべてのブラウザでサポートされているわけではありません。
• target属性を使用する場合は、ユーザーの意図に反して別のウィンドウが開く可能性があるため、注意が必要です。

HTML target属性のサンプルコード

<a href="https://example.com/" target="_blank">新しいタブで開く</a>

現在のフレームでリンクを開く

<a href="https://example.com/" target="_self">現在のフレームで開く</a>

親フレームでリンクを開く

<a href="https://example.com/" target="_parent">親フレームで開く</a>

最上位のフレームでリンクを開く

<a href="https://example.com/" target="_top">最上位のフレームで開く</a>

指定された名前のフレームでリンクを開く

<a href="https://example.com/" target="frame_name">frame_nameというフレームで開く</a>

フォーム送信時に新しいタブで結果を表示

<form action="https://example.com/" target="_blank">
  <input type="submit" value="送信">
</form>

すべてのリンクを新しいタブで開く

<base target="_blank">

特定のフレームのみ新しいタブで開く

<iframe src="https://example.com/" name="frame_name"></iframe>
<a href="https://example.com/" target="frame_name">frame_nameというフレームで開く</a>

JavaScriptを使用してtarget属性を動的に変更

<a href="https://example.com/" id="link">リンク</a>

<script>
  const link = document.getElementById("link");
  link.target = "_blank";
</script>

上記はあくまで基本的な例です。target属性はさまざまな用途で利用できますので、ご自身の目的に合わせて使い分けてください。

HTML target属性の代替方法

• ユーザーの意図に反して別のウィンドウが開く可能性があるため、注意が必要です。
• セキュリティ上のリスクを伴う場合があります。
• すべてのブラウザでサポートされているわけではありません。

これらの理由から、target属性の使用を避けたい場合もあります。ここでは、target属性の代替方法をいくつか紹介します。

JavaScriptを使用して、リンクをクリックしたときに新しいウィンドウまたはタブを開くことができます。

function openInNewTab(url) {
  window.open(url, "_blank");
}

<a href="https://example.com/" onclick="openInNewTab(this.href)">新しいタブで開く</a>

CSSを使用して、リンクをクリックしたときに新しいウィンドウまたはタブを開くことができます。

a:hover {
  cursor: pointer;
}

a:active {
  target: _blank;
}

別の要素を使用して、リンク先の表示場所を制御することができます。

• iframe要素：iframe要素を使用して、別のページを現在のページ内に表示することができます。
• window.open()メソッド：window.open()メソッドを使用して、新しいウィンドウまたはタブを開くことができます。

これらの方法を使用することで、target属性を使用せずにリンク先の表示場所を制御することができます。