HTMLのリンクをオフにする一番簡単な方法（CSSに1行書くだけ！）

HTMLでリンクを切る時、aタグのhrefに書いてあるURLを消したり、コメントオフの記号でリンク要素を切り替えていませんか？

aタグはhrefの中のURLを消してもクリックイベントが残ってしまっているため、同ページの最上部に移動してしまいます。

もう一度そこまでスクロールしたりするなんて、利用者から見たらとても面倒くさいです。

リンクを切った時にはクリックもできないようにしておきたいですよね。

そんな時にとっても便利なCSSの機能を今回はご紹介します。

HTMLのリンク要素にクラスを設定しておく

<a href="#" class="link_btn _off">お問い合わせはこちら</a>

こんな感じでテキストリンクや、ボタン形状のリンクがWEBページ上に用意されているとします。

そのリンクに「_off」というclassを付けておきます。

class名はなんでもOKですが、リンクを切っているというのが分かりやすいのがいいと思います。

すでに何かclassがついていることもあると思いますが、そのclassの後ろに半角スペースを入れて新たに追加すればOKです。

ここでは「link_btn」でリンクにデザインを付けています。

その後ろに「_off」を追加しました。

CSSでクラスにプロパティを付ける

._off {
  pointer-events: none;
  background-color: #d3d3d3 !important;
}

これで完成です。

簡単でしょ？

pointer-events: none;というプロパティで、リンクを切っています。

このプロパティを適応しておくと、リンクの上にカーソルを合わせてもカーソルはポインターに変わらず、クリックしても何も起きなくなります。

この1行があればリンクを切ることができるんですね。

とても便利。

ちなみにその下に書いてあるbackground-color: #d3d3d3 !important;はリンクボタンをグレーアウトしている様に見せるために、リンクボタンの背景を薄いグレーに変えています。

テキストリンクなら、colorプロパティで文字の色を変えておくのもいいかもしれませんね。

これにJavaScriptを組み合わせると、指定の日時でリンクを自動オン/オフすることもできるようになります。

チャレンジしてみたい方は、こちらの記事を参考にしてみてください。

コピペで簡単に実装できますよ。

まとめ

pointer-events: none;をCSSに設定するだけで、リンクを切ることができる。

なんと。

説明まで1行で書けてしまった。

とっても簡単なので、いろんなシチュエーションで試してみてください。

それではまた。