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

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

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

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

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

  • 新しいタブで開くとは
  • aタグの使い方
  • target属性を使って新しいタブで開く方法

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

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

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

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


【何から学べばいいかわからない…そんな悩みを解決します!】

完全無料ですぐわかる「プログラミング学習プラン診断」

・適性にあわせて学習プランを診断
・完全無料で気軽に診断できる
・学習の悩みもまるっと解決

さっそく診断してみる

aタグの使い方

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

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

実行結果

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

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

HTMLのaタグとは?基本的な使い方やよく使われる属性を解説
更新日:2023年3月21日

target属性を使って新しいタブで開く方法

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

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

実行結果

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

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


【何から学べばいいかわからない…そんな悩みを解決します!】

完全無料ですぐわかる「プログラミング学習プラン診断」

・適性にあわせて学習プランを診断
・完全無料で気軽に診断できる
・学習の悩みもまるっと解決

さっそく診断してみる

まとめ

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

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

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

SAMURAI TERAKOYA

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

そんな悩みを解決できるのが、侍テラコヤです。登録無料で始められて、現役エンジニアとオンラインで相談できるほか、回答率100%のQA掲示版でプログラミングに関する悩みを解決します!

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

→侍テラコヤの詳細をみる

Writer

侍エンジニア編集部

株式会社SAMURAI

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close