読み込み中...

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

HTMLで別タブで開く方法を解説するイメージ HTML
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLでリンク先を別タブで開く方法が簡単に理解できるようになります。

初心者でも使える6つの方法やサンプルコード、注意点、カスタマイズ方法、さらに応用例まで徹底的に解説していくので、ぜひ最後までお付き合いください。

●別タブで開く基本概念

HTMLでリンクを作成する際、通常は同じタブで開かれますが、場合によっては別タブで開く方が便利なこともあります。

この記事では、別タブで開く方法を紹介します。

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

HTMLの基本的な方法は、<a>タグのtarget属性を使う方法です。

target属性に”_blank”を指定することで、リンク先が別タブで開かれます。

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

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

JavaScriptを使っても、リンク先を別タブで開くことができます。

下記のように、onclick属性にJavaScriptのコードを記述しましょう。

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

○サンプルコード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>

●カスタマイズ方法

別タブで開くリンクの見た目をカスタマイズする場合は、CSSを利用しましょう。

例えば、下記のように、リンクの色を変更することができます。

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

○応用例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>

まとめ

この記事では、HTMLでリンク先を別タブで開く方法を初心者にもわかりやすく解説しました。

基本的なtarget属性を使った方法やJavaScript、jQueryを使った方法、さらに応用例や注意点、カスタマイズ方法まで詳しく説明しました。

これらの方法を参考にして、適切な場面で別タブで開くリンクを活用してみてください。

ユーザビリティを考慮した適切な設定が、ウェブサイトの利用者にとって快適な体験を提供することにつながります。