HTMLでリンクを別ウィンドウ（新しいタブ）で開く方法｜target=”_blank”の使い方

html

Webサイトを作るとき、「外部サイトやPDFを自分のページから開くときに、新しいタブで表示させたい」と思ったことはありませんか？

実はHTMLではとても簡単で、リンク（<a>タグ）にtarget="_blank"を指定するだけです。

しかし、ただ新しいタブで開くだけでなく、セキュリティやユーザビリティ、SEOの観点から注意すべき点もあります。

この記事では、リンクを別ウィンドウで開く基本的な書き方から、セキュリティ対策、実際の使用場面、さらにアクセシビリティを考慮した実装方法まで、初心者向けにわかりやすく解説します。

スポンサーリンク

target属性の基本知識

target属性とは

target属性は、リンクをクリックしたときに、どこでそのページを開くかを指定するHTML属性です。主に以下の値が使用されます：

主要なtarget値

  • _self：同じウィンドウ・タブで開く（デフォルト）
  • _blank：新しいウィンドウ・タブで開く
  • _parent：親フレームで開く
  • _top：最上位ウィンドウで開く
  • フレーム名：指定したフレームで開く

基本的な書き方

通常のリンク（同じタブで開く）

<a href="https://example.com">同じタブで開くリンク</a>

この場合、リンクをクリックすると現在のページが新しいページに置き換わります。

新しいタブで開くリンク

<a href="https://example.com" target="_blank">新しいタブで開くリンク</a>

target="_blank"を追加することで、リンクをクリックしたときに新しいタブが開くようになります。

target=”_blank”を使うべき場面

外部サイトへのリンク

<!-- SNSへのリンク -->
<a href="https://twitter.com/your_account" target="_blank">Twitterをフォロー</a>

<!-- 参考サイトへのリンク -->
<a href="https://developer.mozilla.org/ja/" target="_blank">MDN Web Docs</a>

<!-- パートナーサイトへのリンク -->
<a href="https://partner-site.com" target="_blank">パートナーサイト</a>

ファイルのダウンロード・表示

<!-- PDFファイル -->
<a href="document.pdf" target="_blank">カタログを見る（PDF）</a>

<!-- 画像ファイル -->
<a href="large-image.jpg" target="_blank">画像を拡大表示</a>

<!-- Excelファイル -->
<a href="data.xlsx" target="_blank">データをダウンロード</a>

別のサブドメインやサービス

<!-- ショッピングサイト -->
<a href="https://shop.yoursite.com" target="_blank">オンラインショップ</a>

<!-- サポートサイト -->
<a href="https://support.yoursite.com" target="_blank">サポートページ</a>

<!-- ブログサイト -->
<a href="https://blog.yoursite.com" target="_blank">ブログを読む</a>

セキュリティ対策：rel属性の重要性

なぜセキュリティ対策が必要？

target="_blank"を使用すると、新しく開いたページが元のページのwindow.openerプロパティにアクセスできてしまいます。これにより、悪意のあるサイトが元のページを操作する可能性があります。

具体的なリスク

Tabnabbing攻撃

// 悪意のあるサイトでの例（実際には使わないでください）
window.opener.location = 'https://fake-site.com';

新しく開いたページが、元のページを偽サイトにリダイレクトしてしまう攻撃です。

rel=”noopener”による対策

基本的なセキュリティ対策

<a href="https://external-site.com" target="_blank" rel="noopener">
  安全な外部リンク
</a>

rel="noopener"を追加することで：

  • 新しいページからwindow.openerへのアクセスを防止
  • セキュリティリスクを大幅に軽減
  • パフォーマンスの向上（別プロセスで実行される）

より完全なセキュリティ対策

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  より安全な外部リンク
</a>

rel属性の値の説明

  • noopener：window.openerへのアクセスを無効化
  • noreferrer：リファラー情報の送信を無効化
  • nofollow：検索エンジンにリンクをたどらせない

実用的な組み合わせ例

<!-- 通常の外部リンク -->
<a href="https://partner-site.com" target="_blank" rel="noopener">
  パートナーサイト
</a>

<!-- SEOを考慮しない外部リンク -->
<a href="https://advertisement.com" target="_blank" rel="noopener nofollow">
  広告サイト
</a>

<!-- 完全に匿名化したいリンク -->
<a href="https://external-service.com" target="_blank" rel="noopener noreferrer nofollow">
  外部サービス
