株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • HTMLで電話番号のリンクを設定する方法 – スマートフォンのみの設定方法も紹介
カテゴリーから探す
アーカイブから探す
2023年1月20日
HTMLで電話番号のリンクを設定する方法 – スマートフォンのみの設定方法も紹介

今回は、HTMLで電話番号のリンクを設定する方法を紹介します。

電話番号のリンクを設定するとどうなる?

リンクを設定した場所をタップするだけで直接電話を発信することができるようになるため、ユーザーにとって使いやすいサイトになります。

電話番号のリンク設定方法は?

設定は簡単です。[a href=””]に[tel:]を入れるだけです。

※番号は任意の番号を入れてください。ハイフンはなしでもOKです。

HTMLはこちら

<a href="tel:090-1234-5678">090-1234-5678</a>

こちらが実装例です。

See the Pen
Untitled
by 林 (@hayashi-akina)
on CodePen.

実装例の[Result]の中の番号をクリックすると、PCでは[次を使って電話][アプリの選択]等が表示されます。

ただ、電話をかけるのはほとんどがスマートフォンからで、PCでの設定は不要といえます。

スマートフォン、タブレットのみ設定する場合は、以下のCSSも追加してください。

@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

設定の内容は以下の通りです。

横幅が751px以内で、電話番号リンクが有効

横幅が751px以上で、電話番号リンクは無効