【CSSだけでリンクを無効化！】pointer-events: noneの使い方と注意点

Web制作で「このリンク、一時的に無効にしたい…でもHTMLをいじるのは避けたい！」
そんなときに便利なのが、CSSプロパティの pointer-events: none; です。

この記事では、リンク（<a>タグ）を無効化する方法として、pointer-events: none; の使い方・応用・注意点をわかりやすく解説します。

pointer-events: noneとは？

pointer-events は、マウスイベント（クリックなど）をどう扱うかを指定できるCSSプロパティです。

a.disable {
  pointer-events: none;
}

上記のように指定すると、その要素はクリックできなくなり、hoverやclickイベントも無視されます。

aタグを無効化する基本の使い方

<a href="https://example.com" class="disable">リンク</a>

.disable {
  pointer-events: none;
  color: gray; /* 無効っぽく見せるための装飾 */
  text-decoration: none;
}

これで、リンクのクリックやタップが完全に無効になります。JavaScript不要で簡単に「リンク無効」が実現できます。

使いどころ・よくあるシーン

• フォーム送信中：二重送信防止のため、一時的にリンクを無効にしたいとき
• 会員限定機能など：未ログイン状態ではリンクを無効化
• 今後対応予定のコンテンツ：見た目だけ表示してクリック無効にしたいとき

pointer-events: autoで再有効化も可能！

a.disable {
  pointer-events: none;
}

a.active {
  pointer-events: auto;
}

JavaScriptでクラスを切り替えることで、クリック可・不可の状態をコントロールできます。

注意点

視覚的に「無効」だとわかる工夫が必要

pointer-events: noneはあくまでマウスイベントを無効にするだけなので、リンクの見た目自体はそのままです。

a.disable {
  color: #999;
  cursor: default;
  text-decoration: none;
}

→ 見た目を変えて「無効ですよ」と伝えるのが親切！

❌ SEO的には無効化されていない

href属性が存在する限り、クローラーはリンクとして認識します。
「Googleにリンクとして見せたくない」という目的には向きません。
この場合はHTML側でhref="#"にする、または<span>などの別タグで代用しましょう。

まとめ

CSSだけでリンクを無効にしたいときは、pointer-events: none; を覚えておくと非常に便利です。
JavaScriptを使わずに実装できるので、ちょっとしたUI調整にもおすすめですよ！