【HTML】スマホにおける電話番号の自動リンク化を防ぐ方法

こんにちは!CODE CLUB965のKです!

今回は、あまり使うことはないかもしれませんが、HTMLで電話番号が自動でリンクが付いてしまうのを防ぐ方法について書こうと思います。

リンクを無効にする方法

例えば以下のような記述があったとします。

<!DOCTYPE html>
<html>
<head></head>
<body>
  <p>電話番号</p>
  <p>09012341234</p>
  <p>IDは 12345 だ。</p>
</body>
</html>

このような記述がされた場合、スマホの端末では連続する数字を自動で電話をかけるリンクにしてしまいます。

これが厄介でリンクにして欲しくない場合でもされてしまう場合があります。

これを防ぐには、name属性に"format-detection"、content属性に"telephone=no"を指定したmeta要素を記述することで防ぐことができます。

以下のような感じで記述します。

<!DOCTYPE html>
<html>
<head>
  <meta name="format-detection" content="telephone=no">
</head>
<body>
  <p>電話番号</p>
  <p>09012341234</p>
  <p>IDは 12345 だ。</p>
</body>
</html>

これで

スマホの時の表示がリンクにはならないはずです。

最後に

今回はあまり使うことはないかもしれませんが、ちょっとした豆知識ということで紹介しました。

ちょっとした知識も「ちりも積もれば山となる」ですから少しずつ積み上げていきましょう。

それでは、また!

Follow me!