HTMLでリンクを新しいタブで開く方法【aタグのtarget属性を使用】

2020/03/13

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTMLのaタグでリンクを新しいタブで開く方法が知りたい

という方のお悩みを解決します！

「新しいタブで開く」機能が使用されているのは、一番身近なところで言えばAmazonです。

商品一覧ページで商品画像をクリックすると、
その商品の詳細ページが新しいタブで開かれますよね。

新しいタブでページを開くことで特にPCでは、ユーザーが前のページに戻ってきやすくなります。

「新しいタブで開く」機能はtarget属性を使用することで簡単実装できます。

それでは使い方を見て参りましょう〜！

target属性で「新しいタブで開く」実装

HTMLでリンクを作る時は、以下のようにaタグを使用しhref属性にリンク先URLを指定します。

index.html

<a href="https://www.google.com/">現在のタブで開く</a>

上記のコードですと、リンク先URLは現在開いているタブで表示されます。

リンクを新しいタブで開かせるには、target属性の値を「_blank」で指定してあげましょう。

index.html

<a href="https://www.google.com/" target="_blank">現在のタブで開く</a>

MEMO

ちなみにaタグのaはAnchorのaです。
blankは「空白の」「からの」と言った意味があり、blank spaceで「余白」という意味になります。

以下、今回紹介した「リンクを新しいタブで開く」のサンプルです。

target属性に_blankを指定してあるので別タブでGoogleのトップページが開かれます。

See the Pen
GRJxvaY by 石森裕也 (@yuyaphotograph)
on CodePen.

aタグのtarget属性に_blankを指定するだけでリンクを新しいタブで開かせることができましたね！

「Javascriptでリンクを開く方法も知りたい！」という方は以下の記事で解説しているのでチェックしてみてください〜！