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