HTML/CSS

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

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

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

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

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

電話発信されるのを防ぐ方法はとても簡単で、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』を使う

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村