【HTML】iOSのSafariが電話番号を勝手にaタグ化する３つの対策【CSS】

iOSのSafariには、ユーザーエクスペリエンスを高めるために自動的に電話番号をリンクに変換する機能があります。しかし、WEBデザインのコーディングではこの仕様が邪魔になる場合がありますので、対策をいくつか紹介します。

方法１：電話番号のaタグ化を禁止する方法

メタタグ <meta name="format-detection" content="telephone=no"> を使用するのが一番簡単な方法です。

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

これはページ全体に影響を与えるため、特定のセクションでのみ電話番号の自動リンクを無効にしたい場合は適さないかもしれません。

方法２：iOSによりaタグ化した電話番号をCSSで書式設定する方法

この方法はCSSに!importantを使うため、嫌がるコーダーさんもいらっしゃると思います。

<div class="l-footer-phone">TEL 0123-456-7890</div>

例えば、上のようなHTMLで電話番号を書いた場合は、CSSセレクターは下のように「.l-footer-phone a」になります。

.l-footer-phone a {
  color: white !important;
  text-decoration: none !important;
}

方法３：電話番号リンクを自作する方法（オススメ）

最後にiOSによる電話番号のaタグ化を禁止した上で、電話番号を自作コードでaタグ化し、CSSで修飾する方法です。

まずは、メタタグでiOSによる電話番号のaタグ化を禁止します。

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

続いて、HTMLに電話番号にリンクを自分で加えます。これによりiOSによる電話番号aタグ化を自作したことになります。

<div class="l-footer-phone">
  <a href="tel:0123-456-7890" class="custom-tel-link">TEL 0123-456-7890</a>
</div>

この方法では電話番号のaタグにclass属性を付与できるので、CSSによる修飾がより確実になります。

.l-footer-phone .custom-tel-link {
  color: white;
  text-decoration: none;
}