</a>

ブラウザの対応状況と互換性

現代ブラウザでの自動対策

最新ブラウザの自動保護 現代的なブラウザ（Chrome 88+、Firefox 79+、Safari 12.2+など）では、target="_blank"を使用すると自動的にrel="noopener"が適用されます。

<!-- 最新ブラウザでは自動的にnoopenerが適用される -->
<a href="https://example.com" target="_blank">外部サイト</a>

<!-- 明示的に書く方が安全で推奨 -->
<a href="https://example.com" target="_blank" rel="noopener">外部サイト</a>

古いブラウザへの対応

Internet Explorer対応

<!-- IE11以下でも安全に動作 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  古いブラウザでも安全なリンク
</a>

JavaScriptによる補完

<script>
// 古いブラウザでのrel="noopener"対応
document.addEventListener('DOMContentLoaded', function() {
    var links = document.querySelectorAll('a[target="_blank"]');
    links.forEach(function(link) {
        if (!link.rel.includes('noopener')) {
            link.rel += ' noopener';
        }
    });
});
</script>

ユーザビリティとアクセシビリティ

ユーザーへの配慮

新しいタブで開くことを明示

<!-- アイコンで表示 -->
<a href="https://example.com" target="_blank" rel="noopener">
  外部サイト <span aria-label="新しいタブで開く">?</span>
</a>

<!-- テキストで明示 -->
<a href="https://example.com" target="_blank" rel="noopener">
  外部サイト（新しいタブで開きます）
</a>

<!-- CSSでアイコン追加 -->
<style>
.external-link::after {
    content: " ↗";
    font-size: 0.8em;
    color: #666;
}
</style>
<a href="https://example.com" target="_blank" rel="noopener" class="external-link">
  外部サイト
</a>

スクリーンリーダー対応

<a href="https://example.com" 
   target="_blank" 
   rel="noopener"
   aria-label="外部サイト（新しいタブで開きます）">
  外部サイト
</a>

<!-- より詳細な説明 -->
<a href="document.pdf" 
   target="_blank" 
   rel="noopener"
   aria-describedby="pdf-description">
  製品カタログ
</a>
<span id="pdf-description" class="sr-only">
  PDFファイル、新しいタブで開きます
</span>

CSSでの視覚的表現

外部リンクの装飾

/* 外部リンクのスタイル */
a[target="_blank"] {
    position: relative;
    padding-right: 18px;
}

a[target="_blank"]::after {
    content: "↗";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8em;
    color: #666;
    line-height: inherit;
}

/* ホバー時のエフェクト */
a[target="_blank"]:hover::after {
    color: #007bff;
}

より洗練されたデザイン

.external-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #007bff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.external-link:hover {
    border-bottom-color: #007bff;
}

.external-link::after {
    content: "?";
    font-size: 0.9em;
    opacity: 0.7;
}

実際の使用例とベストプラクティス

企業サイトでの実装例

フッターリンク

<footer>
    <div class="footer-links">
        <h3>関連サイト</h3>
        <ul>
            <li>
                <a href="https://company-blog.com" target="_blank" rel="noopener">
                  企業ブログ
                </a>
            </li>
            <li>
                <a href="https://support.company.com" target="_blank" rel="noopener">
                  サポートサイト
                </a>
            </li>
            <li>
                <a href="https://careers.company.com" target="_blank" rel="noopener">
                  採用情報
                </a>
            </li>
        </ul>
        
        <h3>SNS</h3>
        <div class="social-links">
            <a href="https://twitter.com/company" 
               target="_blank" 
               rel="noopener"
               aria-label="Twitterアカウント（新しいタブで開く）">
                <img src="twitter-icon.svg" alt="Twitter">
            </a>
            <a href="https://facebook.com/company" 
               target="_blank" 
               rel="noopener"
               aria-label="Facebookページ（新しいタブで開く）">
                <img src="facebook-icon.svg" alt="Facebook">
            </a>
        </div>
    </div>
</footer>

記事内の参考リンク

<article>
    <h1>Webデザインの基礎</h1>
    <p>
        Webデザインを学ぶには、まず
        <a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener">
          MDN Web Docs
        </a>
        で基礎知識を身につけることをおすすめします。
    </p>
    
    <p>
        デザインツールとしては
        <a href="https://www.figma.com" target="_blank" rel="noopener">
          Figma
        </a>
        や
        <a href="https://www.adobe.com/jp/products/xd.html" target="_blank" rel="noopener">
          Adobe XD
        </a>
        が人気です。
    </p>
