HTMLで電話番号が自動的にリンクになるのを防ぎたい
Webページに電話番号を記載すると、リンク設定していないにもかかわらず電話番号がリンクになって発信できる状態になってしまうときがあります。
Google Chromeは勝手にリンクにされてしまうことはないですが、Edgeでは電話番号だと認識されると自動的にアンカーリンクが設定されます。
試しにこのページをEdgeで開き「0120-123-456」を確認してみてください。
ただリンクされるだけなら良いのですが、自動的にaタグが挿入されるため適用されるCSSが変わってしまい、意図したデザインにならなくなってしまいます。
HTMLで電話番号が自動的にリンクになるのを回避する方法
Edgeブラウザなどで自動的に電話番号がリンクにならないようにどうすればいいのかについてですが、やり方はとてもカンタンです。
全ての電話番号の自動リンクを無効化する
ページ内の全ての電話番号を自動リンクさせないようにするには、HTMLのheadタグ内に以下のmetaタグを記述します。
<meta name="format-detection" content="telephone=no">
この一行を記述するだけで電話番号の自動リンクが無効化されます。
指定した電話番号のみリンクさせるには
先程のmetaタグが記述されているページでは、あらゆる電話番号テキストが自動リンクされません。
ですが、一部の電話番号だけリンクさせたい場合は以下のようにaタグで電話番号を囲みます。
<a href="tel:0120-123-456">0120-123-456</a>
aタグのhref属性はURLを記述するのが一般的ですが、「tel:XXX...」のように記述することで電話番号発信リンクにすることができます。
href属性さえ間違えなければリンクテキストは何でもよく、以下の用に記述してもリンクされた電話番号として機能します。
Edgeでのみ電話番号の自動リンクを無効化する
Edgeでのみ電話番号の自動リンクを無効化することができます。
その場合は電話番号をHTMLタグ(div,p,spanなどHTMLタグならどれでもかっこで囲み、そのHTMLタグに「x-ms-format-detection="none"」を与えてください。
<p x-ms-format-detection="none">0120-123-456</p>
このように記述された電話番号はEdgeでのみ自動リンクされなくなります。