このページについて
このページではHTMLのtarget属性の機能や使い方を掲載しています。
target属性
target属性はリンクされたドキュメントを開く場所を指定します。aタグ、areaタグ、baseタグ、formタグの4種類で使う事ができます。
target属性の書き方はシンプルですが、それぞれで若干扱い方が異なります。それぞれのタグごとに解説します。
aタグ
aタグで使う場合のtarget属性は「リンクされたドキュメントを開く場所を指定」という機能になります。基本的な書き方は以下の通りです。
<a href="リンク先URL" target="値">リンク名</a>値には以下から1つ選んで設定します。
| _blank | リンクされたドキュメントを新しいウィンドウか、タブで開きます |
|---|---|
| _self | 現在開いているウィンドウで開きます(デフォルト) |
| _parent | リンクされたドキュメントを親フレームで開きます |
| _top | リンクされた文書をウィンドウの全文で開きます |
| framename | 名前付きiframeでリンクされたドキュメントを開きます |
通常は規定値のselfを使えば問題はありません。あるとすればblankのみ、扱いには注意が必要です。というのもblankだけは脆弱性の問題から、単体で使う事はあまり推奨されていません。rel属性のnoopenerと組み合わせて、リンク元となる文書へのアクセスを許可しない設定にしないとまぁまぁ問題になります。
framenameは少し特殊な使い方をします。これはareaタグにも共通する事なのであとで個別で解説します。
areaタグ
areaタグで使う場合にも、aタグと同様の書き方で問題ありません。
<area shape="形" coords="座標" href="画像URL" alt="代替えテキスト" target="値">areaタグで使えるtargetの値は以下の通りです。
| _blank | リンクされたドキュメントを新しいウィンドウか、タブで開きます |
|---|---|
| _self | 現在開いているウィンドウで開きます(デフォルト) |
| _parent | リンクされたドキュメントを親フレームで開きます |
| _top | リンクされた文書をウィンドウの全文で開きます |
| framename | 名前付きiframeでリンクされたドキュメントを開きます |
aタグと全く一緒です。
baseタグ
baseタグで使う場合は、ページ上の全てのハイパーリンクとフォームのデフォルトのターゲットを指定できます。
<head>
<base target="_self">
</head>| _blank | リンクされたドキュメントを新しいウィンドウか、タブで開きます |
|---|---|
| _self | 現在開いているウィンドウで開きます(デフォルト) |
| _parent | リンクされたドキュメントを親フレームで開きます |
| _top | リンクされた文書をウィンドウの全文で開きます |
aタグやareaタグからframenameが無くなっただけで、他は使えます。
formタグ
formタグで使う場合は、「受け取った応答を新しいウィンドウで開くかどうか」という指定ができます。
<form target="_self"> </form>| _blank | リンクされたドキュメントを新しいウィンドウか、タブで開きます |
|---|---|
| _self | 現在開いているウィンドウで開きます(デフォルト) |
| _parent | リンクされたドキュメントを親フレームで開きます |
| _top | リンクされた文書をウィンドウの全文で開きます |
| framename | 名前付きiframeでリンクされたドキュメントを開きます |
使える値は基本的に他と同じです。
framenameの使い方
aタグとareaタグとformタグで使う事ができるframenameの使い方についてです。framenameはiframeでリンク先を開くという機能になります。例えば以下のようなソースがあるとします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="./testB.html" target="test">testB</a>
<iframe name="test" width="400" height="400"></iframe>
</body>
</html>bodyタグの真下にあるaタグに注目してください。aタグの中身は「./testBをtarget=”test”で開く」という書き方にしています。ちなみにtestBの中身は一行書いてあるだけです。
//testB.htmlの中身
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>testBの内容がiframe内に表示されます。</p>
</body>
</html>実行前のページはこのようになっています。
そしてtestBをクリックすると、このiframeで指定した範囲の中にtestB.htmlが表示されます。つまりあの一行が表示される事になります。実行すると
こんな感じで表示されます。これがframenameの使い方になります。
まとめ
target属性はaタグ、areaタグ、baseタグ、formタグで使う事ができます。ただし_blankは上でも書いた通り、扱いに注意が必要な値となります。使う際はrel=”noopener”をセットで使うことを心がけましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。