【CSS】aタグのリンクを無効化する方法

新規サイトをリリースする際、ページはあるけど、「記事が無いから、メニューをグレーアウトして押せないようにしといて」ということがたまにあります。
このような時、cssでaタグのリンクは残したまま、リンクを無効にする方法です。

「pointer-events: none;」をaタグに指定

クリック・タッチイベントを無効化する「pointer-events」プロパティを使用し、aタグに「pointer-events: none;」を指定します。

HTML

<a href="https://griarts.jp/">LINK</a>

CSS

a{
   pointer-events: none;
}

実装サンプル

「MENU03」を一時的にグレーアウトして、リンクを無効化したい場合、サイト公開後は、HTMLファイルは触らず、cssのみの修正で対応したいので...HTMLにはリンク先を指定、liにcssセレクタを使用して（3番目のliのaタグのリンクを無効化）、以下のように指定をします。

HTML

<ul class="nav">
 <li><a href="#link01">MENU01</a></li>
 <li><a href="#link02">MENU02</a></li>
 <li><a href="#link03">MENU03</a></li>
 <li><a href="#link04">MENU04</a></li>
</ul>

CSS

/*3番目のliのaタグのリンクを無効化*/
.nav li:nth-child(3) a{
 color: #344853;
 pointer-events: none;
}

「MENU03」のページを公開する時は、この指定を丸ごと削除してOKです。