株式会社マイティーエース- MightyAce Inc.

資料請求

お問い合わせ

運用型広告

Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。

マンガ制作

WEBマンガを中心に、LP・バナー・SNSなど、お客様の商品（サービス）の魅力を伝える完全オリジナルのマンガを制作いたします。

Webページ制作

ページに訪れるユーザーの目的と興味を引く、お客様一人一人のニーズに合わせた完全オリジナルのWebコンテンツを制作いたします。

アクセス解析

精度を高めつつ分析⇒改善のサイクルを回し続け、意思決定に繋がるレポーティングで売上最大化のお手伝いをいたします。

お役立ち

【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以外にも触って欲しくないものなどがあれば、応用できるので良かったら使ってみてくださいね。

Request Materials資料請求

資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

  • ● web広告の改善事例が知りたい方
  • ● 現在お願いしている代理店との比較をしたい方
  • ● サービスの全体像・料金を知りたい方
  1. ホーム
  2. お役立ち
  3. 【html・css】電話などのリンクを、スマホだけでタッチさせたい！