HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでリンクを新しいタブで開く方法｜target="_blank"の使い方を解説

ユーザーを外部のウェブページへ誘導したい場合、何も設定しない状態では、リンク先のページが同じタブ内で開きます。外部リンクを新しいタブで開くようにすれば、ユーザーは元のページに簡単に戻ることができ、自サイトからの離脱を防ぎやすくなります。この記事では、HTMLでリンクを新しいタブで開く具体的な方法を解説します。

基本の構文

<a href="https://placekitten.com/1000/1000" target="_blank" rel="noopener noreferrer">クリックして猫の画像を見る！</a>

この機能の実装はとてもシンプルです。<a>タグにtarget属性を追加し、値として_blankを指定するだけです。これにより、リンク先はブラウザの設定に応じて、新しいタブまたは新しいウィンドウで開かれます。

あわせて指定しているrel属性のnoreferrerとnoopenerには、それぞれ異なる役割があります。

  • noreferrer： リファラー（アクセス元）の情報をリンク先に渡さないようにします。SEOやアクセス解析上は、ユーザーがどこから来たのかが記録されず、「ダイレクトアクセス」として表示されます。
  • noopener： 悪意のあるHTMLドキュメントがwindow.opener経由で元のページにアクセスし、不正な操作を行うことを防ぎます。

コード全体の例

以下は、実際のHTMLファイル全体のコード例です。

<html>
<head>
 
 <link href="./style.css" type="text/css" rel="stylesheet" />
 
</head>
 <body>
   <a href="https://placekitten.com/1000/1000" target="_blank" rel="noopener noreferrer">リンクをクリックして猫を見てみましょう！</a>
 </body>
</html>

補足：セキュリティに関する注意点

近年の主要ブラウザでは、target="_blank"を指定したリンクに対してnoopenerと同等の挙動が暗黙的に適用されるようになっています。ただし、古いブラウザへの対応やコードの明示性を考慮すると、rel="noopener noreferrer"を併せて記述しておくのが安全です。外部サイトへのリンクを設置する際は、この書き方を習慣にしておきましょう。

  1. Google検索結果を自動的に新しいタブで開く設定方法

    Google検索を使えば、ほとんどあらゆる情報を見つけることができます。しかし、情報量が多すぎて、かえって混乱してしまうこともあります。検索結果のリンクを開き、そこからさらに別のリンクをたどり、また次のページへ…と進んでいくうちに、最初に何を調べていたのか分からなくなってしまった経験はありませんか。 そんな「迷子」を防ぐために便利なのが、検索結果のリンクをクリックしたときに、自動的に新しいタブで開くように設定する方法です。この記事では、その設定手順をわかりやすく解説します。 Google設定でリンクを常に新規タブで開く方法 まず、お使いのブラウザでGoogleのトップページにアクセスします

  2. Chromeの新しいタブページをカスタマイズする方法|背景画像・ショートカットの変更手順

    Google Chromeブラウザの最新バージョンでは、ユーザーインターフェースにいくつかの変更が加えられました。角丸になったタブ、HTTPSサイトの「保護された通信」表示が鍵アイコンに置き換えられた点、そして新しいタブページのデザイン刷新などが主な変更点です。しかし、デフォルト設定のままでは、新しいタブページは少し物足りなく感じるかもしれません。Chrome 69では、拡張機能を使わずにこのページをカスタマイズできるようになりました。新しいタブページで最初に気づくのは、リンクショートカットのデザイン変更です。以前は8つのサイトがウェブサイトのスクリーンショット付きで表示されていましたが、現在