HTMLの`target`属性とJavaScriptで、もっと自由なWebページ制作を
基本的な使い方
<a href="https://example.com" target="_blank">新しいウィンドウで開く</a>
上記の例では、target="_blank"を指定することで、リンク先のhttps://example.comが新しいブラウザウィンドウで開きます。
target属性で使用できる値
- フレームの名前：その名前のフレームで開く
_parent：親ウィンドウで開く_top：最上位のウィンドウで開く_self：現在のウィンドウで開く（デフォルト）_blank：新しいブラウザウィンドウで開く
- 近年では、JavaScriptを使用してより柔軟なウィンドウ制御を行うことが一般的になっています。
_blank以外の値を使用する場合は、ユーザーのブラウザ設定によって動作が異なる場合があります。- フレームを使用する場合は、
<frame>要素にname属性を必ず設定する必要があります。
- Webアクセシビリティの観点から、すべてのリンクに
target属性を明示的に設定することが推奨されています。 target="_blank"は、ポップアップ広告によく使用されますが、ユーザーにとって邪魔な存在になる可能性があるため、慎重に使用する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>target属性の例</title>
</head>
<body>
<p>このページには、新しいウィンドウで開くリンクがいくつかあります。</p>
<a href="https://example1.com" target="_blank">リンク1</a>
<a href="https://example2.com" target="_blank">リンク2</a>
<a href="https://example3.com" target="_blank">リンク3</a>
</body>
</html>
この例では、3つのリンクそれぞれにtarget="_blank"を指定しています。これらのリンクをクリックすると、それぞれ新しいブラウザウィンドウで開きます。
例2：フレームでリンクを開く
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>target属性の例</title>
</head>
<body>
<p>このページには、フレームで開くリンクがいくつかあります。</p>
<iframe src="https://example.com" name="frame1"></iframe>
<a href="https://example2.com" target="frame1">フレーム1で開く</a>
<a href="https://example3.com" target="frame2">フレーム2で開く</a>
</body>
</html>
この例では、2つの<iframe>要素を使って2つのフレームを作成しています。それぞれの<iframe>要素には、name属性でフレームの名前を指定しています。
そして、リンクにはtarget属性でフレームの名前を指定することで、そのフレームでリンク先のコンテンツを表示するようにしています。
例3：最上位ウィンドウでリンクを開く
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>target属性の例</title>
</head>
<body>
<p>このリンクは、最上位のウィンドウで開きます。</p>
<a href="https://example.com" target="_top">最上位ウィンドウで開く</a>
</body>
</html>
この例では、target="_top"を指定することで、リンク先のhttps://example.comを最上位のウィンドウで開きます。
例4：親ウィンドウでリンクを開く
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>target属性の例</title>
</head>
<body>
<p>このリンクは、親ウィンドウで開きます。</p>
<a href="https://example.com" target="_parent">親ウィンドウで開く</a>
</body>
</html>
この例では、target="_parent"を指定することで、リンク先のhttps://example.comを親ウィンドウで開きます。
JavaScriptによる新しいウィンドウの開閉
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptで新しいウィンドウを開く</title>
</head>
<body>
<button onclick="openNewWindow('https://example.com')">新しいウィンドウで開く</button>
<script>
function openNewWindow(url) {
window.open(url, '_blank');
}
</script>
</body>
</html>
この例では、<button>要素にonclickイベントを設定し、そのイベントハンドラでwindow.open()関数を使用して新しいウィンドウを開くJavaScript関数を呼び出しています。
window.open()関数には、以下の引数を渡すことができます。
specs：新しいウィンドウの仕様（省略可）windowName：新しいウィンドウの名前（省略可）url：開きたいWebページのURL
specs引数には、以下のプロパティをカンマ区切りで指定できます。
resizable：ウィンドウのサイズ変更可否（yesまたはno）scrollbars：スクロールバーの表示（yesまたはno）status：ステータスバーの表示（yesまたはno）menubar：メニューバーの表示（yesまたはno）location：アドレスバーの表示（yesまたはno）toolbar：ツールバーの表示（yesまたはno）height：ウィンドウの高さ（ピクセル）width：ウィンドウの幅（ピクセル）
- CSSの
window-targetプロパティを使用する方法（一部のブラウザのみ対応） <a>要素のhref属性にJavaScriptの呼び出しを含める方法
- Webアクセシビリティの観点から、すべてのリンクに
target属性を明示的に設定することが推奨されています。 target="_blank"は、ポップアップ広告によく使用されますが、ユーザーにとって邪魔な存在になる可能性があるため、慎重に使用する必要があります。target属性は、ユーザーのブラウザ設定によって動作が異なる場合があります。