[css]htmlのaタグをクリックできないようにする方法とは？

ホームページのメニューバーなどで、準備中にしたりすることってないですか？

少なからずそういった機会ってありますよね。リンクにせず、文字だけ打っておいて後からリンクにしておくことや、飛んだ先のページを準備中にするなど様々なやり方があるかと思います。またjavascriptなどで無効化する方法もありますが今回は、簡単にcssでaタグを押せなくなる方法をご紹介したいと思います。

pointer-events:noneを使ってaタグを押せなくしてみよう

cssでaタグを押せなくするためには、pointer-eventsを使用します。
pointer-eventsを使用する事で、指定した要素をポインターの対象から除外することができます。そのため、簡易的ではありますが、aタグを押せなくすることが可能です。使用方法は次のようになります。

pointer-events:noneを使用した際のサンプル実装例

<style>
 .disabled{
   pointer-events:none;
 }
 .click_sample a{
   color:#fff;
 }
 .mb30{
   margin-bottom:30px;
 }
</style>
<div class="click_sample">
<div class="mb30"><div class="btn btn-dark"><a href="#">Click Here</a></div></div>
<div class="mb30"><div class="btn btn-dark"><a class="disabled" href="#">Disabled: Click Here　</a></div></div>
</div>

上記のように、pointer-events:noneを指定した要素に関しては、マウスで押すことができず、上記の何も割り当てていないaタグはページ上部に戻るような動作を行うかと思います。

まとめ

今回は、cssのpointer-events:noneを使用して簡易的にaタグを押せなくする方法をご紹介させていただきました。準備中にしたりする際に有効活用していただければ幸いです。