【html・css】電話などのリンクを、スマホだけでタッチさせたい！

電話をかけるための<a>タグ設定など、

PCではユーザーに触らせずに、スマホでの閲覧時にはリンクが押せるようになる

というhtml・css小技です♪

基礎中の基礎になりますが、初心者さんほど灯台下暗しになりやすいポイント化と思うので誰かのお悩み解決に役立てば幸いです！

まずは基本のｈｔｍｌから

<p>
<a href="tel:000-1234-5678" class="sp_link">000-1234-5678</a>
</p>

「.sp_link」をPCでは押下できないようにしたいと思います！

解決CSS

.sp_link{
pointer-events: none;
/* 意味：tachイベントを受け取らない */
}


/* ===========
スマホの場合
=========== */

@media screen and (max-width: 750px) {

.sp_link{
pointer-events: visible;
/* 意味：tachイベントを受け取る*/
}

}

見てみると簡単でしたね！classでだし分けするだけでした♪

link以外にも触って欲しくないものなどがあれば、応用できるので良かったら使ってみてくださいね。

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。