CSSだけでリンクを無効にしてみた

2023年1月10日

ホームページが一般的になって最も有効に使われたタグがあります。
それは「リンクタグ」です。

他のページへジャンプするだけの機能ですが、webという構造の根幹をなしているといえます。

ただ、今回リンクの有効／無効を切り返したい事象がありました。
それは「電話番号のリンク」です。

電話番号リンクはスマホで表示した際にタップすると、直電することができます。
ただ、PCで表示している場合は電話できません。

つまり、PCの時はリンクを無効にして、スマホの時はリンクを有効にしたいのです。

今までは表示／非表示切り替えでやっていました

いままでは、リンクありとリンクなしの2種類のコーディングを用意して、PCとスマホ表示時に「表示／非表示切り替え」をすることで実現していました。

これはこれでそれなりに動作します。
ただ、もっとスマートな方法がないものかと思いました。

ググって調べたら、最適解な方法がありました。

CSS1行追加するだけでリンクを無効にできました

まずは実際にできたものをご覧ください。

上のリンクは通常通りですが、下のリンクはクリックしても反応しません。
CSSでリンクを無効にしています。

具体的には次のように記述しています。

具体的には下のリンクには次のようなCSSを記述しています。

たった1行追加するだけでリンクが無効になりました。
あとはレスポンシブ記述に合わせて、リンクの有効・無効をスイッチすれば切り替えができるようになります。

ただ、ここで疑問がわきます。
pointer-events ってなに？

pointer-eventsとは

ググるといっぱい出てきました。
簡単にいうと、「マウスポインターの有効範囲設定」というものでした。
細かく設定ができるのですが、ぱっと見「ポインターの有効／無効」を設定できるものでした。

まさに、今回のような用途向けの記述です。

今回は思ったより簡単に対応できました

最初はJqueryを駆使する必要があるかとも思いましたが、CSSだけで対応できました。
レスポンシブ記述をしていれば、PCはリンクなし、スマホはリンクありというスイッチも、PC用のCSSにのみリンク無効記述を入れておけば実現できました。

今回調べたきっかけは「もっと上手いやり方がないものか？」
と思ったのがきっかけでした。

普段対応方法が確立している場合でも、向上させる方法がないかと考えることで、より品質が高くなるものだと実感いたしました。