初心者も簡単！HTMLで別タブで開く方法6選

はじめに

この記事を読めば、HTMLでリンク先を別タブで開く方法が簡単に理解できるようになります。初心者でも使える3つの基本方法とサンプルコード、さらに応用例やカスタマイズ方法まで徹底的に解説していくので、ぜひ最後までお付き合いください。

●別タブで開く基本概念

HTMLでリンクを作成する際、通常は同じタブで開かれますが、場合によっては別タブで開く方が便利なケースがあります。例えば、外部サイトへのリンクでユーザーに元のページに戻ってもらいたい場合や、参考資料を別タブで表示したい場合などです。この記事では、別タブで開く3つの基本的な方法を紹介します。

○サンプルコード1：target属性を使った方法

HTMLの最も基本的な方法は、<a>タグのtarget属性を使う方法です。target属性に"_blank"を指定することで、リンク先が別タブで開かれます。

<a href="https://example.com" target="_blank">リンクテキスト</a>

この方法は最もシンプルで、HTMLの知識があれば誰でも簡単に実装できるでしょう。

○サンプルコード2：JavaScriptを使った方法

JavaScriptを使っても、リンク先を別タブで開くことが可能です。下記のように、onclick属性にJavaScriptのコードを記述しましょう。

<a href="https://example.com" onclick="window.open(this.href, '_blank'); return false;">リンクテキスト</a>

この方法では、window.open()メソッドを使用してプログラム的に新しいタブを開きます。return false;により、通常のリンク動作をキャンセルしています。

○サンプルコード3：jQueryを使った方法

jQueryを利用しても別タブでリンクを開くことができます。まずは、jQueryのライブラリを読み込んでおきましょう。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

次に、下記のようなコードを記述して、リンクにクラス名を追加します。

<a href="https://example.com" class="open-in-new-tab">リンクテキスト</a>

最後に、下記のjQueryのコードを追加して、クラス名が"open-in-new-tab"のリンクが別タブで開かれるように設定します。

<script>
  $(document).ready(function() {
    $('.open-in-new-tab').click(function(e) {
      e.preventDefault();
      window.open($(this).attr('href'), '_blank');
    });
  });
</script>

この方法では、特定のクラスを持つ全てのリンクに対して一括で別タブ動作を適用できるため、複数のリンクを管理する際に便利です。

○応用例1：ボタンで別タブで開く

ボタンをクリックしてリンク先を別タブで開くには、下記のようにコードを記述します。

<button onclick="window.open('https://example.com', '_blank')">ボタンテキスト</button>

ボタン要素を使用することで、通常のリンクとは異なる見た目を実現できるでしょう。

○応用例2：ナビゲーションメニューで別タブで開く

ナビゲーションメニューのリンクを別タブで開くように設定する場合は、下記のようにコードを記述します。

<nav>
  <ul>
    <li><a href="https://example1.com" target="_blank">リンク1</a></li>
    <li><a href="https://example2.com" target="_blank">リンク2</a></li>
    <li><a href="https://example3.com" target="_blank">リンク3</a></li>
  </ul>
</nav>

ナビゲーションメニューでは、外部サイトへのリンクのみを別タブで開き、内部ページは同じタブで開くという使い分けが一般的です。

○応用例3：画像をクリックして別タブで開く

画像をクリックするとリンク先を別タブで開くように設定する場合は、下記のようにコードを記述します。

<a href="https://example.com" target="_blank">
  <img src="image.jpg" alt="画像の説明">
</a>

画像リンクでも通常のテキストリンクと同様にtarget属性を使用できます。画像のalt属性も適切に設定しておくことが重要ですね。

●カスタマイズ方法

別タブで開くリンクの見た目をカスタマイズする場合は、CSSを利用しましょう。例えば、下記のように、リンクの色を変更することができます。

a.open-in-new-tab {
  color: red;
}

また、別タブで開くリンクであることをユーザーに分かりやすく示すため、アイコンを追加することも可能です。

a[target="_blank"]::after {
  content: " 🔗";
  font-size: 0.8em;
}

このCSSコードにより、target="_blank"が設定されたリンクの後にリンクアイコンが自動的に表示されるでしょう。

まとめ

この記事では、HTMLでリンク先を別タブで開く方法を初心者にもわかりやすく解説しました。基本的なtarget属性を使った方法やJavaScript、jQueryを使った方法、さらに応用例やカスタマイズ方法まで詳しく説明しています。

これらの方法を参考にして、適切な場面で別タブで開くリンクを活用してみてください。ユーザビリティを考慮した適切な設定が、ウェブサイトの利用者にとって快適な体験を提供することにつながります。