CSSでリンクを無効にする

CSSでリンクを無効にするコードを紹介します。

概要

HTMLのページではAタグでリンクが表示されてる状況で、CSSでリンクを無効にしたい場合があります。
CSSでリンクを無効にするには pointer-events プロパティを利用します。

書式

リンクを無効にしたい場合は、pointer-events プロパティにnoneを指定します。

pointer-events:none;

例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .InvalidLink{
      pointer-events:none;
    }
  </style>
</head>
<body>
  <p>Pointer-Eventsのデモです。</p>

  <div><a href="http://www.ipentec.com">iPentec.comへのリンクです。</a></div>

  <div><a href="http://www.ipentec.com" class="InvalidLink">iPentec.comへのリンクです。</a></div>

</body>
</html>

解説

<a>タグによる2つのリンクを表示します。一方のリンクはクラスに"InvalidLink"を指定しています。InvalidLinkクラスはHTMLのhead部のCSS定義でpointer-events:none;を指定しています。この記述により、下側のInvalidLinkクラスが設定されているリンクは動作が無効になります。