---
title: "外部リンクをクリック不可にして見せる方法"
description: "レビュー用HTML共有で外部リンクの誤クリックを防ぎたいWeb制作者に向けて、CSSによる操作無効化・JavaScriptによるhref書き換え・target属性の制御という3つの手法と認証付きURL共有を組み合わせた安全な運用を解説する記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/how-to-disable-external-links-method"
markdown: "https://giga-site.com/articles/how-to-disable-external-links-method/index.md"
category: "ハウツー"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 外部リンクをクリック不可にして見せる方法

レビュー用に共有したHTMLページで外部リンクがクリックできる状態だと、レビュアーが別サイトに飛んで戻れなくなったり、未公開の外部ページに誘導されたりするリスクがある。外部リンクをクリック不可にする方法は3通りあり、目的に応じて使い分けられる。

> Source HTML: https://giga-site.com/articles/how-to-disable-external-links-method
> Article index: https://giga-site.com/articles/index.md

## 準備するもの

外部リンクのクリック不可化を行う前に、HTMLファイル内でどのリンクが外部リンク（http://またはhttps://で始まりかつ自分のドメイン以外）で、どのリンクが内部リンク（相対パス・同一ドメイン）かを分類する。内部リンクは生かしたまま外部リンクだけを止めるのが一般的な要件だ。

使用する手法を決めるために「視覚的に無効化をわかりやすくしたいか」を確認する。CSSでpointer-events:noneにすると外観は変わらないためレビュアーが「クリックできない」と気づかない場合がある。無効化したことを視覚的に示したいなら、text-decorationをlinethrough（打ち消し線）にするか、カーソルをnot-allowedに変えるスタイルを追加する。

外部リンクに使うURLパターンを確認しておく。全て絶対URLなのか、一部が相対パスで書かれているのかによって、JavaScriptでの選択条件が変わる。「href属性がhttp://またはhttps://で始まるリンク」というセレクタで通常は対応できるが、//で始まるプロトコル相対URLが混在していないかも合わせて確認する。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 実際の手順

最もシンプルなCSS方法は<style>a[href^='http']{pointer-events:none;cursor:not-allowed;opacity:0.7;}</style>をheadに追加する方法だ。外部リンクがグレーアウトされてカーソルが禁止マークになるため、レビュアーが一目でクリック不可とわかる。ただし内部リンク（相対パス）には適用されないため内部遷移の確認は引き続き可能だ。

JavaScriptを使う方法は、外部リンクのhref属性を「#」に書き換えてクリック時のデフォルト動作を止める。</body>の前に<script>document.querySelectorAll('a[href^="http"]').forEach(a=>{a.dataset.originalHref=a.href;a.setAttribute('href','#');a.addEventListener('click',e=>e.preventDefault());});</script>を追加する。data-original-href属性に元のURLを保存しているため、後で復元することも可能だ。

修正後はローカルで全ての外部リンクをクリックして動作を確認してから、ギガサイト便にアップロードしてURLを発行する。共有メッセージには「外部リンクはレビュー用にクリック不可にしています。内部ページへの遷移は通常通り動作します」と明記して、意図的な仕様と説明する。

## 失敗しやすい点

CSSのpointer-events:noneはタッチデバイスでも有効だが、一部のモバイルブラウザではタップが貫通することがある。モバイルでのレビューが必要な場合はJavaScriptのpreventDefaultと組み合わせて確実に止める。

JavaScriptによるhref書き換えをDOMContentLoadedの前に実行すると、リンクが書き換わる前にユーザーがクリックした場合に外部リンクが開いてしまう。スクリプトは</body>直前に配置するか、DOMContentLoadedイベントのコールバック内で実行するように書く。

外部リンクを全て無効化したつもりが、画像のaタグラップや、SVGアイコン内の<a>要素などを見落とすケースがある。a[href^='http']セレクタはSVG内のアンカーには適用されないブラウザもあるため、SVGを多用しているページでは追加で確認が必要だ。

## テンプレ文面

