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

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

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

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

本書情報

著者	Mana
発売日	2019/3/16
ページ数	280ページ
Kindle版	○
レビュー (Amazon)	(2,167件)

１冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

先輩くん

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

後輩ちゃん

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

綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報

出版社	オライリージャパン
著者	Dustin Boswell / Trevor Foucher
発売日	2012/6/23
ページ数	260ページ
レビュー (Amazon)	(620件)

先輩くん

より良いコードを書きたい人におすすめの本だよ！

後輩ちゃん

10以上前の書籍ですが、内容は今でも役に立つものばかりです！

【中古】リーダブルコード —より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)／Dustin Boswell、Trevor Foucher、須藤 功平、角 征典

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

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

特定の電話番号のみリンク設定を無効化したい時

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

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

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

まとめ

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

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

先輩くん

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