【CSS】MacとiPhoneで異なる電話番号の見た目を揃える方法

Posted at 2024-06-03

はじめに

本記事は、iPhoneで見ると「電話番号が勝手に青色になってしまうな〜」とか、「なんか下線ついちゃうんだけどなんで？」という現象をCSSを使って解決しよう！という記事です。

以下のコードを記述した時に、Chromeの検証ツールで見ていたときは色を変更するCSSが当たっており、表示も正しく反映されていた。
ただ、iPhoneで見たときにsafariでは文字の色が青色に、Chromeでは色はいいけど青色の下線がついてしまっている状態になっていた。

index.html

<div class="tel">090-111-2222</div>

style.css

.tel {
  color: #4C93AA;
}

PCでの正しい表示 ⭕️
色が想定通り当たっている状態。

iPhone（safari）で見た時の状態 ❌
→cssで色も当ててるのに、青色になってしまっている状態。

iPhone（Chrome）で見た時の状態 ❌
色は変わっているが、下線が入ってしまっている状態。

iPhoneのsafari・Chromeだと、電話番号のような数字を認識するとタップで電話がかけられるよう自動でリンクを付与してるらしい。そのため勝手にaタグに変わり、リンク扱いになるため文字の色が青になり下線が入ってしまうみたいです。

電話番号をaタグの中に記述する

index.html

<div class="tel">
    　<a href="#">090-111-2222</a>
<div>

aタグに対して下線と色の変更を指定するCSSを記述する

style.css

.tel a {
    pointer-events: none;
    text-decoration: none;
    color: #333;
 }

なかなか気づきづらい部分ですが、見る側からしたら違和感しかないので、
今回のようなこともしっかりと考慮する必要があるということを学べたいい機会でした！