HTMLでリンクをクリックしたときに新しいタブで表示する方法

2023年3月21日

HTMLでタブの操作がしたいけどどうやってやるの？
新しいタブでリンクを開くにはどうすればいいの？

初心者の方にとってはHTMLでタブの操作がしたいけど、どうやってやればいいかわからない方も多いのではないでしょうか？そこで今回はHTMLでリンクをクリックしたときに、新しいタブでページを開く方法について解説をしていきます。

HTMLでリンクを作ったとき、よく見るサイトのように、新しいタブでページを開くことが出来ない初心者の方も多いと思います。今回はそのような方に向けて、以下の内容について解説していきます。

この記事では以下の内容で解説します。

HTMLでタブを使う方法について基本からやさしく解説していくのでぜひご覧ください。

「新しいタブで開く」とは

新しいタブで開くという機能は知っていますか？　基本的に現在の主要なブラウザでは、新しいウィンドウではなく新しいタブでページを開くことが出来ます。

新しいタブでページを開くと、前のページに戻りやすくなるので、ブラウザの機能を利用している方も多いのではと思います。この新しいタブで開く機能は、予めHTMLにコードを書いて設定させておくことも出来ます。

新しいタブでリンクを開くためには、そのリンクを用意しておかなければなりません。そのリンクはaタグで作ることが出来ます。こちらのコードをご覧ください。

<html>
  <body>
        <p>ここはリンクになっていません。</p>
        <a href="#"><p>ここはリンクになっています。</p></a>
  </body>
</html>

実行結果

pタグで書いた文章の部分に対して、aタグで囲んでリンクにしています。リンク先は、href属性の「#」の部分を目的のURLにすることで、リンクとして機能させることが出来ます。

詳しいaタグの使い方についてはこちらの記事をご覧ください。

基本的なaタグの使い方がわかったところで、実際に新しいタブで開く方法について解説していきましょう。こちらのコードをご覧ください。

<html>
  <body>
        <p>ここはリンクになっていません。</p>
        <a href="#" target="_blank"><p>ここはリンクになっています。</p></a>
  </body>
</html>

実行結果

実行結果は変わっていないように見えますが、実際にリンクをクリックしてみると、新しいタブで開くことが出来ていると思います。正確には、新しいウィンドウで表示するように設定をしているのですが、ブラウザの機能で新しいタブで開くようになっています。

今回使っているtarget属性では、リンク先をどこで表示させるかを指定することが出来ます。新しいタブでページを開くための基本的な設定はこれだけになります。

この記事ではリンクを新しいタブで開く方法について解説してきました。方法については分かって頂けたでしょうか？

aタグに「target=”_blank”」を追加するだけで簡単に新しいタブで開けるようになりました。ただし、ブラウザによってはタブではなく新しいウィンドウで開いてしまうことにも気をつけましょう。

プログラミング学習中、
誰かへ相談したいことはありませんか？

プログラミングはエラーの連続。作業を進めるなかで誰かに教えてほしい場面は多いですよね。

そんな悩みを解決できるのが、侍テラコヤです。登録無料で始められて、40種類以上のWEBスキルが身につくオリジナル教材があり、回答率100%のQA掲示版で学習に関する悩みを解決します！

気になる方はぜひ詳細をご覧ください。