ホームページが一般的になって最も有効に使われたタグがあります。
それは「リンクタグ」です。
他のページへジャンプするだけの機能ですが、webという構造の根幹をなしているといえます。
ただ、今回リンクの有効／無効を切り返したい事象がありました。
それは「電話番号のリンク」です。
電話番号リンクはスマホで表示した際にタップすると、直電することができます。
ただ、PCで表示している場合は電話できません。
つまり、PCの時はリンクを無効にして、スマホの時はリンクを有効にしたいのです。
今までは表示／非表示切り替えでやっていました
いままでは、リンクありとリンクなしの2種類のコーディングを用意して、PCとスマホ表示時に「表示／非表示切り替え」をすることで実現していました。
これはこれでそれなりに動作します。
ただ、もっとスマートな方法がないものかと思いました。
ググって調べたら、最適解な方法がありました。
CSS1行追加するだけでリンクを無効にできました
まずは実際にできたものをご覧ください。
上のリンクは通常通りですが、下のリンクはクリックしても反応しません。
CSSでリンクを無効にしています。
具体的には次のように記述しています。
具体的には下のリンクには次のようなCSSを記述しています。
.nolink a
{
pointer-events: none;
}たった1行追加するだけでリンクが無効になりました。
あとはレスポンシブ記述に合わせて、リンクの有効・無効をスイッチすれば切り替えができるようになります。
ただ、ここで疑問がわきます。
pointer-events ってなに？
pointer-eventsとは
ググるといっぱい出てきました。
簡単にいうと、「マウスポインターの有効範囲設定」というものでした。
細かく設定ができるのですが、ぱっと見「ポインターの有効／無効」を設定できるものでした。
まさに、今回のような用途向けの記述です。
今回は思ったより簡単に対応できました
最初はJqueryを駆使する必要があるかとも思いましたが、CSSだけで対応できました。
レスポンシブ記述をしていれば、PCはリンクなし、スマホはリンクありというスイッチも、PC用のCSSにのみリンク無効記述を入れておけば実現できました。
今回調べたきっかけは「もっと上手いやり方がないものか？」
と思ったのがきっかけでした。
普段対応方法が確立している場合でも、向上させる方法がないかと考えることで、より品質が高くなるものだと実感いたしました。