CSSでリンクをクリックできないようにするにはどうすればいいですか？

ウェブサイトを作成していると、リンクをクリックできないようにしたい場合があります。例えば、 * まだコンテンツが準備できていないページへのリンクを一時的に無効化したい場合。 * ユーザーがある条件を満たすまで、特定のリンクへのアクセスを制限したい場合。 * デザイン上の都合で、リンクに見せかけただけの要素を表示したい場合。などです。このような場合、CSSの `pointer-events` プロパティを使うことで、リンクをクリックできないようにすることができます。

pointer-events: none; の使い方

`pointer-events: none;` を指定した要素は、マウスイベントが無効になります。つまり、クリックやホバーなどの操作を受け付けなくなります。リンクに `pointer-events: none;` を指定すると、リンクはクリックできなくなり、ページ遷移も発生しなくなります。

<a href="#" style="pointer-events: none;">クリックできないリンク</a>

上記のように記述すると、「クリックできないリンク」というテキストはリンクとして表示されますが、クリックしても何も起こりません。

注意点

`pointer-events: none;` は、あくまでマウスイベントを無効化するだけで、リンクそのものを無効化するわけではありません。そのため、JavaScriptなど他の方法でリンクが実行される可能性は残ります。リンクを完全に無効化したい場合は、JavaScriptなどを併用して、リンクへのアクセスを制御する必要があります。

代替手段

`pointer-events: none;` 以外にも、リンクをクリックできないようにする方法があります。

方法	説明
JavaScriptで無効化	JavaScriptを使って、リンクのクリックイベントを無効化します。
href属性に"javascript:void(0);"を設定	href属性に"javascript:void(0);"を設定することで、リンクをクリックしても何も起こらないようにします。
disabled属性を追加 (ボタンの場合)	リンクがボタン要素の場合は、disabled属性を追加することでクリックできないようにできます。

JavaScriptで無効化

JavaScriptでリンクのクリックイベントを無効化する方法は以下のとおりです。

<a href="#" id="my-link">クリックできないリンク</a>
<script>
document.getElementById("my-link").addEventListener("click", function(event) {
  event.preventDefault();
});
</script>

href属性に"javascript:void(0);"を設定

href属性に"javascript:void(0);"を設定する方法も、リンクをクリックしても何も起こらないようにする効果があります。

<a href="javascript:void(0);">クリックできないリンク</a>

disabled属性を追加 (ボタンの場合)

リンクがボタン要素の場合は、disabled属性を追加することでクリックできないようにできます。

<button type="button" disabled>クリックできないボタン</button>

参考資料

* [MDN Web Docs: pointer-events](https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events) ## よくある質問 ### Q1: `pointer-events: none;` を指定しても、リンクがクリックできてしまいます。 **A1:** `pointer-events: none;` は、あくまでマウスイベントを無効化するだけで、リンクそのものを無効化するわけではありません。JavaScriptなど他の方法でリンクが実行されている可能性があります。リンクを完全に無効化したい場合は、JavaScriptなどを併用して、リンクへのアクセスを制御する必要があります。 ### Q2: `pointer-events: none;` を指定した要素の子要素もクリックできなくなってしまいました。 **A2:** `pointer-events: none;` は、指定した要素とその子孫要素すべてに影響します。子要素をクリックできるようにしたい場合は、子要素に `pointer-events: auto;` を指定します。 ### Q3: `pointer-events: none;` を解除するにはどうすればよいですか？ **A3:** `pointer-events: none;` を解除するには、 `pointer-events: auto;` を指定します。

その他の参考記事:jquery id 取得