</article>

eコマースサイトでの実装

商品詳細ページ

<div class="product-info">
    <h2>商品名</h2>
    <div class="product-links">
        <a href="manual.pdf" 
           target="_blank" 
           rel="noopener"
           class="download-link">
            取扱説明書（PDF）
        </a>
        
        <a href="https://manufacturer.com/product123" 
           target="_blank" 
           rel="noopener"
           class="external-link">
            メーカー公式ページ
        </a>
        
        <a href="https://support.manufacturer.com" 
           target="_blank" 
           rel="noopener"
           class="external-link">
            メーカーサポート
        </a>
    </div>
</div>

ブログ・メディアサイトでの実装

記事内リンク

<article class="blog-post">
    <h1>今週のWeb技術ニュース</h1>
    
    <section>
        <h2>JavaScript関連</h2>
        <ul>
            <li>
                <a href="https://blog.nodejs.org/latest-release" 
                   target="_blank" 
                   rel="noopener nofollow">
                    Node.js最新版リリース
                </a>
                - パフォーマンス向上とセキュリティ修正
            </li>
            <li>
                <a href="https://react.dev/blog/new-features" 
                   target="_blank" 
                   rel="noopener">
                    React新機能発表
                </a>
                - 開発効率がさらに向上
            </li>
        </ul>
    </section>
    
    <aside class="related-links">
        <h3>参考資料</h3>
        <p>
            詳細な技術仕様については
            <a href="technical-specs.pdf" 
               target="_blank" 
               rel="noopener"
               aria-describedby="pdf-note">
                技術仕様書
            </a>
            をご確認ください。
        </p>
        <small id="pdf-note">※PDFファイルが新しいタブで開きます</small>
    </aside>
</article>

SEOへの影響と考慮事項

検索エンジンとの関係

リンクジュースの流れ

<!-- 内部リンク：SEO効果を維持 -->
<a href="/related-page.html">関連ページ</a>

<!-- 外部リンク：適切な評価を渡す -->
<a href="https://authoritative-site.com" target="_blank" rel="noopener">
  権威あるサイト
</a>

<!-- 広告リンク：SEO効果を渡さない -->
<a href="https://ad-site.com" target="_blank" rel="noopener nofollow">
  広告サイト
</a>

nofollowの使い分け

<!-- 信頼できるサイト：nofollowなし -->
<a href="https://wikipedia.org/article" target="_blank" rel="noopener">
  Wikipedia記事
</a>

<!-- 商用・広告リンク：nofollowあり -->
<a href="https://affiliate-link.com" target="_blank" rel="noopener nofollow">
  アフィリエイトリンク
</a>

<!-- ユーザー生成コンテンツ：nofollowあり -->
<a href="https://user-submitted-link.com" target="_blank" rel="noopener nofollow">
  ユーザー投稿リンク
</a>

Googleの推奨事項

適切なリンク構造

<!-- 推奨：明確で説明的なアンカーテキスト -->
<a href="https://web-accessibility-guide.com" target="_blank" rel="noopener">
  Webアクセシビリティガイドライン
</a>

<!-- 非推奨：意味のないアンカーテキスト -->
<a href="https://web-accessibility-guide.com" target="_blank" rel="noopener">
  こちら
</a>

JavaScriptでの動的制御

条件に応じた動的な実装

リンクタイプの自動判定

document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a[href]');
    
    links.forEach(link => {
        const href = link.getAttribute('href');
        
        // 外部リンクの判定
        if (href.startsWith('http') && !href.includes(location.hostname)) {
            link.setAttribute('target', '_blank');
            link.setAttribute('rel', 'noopener');
            
            // 視覚的インジケーターを追加
            if (!link.querySelector('.external-icon')) {
                const icon = document.createElement('span');
                icon.className = 'external-icon';
                icon.textContent = ' ↗';
                icon.setAttribute('aria-hidden', 'true');
                link.appendChild(icon);
            }
        }
        
        // PDFファイルの判定
        if (href.endsWith('.pdf')) {
            link.setAttribute('target', '_blank');
            link.setAttribute('rel', 'noopener');
            
            // PDF用のアイコンを追加
            if (!link.querySelector('.pdf-icon')) {
                const icon = document.createElement('span');
                icon.className = 'pdf-icon';
                icon.textContent = ' ?';
                icon.setAttribute('aria-label', 'PDFファイル');
                link.appendChild(icon);
            }
        }
    });
});

