iPhoneの電話番号自動リンク：下線と文字色の修正方法

iPhoneなどのiOS端末でWEBサイトを見ると、電話番号に自動的にリンクが貼られることがあります。

同じWEBサイトでも、PCだとこういう表示なのに↓

iPhoneで見るとこんな感じになる↓

これはiOSの機能の一つです。
その電話番号をクリックすることで、そのまま電話を掛けることが可能となります。

これは便利な機能ではありますが、困るのが勝手に電話番号に下線が付いて、文字色も変わってしまうこと。

これは修正したい場合はどうすればいいのか？
今回はこの対処方法について。

下線消去と文字色の変更

たとえば、電話番号を記述したHTMLコードが以下だったとします。

<p class="tel-number">TEL : 080-0000-0000</p>

これに対してCSSで、

.tel-number {
    color:#カラー番号 !important;
    text-decoration:none !important;
    }

こう書いてもiOS端末では、文字色や下線は修正できません。
「!important」入れても無理です。

結論から言うと、iOS端末では自動的に
電話番号に対して以下のようにHTMLコードを変更してしまうからです。

<p class="tel-number">TEL : <a href="tel:08000000000">080-0000-0000</a></p>

「a」タグを自動で入れてしまいます。

なので、これを修正するCSSコードは、

.tel-number a {
    color:#カラー番号;
    text-decoration:none;
    }

となります。

まあ、分かってみれば簡単ですが、最初はワケが分からなくて悩みました。

電話番号の記述規則は？

では、iOS端末にて自動的にリンクを付与する電話番号の記述規則はどのようなものでしょうか？

実機で検証してみました。
＊「iOS 11.3.1」端末機で検証
＊2018年5月21日時点でのiOS最新バージョンです。

まず、電話番号と見なすパターン

<p>TEL : 080-0000-0000</p>

<p>TEL:080-0000-0000</p>

<p>TEL 080-0000-0000</p>    

<p>080-0000-0000</p>

<p>080-0000</p>

<p>08000000000</p>

<p>0800000000</p>
    
<p>080000000</p>
    
<p>08000000</p>   

<p>1234567</p>

次に、電話番号と見なされないパターン

<p>TEL080-0000-0000</p>
    
<p>TEL.080-0000-0000</p>
    
<p>TEL.08000000000</p>

<p>TEL : 0800000</p>

<p>0800000</p>

<p>123456</p> 
    
<p>12345678</p>
    
<p>123456789</p>