どうも7noteです。タップしたら電話がかけられるようにする方法。PCは反応させないようにします。

ヘッダーやフッターなどに電話番号を掲載した際に、タップで電話をかけられるようにする方法です。
お問い合わせ窓口のページなどにも使いますね。

実はけっこう簡単に実装することができるのですが、対策をしないとPCから見たときにも反応してしまうので、その対策方法も合わせて実装します。

ソース

<ahref="tel:00012345678">000-1234-5678</a><!-- href属性に「tel:」と「電話番号」を記載する。 -->

/* 750px以上の幅（PC等）がある時だけ */@mediascreenand(min-width:768px){a[href^="tel:"]{pointer-events:none;/* カーソルイベントを無効 */}}

解説

aタグのhref属性に、「tel:」と「電話番号」を書くことで動作します。
必ずaタグでなければいけない事と、番号の前に「tel:」をつける必要性があります。
「tel:」の後の電話番号はハイフン(-)ありでもなしでも動作するので好きな方が使えます。

スマホのみ対応にする方法

style.cssに書いているようにaタグのhref属性が「tel:」から始まるものは、pointer-events: none;で無効にすることができます。
@media screen and (min-width: 768px)の指定でPCにだけこれを無効にすることで、スマホからタップした時にだけ反応するようにできる仕組みです。

おまけ（国際電話の場合）

<ahref="tel:+81-90-0000-0000">090-0000-0000</a>

国コードの入力が必要！！

参考：https://webliker.info/65145/

まとめ

簡単に実装できますし、aタグなのでテキストだけでなくボタンのようなデザインを作って「お電話はこちら！」というようなボタンにすることも可能です。
PCの時に誤ってクリックできてしまうと、無駄なアラートがでるのでしっかりと無効化の処理も忘れずに入れること！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