狼読

 
2020/06/15

[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タグを押せなくする方法をご紹介させていただきました。準備中にしたりする際に有効活用していただければ幸いです。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読