HTMLでリンクを貼る際に使用するaタグ。
aタグの属性として「target」属性が用意されているが、中でも最もよく使うのが「target=”_blank”」だろう。
<a href="http://example.com/" target="_blank">リンク</a>
target属性に「_blank」を指定すると、別タブでリンクを開くことができる。
今回は普段のコーディングであまり使用することのなかった「target=”_top”」の使用事例について紹介する。
通常のHTMLファイルでの使用例
通常のHTML内で以下のようにリンクを貼っても、target属性を指定しない場合と何ら挙動は変わらない。
<!-- 以下はどちらも同じ挙動 -->
<a href="http://example.com/">リンク</a>
<a href="http://example.com/" target="_top">リンク</a>
iframeで呼び出すHTMLファイルでの使用例
次は、以下のようにiframeタグで別のHTMLファイルを読み込む例を見てみよう。
<iframe src="http://example.com/template.html"></iframe>
template.html内に記載されているaタグにtarget属性が指定されていなかった場合、読み込み元のWebページで該当のリンクをクリックすると、フレーム内のみでページ遷移が起こり、おかしな挙動になってしまう。
ヤフーストアなどのモール系サイトを構築する場合などは、iframeによるテンプレート化を行うケースが多いので注意が必要だ。
この問題に対し「target=”_top”」が役立つ。
<a href="http://example.com/" target="_top">リンク</a>
こうしておけば、読み込んだiframe内のリンクをクリックすると、読み込み元のページがリンク先URLへと遷移され、自然なリンク動作を実現させることができる。