マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > お役立ち > 【html・css】電話などのリンクを、スマホだけでタッチさせたい!

Mighty Ace Blog

マイティーBlog

お役立ち

2021.03.31

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

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

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

というhtml・css小技です♪

 

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

 

まずは基本のhtmlから

<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アナリティクス設定項目チェックシート(無料)

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

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.