ユーザー設定に基づく制御

// ユーザーの設定を確認
function shouldOpenInNewTab(url) {
    const userPreference = localStorage.getItem('openLinksInNewTab');
    const isExternal = !url.includes(location.hostname);
    
    // 外部リンクは常に新しいタブ、内部リンクは設定に従う
    return isExternal || userPreference === 'true';
}

// リンククリック時の処理
document.addEventListener('click', function(event) {
    const link = event.target.closest('a[href]');
    if (!link) return;
    
    const href = link.getAttribute('href');
    if (shouldOpenInNewTab(href)) {
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener');
    }
});

パフォーマンスの最適化

preloadとprefetchの活用

重要なリソースの事前読み込み

<!-- 重要な外部リソースの事前読み込み -->
<head>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto" as="style">
    <link rel="prefetch" href="https://api.external-service.com/data.json">
</head>

<body>
    <!-- 事前読み込みしたリソースを使用 -->
    <a href="https://external-service.com/full-app" 
       target="_blank" 
       rel="noopener prefetch">
        外部アプリケーション
    </a>
</body>

Core Web Vitalsへの配慮

レイアウトシフトの防止

/* 外部リンクアイコンによるレイアウトシフトを防止 */
.external-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.2em; /* アイコン分の高さを確保 */
}

.external-link::after {
    content: "↗";
    width: 1em;
    text-align: center;
    flex-shrink: 0; /* アイコンのサイズ固定 */
}

トラブルシューティング

よくある問題と解決方法

新しいタブで開かない場合

問題：target=”_blank”が効かない

<!-- 問題のあるコード例 -->
<a href="javascript:void(0)" onclick="openNewWindow()" target="_blank">
  リンク
</a>

<!-- 解決方法 -->
<a href="https://example.com" target="_blank" rel="noopener">
  リンク
</a>

<script>
function openNewWindow() {
    window.open('https://example.com', '_blank', 'noopener');
}
</script>

セキュリティエラーの対処

問題：Mixed Content エラー

<!-- 問題：HTTPSサイトからHTTPリンク -->
<a href="http://insecure-site.com" target="_blank" rel="noopener">
  非セキュアサイト
</a>

<!-- 解決方法：プロトコル相対URLまたはHTTPS使用 -->
<a href="https://secure-site.com" target="_blank" rel="noopener">
  セキュアサイト
</a>

古いブラウザでの問題

IE11での noopener 非対応

// IE11対応のポリフィル
(function() {
    if (!window.open.prototype.hasOwnProperty('noopener')) {
        const originalOpen = window.open;
        window.open = function(url, target, features) {
            if (target === '_blank' && features && features.includes('noopener')) {
                const newWindow = originalOpen.call(this, url, target, features);
                if (newWindow) {
                    newWindow.opener = null;
                }
                return newWindow;
            }
            return originalOpen.apply(this, arguments);
        };
    }
})();

まとめ

HTMLでリンクを別ウィンドウ（新しいタブ）で開く方法について、基本から応用まで詳しく解説しました。重要なポイントをまとめると：

基本的な実装

必須の属性

  • target="_blank"：新しいタブで開く
  • rel="noopener"：セキュリティ対策
  • 必要に応じてrel="noreferrer nofollow"も追加

推奨されるコード

<a href="https://external-site.com" target="_blank" rel="noopener">
  外部サイトリンク
</a>

セキュリティとユーザビリティ

セキュリティ対策

  1. rel="noopener"でTabnabbing攻撃を防止
  2. 信頼できないサイトにはnofollowを追加
  3. 最新ブラウザでは自動的に保護される

ユーザビリティ向上

  1. 新しいタブで開くことを視覚的に表示
  2. スクリーンリーダー対応のaria属性
  3. 適切なアンカーテキストの使用

使用すべき場面

適切な使用場面

  • 外部サイトへのリンク
  • PDFやファイルのダウンロード
  • SNSや別サービスへのリンク
  • 参考資料や補足情報

避けるべき場面

  • 同一サイト内のナビゲーション
  • 主要なユーザーフロー内
  • モバイルでの頻繁な使用

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました