【HTML】電話番号の自動リンク設定を無効化する方法

2021年9月1日2023年7月17日

aタグに電話番号を設定していないのにスマホで確認した時に、電話番号やFAX番号などの数字がクリックできるようになっており、実際にクリックすると電話発信されてしまう現象にあったことがある人は多いのではないでしょうか。

こちらの記事では、スマホで数字が連続で出現した時に電話番号の自動リンク設定を無効化する方法についてまとめています。

HTML/CSSの学習におすすめ書籍

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

総合評価

( 5 )

メリット

楽天ブックス

¥2,486 （2023/12/03 05:47時点 | 楽天市場調べ）

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

ポチップ

ページ全体で電話番号の自動リンク設定を無効化したい時

電話発信されるのを防ぐ方法はとても簡単で、headタグ内に以下のmetaタグを追加します。

<meta name="format-detection" content="telephone=no">

headタグ内に『<meta name=”format-detection” content=”telephone=no”>』を設定すると、全てのリンクで電話発信が無効化されてしまいます。

FAXはリンク設定を無効化したいけど、電話番号は発信できるようにしたい場合はcssで制御することで解決できます。

@media only screen and (max-width:768px) {
   .telephone-none{
      pointer-events: none;
   }
}

上記の例では、クラスtelephone-noneにpointer-events: none;を指定することでtelephone-noneのクラスを持つ要素は、リンク設定を無効化します。

今回は電話番号の自動リンク設定を無効化する方法について解説しました。

重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。

復習ポイント

headタグ内に『<meta name=”format-detection” content=”telephone=no”>』を追記することでページ全体の自動リンク設定を無効化することができる
特定のリンクのみ自動リンク設定を無効化する場合はcssの『pointer-events: none』を使う

先輩くん

電話発信に関する記事を他にも掲載しているので、気になる方ぜひご覧ください！