CSSでリンクを無効化！pointer-eventsプロパティの使い方を徹底解説

2024-04-02

CSSのみでリンクを無効にする方法

デザイン上の理由で、特定のリンクをクリックできないようにしたい
まだ準備ができていないページへのリンクを無効化したい
画像やボタンなど、本来リンクではない要素にリンク機能を付与したい

といったケースが考えられます。

CSSのみでリンクを無効にする方法はいくつかありますが、最も一般的な方法は pointer-events プロパティを使用する方法です。

pointer-events プロパティは、要素に対するポインターイベント（マウスやタッチなどの操作）の処理方法を指定します。このプロパティに none 値を指定すると、その要素に対するすべてのポインターイベントが無効になります。

つまり、pointer-events: none; をリンク要素に適用すると、そのリンクをクリックしたり、マウスでホバーしたりすることができなくなります。

例：

<a href="#">無効化されたリンク</a>

a {
  pointer-events: none;
}

このコードを適用すると、「無効化されたリンク」という文字が表示されますが、クリックしても何も起こりません。

pointer-events: none; を適用すると、リンクだけでなく、その要素内の子要素に対するポインターイベントもすべて無効になります。
pointer-events プロパティは、一部の古いブラウザではサポートされていない場合があります。

pointer-events プロパティ以外にも、CSSのみでリンクを無効にする方法はいくつかあります。

href 属性を削除する

a タグの href 属性を削除すると、そのリンクは無効になります。ただし、この方法ではリンクのテキストがただの文字列になってしまうため、視覚的にわかりにくくなります。

cursor プロパティを使用する

cursor プロパティに not-allowed 値を指定すると、マウスカーソルがリンクの上に置かれたとき、「禁止」マークが表示されます。ただし、この方法ではリンクをクリックすることは可能になります。

CSSのみでリンクを無効にする方法はいくつかありますが、最も一般的な方法は pointer-events プロパティを使用する方法です。pointer-events プロパティを使用する際は、子要素に対するポインターイベントも無効になることや、古いブラウザではサポートされていない可能性があることに注意が必要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <h1>無効化されたリンク</h1>
  <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
    <li><a href="#">リンク3</a></li>
  </ul>
  <style>
    a {
      pointer-events: none;
    }
  </style>
</body>
</html>

このコードを実行すると、以下のようになります。

画面に「無効化されたリンク」という見出しと、3つのリンクが表示されます。
リンクをクリックしても、何も起こりません。
マウスカーソルをリンクの上に置いても、カーソルが変化しません。

このコードを参考に、必要に応じてリンクを無効化してください。

以下のコードは、href 属性を削除してリンクを無効にする例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <h1>無効化されたリンク</h1>
  <ul>
    <li><a>リンク1</a></li>
    <li><a>リンク2</a></li>
    <li><a>リンク3</a></li>
  </ul>
</body>
</html>