新規サイトをリリースする際、ページはあるけど、「記事が無いから、メニューをグレーアウトして押せないようにしといて」ということがたまにあります。
このような時、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です。
