ウェブサイトで電話番号をリンクにする場合、スマートフォンでのみ有効にしたい場面があります。今回は、JavaScriptとCSSを使ってスマホのみで電話番号リンクを有効にする方法をまとめていきたいと思います。
電話番号をリンクにする基本的な方法は、<a>タグの href に tel: を指定します。
HTML
<a href="tel:0123456789">012-345-6789</a>このコードを使うと、スマホではタップすると電話アプリが起動します。しかし、パソコンでもクリックできてしまうため、スマホのみに有効にするようにします。
JavaScriptでユーザーエージェント（UA）を判別し、スマホでのみ tel: リンクを適用する方法です。
JavaScript
// スマホかどうかを判定する関数
function isMobile() {
return /iPhone|Android.+Mobile/.test(navigator.userAgent);
}
document.addEventListener("DOMContentLoaded", function() {
var phoneElements = document.querySelectorAll(".phone-number");
if (isMobile()) {
phoneElements.forEach(function(phoneElement) {
var phoneNumber = phoneElement.textContent.trim(); // 電話番号を取得
// スマホの場合のみリンクを作成
var link = document.createElement("a");
link.href = "tel:" + phoneNumber;
link.textContent = phoneNumber;
phoneElement.innerHTML = ""; // 既存のテキストをクリア
phoneElement.appendChild(link); // リンクを追加
});
}
});HTML
<p class="phone-number">012-345-6789</p>isMobile()関数でユーザーエージェントをチェックし、スマホかどうかを判定します。DOMContentLoadedイベントでページの読み込み完了時に処理を実行します。querySelectorAll(".phone-number")で複数の電話番号要素を取得し、ループ処理を行います。- スマホの場合のみ、各電話番号ごとに
<a>要素を作成しtel:リンクを適用します。
完全にJavaScriptのみではありませんが、CSSを組み合わせてデスクトップでのリンク動作を防ぐ方法もあります。
HTML
<a href="tel:0123456789" class="phone-link">012-345-6789</a>
<a href="tel:0987654321" class="phone-link">098-765-4321</a>CSS
@media (min-width: 768px) {
.phone-link {
pointer-events: none;
color: inherit;
text-decoration: none;
}
}- 画面幅が768px以上（タブレットやPC）では
pointer-events: none;によりクリックできなくなります。 color: inherit;text-decoration: none;により、通常のテキストと同じ見た目にできます。
スクリーンリーダーを利用するユーザーに対しても適切に動作するように、aria-label を追加すると良いでしょう。
HTML
<a href="tel:0123456789" aria-label="電話をかける 012-345-6789">012-345-6789</a>スマホでのみリンクを有効にする場合、視覚的に「タップできる」と認識しやすいデザインにすることも重要です。
