SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】電話番号が自動リンクにならないように指定しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は【HTML】電話番号が自動リンクにならないように指定しよう
の解説になります!

こんな方に読んでほしい

  • HTMLを学び始めた方へ
  • HTMLのmetaについて学びたい方へ
  • 今回は電話番号が自動リンクにならないようにmetaタグを指定します。

Android、iOS搭載のスマートフォンは、ページに含まれる、電話番号に対して番号を検出し自動でリンクを指定してしまします。
また、自動検出機能には、電話番号でない番号も自動でリンクされる可能性もでてきます。

今回は、1行を追加するのみ!!
電話番号が自動リンクになって困ってたらmetaタグを1行を追加しよう。

電話番号の自動リンクを解除

電話番号の自動リンクを解除

HTMLのbody〜/bodyの中に電話番号を記述する際に、番号を検出し自動でリンクを指定されることがあります。

例

例えば、スマートフォンで確認すると、
左の図では、「会社概要ページ」の企業情報の電話番号にリンクが自動的に指定されます。
右の図では、「footer(フッター)」の企業情報の電話番号にリンクが自動的に指定されます。
※PCでは問題はありません。

電話番号の自動リンク比較画像

metaタグの指定は、head〜/head内に記述します。
基本的な書き方は以下になります。

<meta name="format-detection" content="telephone=no">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>無題ドキュメント</title>
</head>
<body>
	<address>〒〇〇〇-〇〇〇〇<br>
	愛知県名古屋市〇〇〇〇〇〇<br>
	TEL:03-1234-5678</address>
</body>
</html>

また、電話番号をリンクさせたい場合は、a要素を使い、
以下のように指定します。

telで電話番号をリンク

スマートフォンに電話リンク

よく、スマートフォンの下部に固定の画像やテキストがあり、ボタンを押すと電話が繋がるようになってることがあります。

telを指定することで、電話のリンクになり、携帯電話でタップすると電話がかけられるようになります。
ハイフンあり、なし、どちらでも問題はありません。数字もハイフンも全て半角で書きましょう。
aタグの中にhref="tel:電話番号"を入れ指定します。

telで電話番号をリンク

電話は0120-345-6789まで

<p>電話は<a href="tel:01203456789">0120-345-6789</a>まで</p>

まとめ

今回はこれで以上です。
電話番号をリンクさせる、させない場合の使い分けは、しっかり覚えておきましょう。

POINT
  • metaタグを追加することで電話番号の自動リンクを回避できます。
  • Android、iOS搭載のスマートフォンのみの対応になります。PCは問題ありません。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top