新しいタブでリンクを開くにはどうすればいいの？
初心者の方にとっては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タグの使い方についてはこちらの記事をご覧ください。
target属性を使って新しいタブで開く方法
基本的なaタグの使い方がわかったところで、実際に新しいタブで開く方法について解説していきましょう。こちらのコードをご覧ください。
<html>
<body>
<p>ここはリンクになっていません。</p>
<a href="#" target="_blank"><p>ここはリンクになっています。</p></a>
</body>
</html>
実行結果
実行結果は変わっていないように見えますが、実際にリンクをクリックしてみると、新しいタブで開くことが出来ていると思います。正確には、新しいウィンドウで表示するように設定をしているのですが、ブラウザの機能で新しいタブで開くようになっています。
今回使っているtarget属性では、リンク先をどこで表示させるかを指定することが出来ます。新しいタブでページを開くための基本的な設定はこれだけになります。
【何から学べばいいかわからない…そんな悩みを解決します！】
完全無料ですぐわかる「プログラミング学習プラン診断」
・適性にあわせて学習プランを診断
・完全無料で気軽に診断できる
・学習の悩みもまるっと解決
まとめ
この記事ではリンクを新しいタブで開く方法について解説してきました。方法については分かって頂けたでしょうか？
aタグに「target="_blank"」を追加するだけで簡単に新しいタブで開けるようになりました。ただし、ブラウザによってはタブではなく新しいウィンドウで開いてしまうことにも気をつけましょう。