〇〇ページのレビュー版をお送りします。外部サイトへのリンクはレビュー中の誤遷移防止のためクリック不可にしています。ページ内リンク・同サイト内リンクは通常通りご利用いただけます。ご確認ポイント：①リンクテキストの言い回しが自然か ②リンク色のコントラスト比が十分か。URL：[プレビューURL]

「外部リンクはクリック不可」と伝えつつ「内部リンクは通常通り」と補足することで、レビュアーがページ内遷移を試みるのを妨げない。レビューに必要な操作と無効化している操作を明確に分けて伝えることが、スムーズなフィードバックを得る上で重要だ。

## よくある質問

### 外部リンクを無効化すると内部リンクのナビゲーション確認はできますか？

CSSのa[href^='http']セレクタを使えば相対パスの内部リンクには適用されないため、内部ページ間の遷移確認は通常通り行えます。絶対URLで書かれた内部リンクも除外したい場合はセレクタに自分のドメインを条件に追加します。

### クリック不可の外部リンクをレビュアーが確認したい場合、URLを別途伝える必要はありますか？

JavaScriptのdata-original-href属性に元URLを保存する方法を使えば、開発者ツールで確認できます。ただし非IT職のレビュアーには「このリンクのURLは〇〇です」と別途テキストで伝える方がわかりやすいです。

### 本番公開時に外部リンクの無効化を解除し忘れた場合の影響はありますか？

CSSやJavaScriptで無効化したコードが本番に残ると、実際のユーザーも外部リンクをクリックできなくなります。レビュー用コードには必ずコメントで目印を付けて、本番デプロイ前の差分確認で検出できるようにしてください。

## 関連記事

- [外部リンクをクリック不可にして見せるときの手順と注意点](https://giga-site.com/articles/how-to-disable-external-links-steps-note/index.md)
- [外部リンクをクリック不可にして見せるためのチェックリスト](https://giga-site.com/articles/how-to-disable-external-links-checklist/index.md)
- [フォームを無効化して共有する方法](https://giga-site.com/articles/how-to-disable-form-before-share-method/index.md)
- [レビュー用URLをSlackで配る方法](https://giga-site.com/articles/how-to-slack-distribute-method/index.md)
- [レビュー用URLをTeamsで配る方法](https://giga-site.com/articles/how-to-teams-distribute-method/index.md)
- [メールで期限付きURLを送る方法](https://giga-site.com/articles/how-to-email-expiry-url-method/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "外部リンクをクリック不可にして見せる方法",
  "description": "レビュー用HTML共有で外部リンクの誤クリックを防ぎたいWeb制作者に向けて、CSSによる操作無効化・JavaScriptによるhref書き換え・target属性の制御という3つの手法と認証付きURL共有を組み合わせた安全な運用を解説する記事。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/how-to-disable-external-links-method",
  "url": "https://giga-site.com/articles/how-to-disable-external-links-method",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "外部リンクを無効化すると内部リンクのナビゲーション確認はできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CSSのa[href^='http']セレクタを使えば相対パスの内部リンクには適用されないため、内部ページ間の遷移確認は通常通り行えます。絶対URLで書かれた内部リンクも除外したい場合はセレクタに自分のドメインを条件に追加します。"
      }
    },
    {
      "@type": "Question",
      "name": "クリック不可の外部リンクをレビュアーが確認したい場合、URLを別途伝える必要はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JavaScriptのdata-original-href属性に元URLを保存する方法を使えば、開発者ツールで確認できます。ただし非IT職のレビュアーには「このリンクのURLは〇〇です」と別途テキストで伝える方がわかりやすいです。"
      }
    },
    {
      "@type": "Question",
      "name": "本番公開時に外部リンクの無効化を解除し忘れた場合の影響はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CSSやJavaScriptで無効化したコードが本番に残ると、実際のユーザーも外部リンクをクリックできなくなります。レビュー用コードには必ずコメントで目印を付けて、本番デプロイ前の差分確認で検出できるようにしてください。"
      }
    }
  ]
}
```