こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！
今回の記事では、最近知った、ちょっとした細かい技術的な解説になります。
最近では、「スマホファースト」であったり、「レスポンシブサイト」が主流になってきています。
同じWebサイトでもPCの表示は理想通りにできているのに、スマホになると、下記のようにリンク表示になっていたことがありました。
リンク設定をしていないのに、PCで見ると問題無いのですが、スマホの実機チェックをした際に、スマホのみリンクになっていて、文字色もCSSで設定した色になっていない状況です。
これは、iOSの機能の一つで、その電話番号をクリックすると、そのまま電話を掛けることが可能になっています。
便利な機能なのですが、Web制作者側からすると、予期せぬ場面で文字色が変わったりするというデメリットもあります。
ここでは、こういった場合にはどのように修正すれば良いのかをこの記事で解説していきます！
1 対処法として
例えば、下記のようなHTMLコードがあったとします。
<p class="tel">090-1234-5678<p>これをCSSで下線を消したり、文字の色を変えたりは可能なのですが、実際に確認してみると、PCは問題なく反映されていますが、スマホのSafariで見てみると、下線が付いていて、文字色もリンクの青色になっています。
これに対して、下記のCSSを書いたとします。
.tel {
color: #000000;
text-decoration: none;
}「!important」を書いても下線と文字色は修正できません。
原因としては、iOS端末では自動的に、電話番号に対して以下のようにHTMLコードを変更してしまうらしいです。
<p class="tel"><a href="tel:09012345678">090-1234-5678</a></p>解決方法としては、二つの手段が挙げられます。
一つ目は、CSSのコードを下記に書き変えてみてください。
.tel a {
color: #000000;
text-decoration: none;
}それでも変わらない場合や、HTMLの設計上厳しい場合は、二つ目にとして、下記のタグをheadタグに挿入してみると良いかと思います。
<meta name="format-detection" content="telephone=no">※CSSについては、こちらの記事「【初心者向け】CSSとは？CSSってどう書くの？」を読んでみてください。
※HTMLについては、こちらの記事「【初心者向け】HTMLとは？HTMLの書き方」を読んでみてください。
2 最後に
このような自動リンク機能は、ユーザー側は便利かと思いますが、制作者側では面倒な機能とも言えます。
今の時代は、スマホでWebサイトを見るユーザーも多いので、スマホで見た時にそれぞれのブラウザでの表示も異なる場合が多いので、こちらの記事を参考に気をつけて作成してみましょう！
コメント