スマホでのみ電話番号リンクを有効にする方法

スマホの普及に伴い、ウェブサイトでのユーザーエクスペリエンスの最適化が重要になってきました。特にビジネスやサービス系のウェブサイトでは、スマホユーザーに直接電話をかけてもらいたい場合があります。今回は、スマホでのみ電話番号をクリック可能なリンクとして設定する方法をCSSを使って解説します。

HTMLの基本構造

まず最初に、電話番号を示すHTML要素を設定します。

<a href="tel:012-345-6789" class="phone-link">012-345-6789</a>

このコードでは、<a>タグのhref属性を使用して、電話番号リンクを設定しています。そして、このリンクにphone-linkというクラス名を付与して、後でこのクラスをターゲットにCSSを適用します。

CSSでのスタイリング

次に、CSSを用いて、この電話番号リンクの表示を制御します。具体的には、デスクトップ環境ではリンクを無効にし、スマホ環境ではリンクを有効にするという挙動を実現します。

/* デフォルトではtelリンクを無効にする */
.phone-link {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: inherit;
}

/* スマホのビューポートサイズでtelリンクを有効にする */
@media (max-width: 768px) {
    .phone-link {
        pointer-events: auto;
        cursor: pointer;
        text-decoration: underline;
        color: blue;
    }
}

pointer-events: none; によって、デフォルト状態ではリンクのクリックを無効にしています。そして、メディアクエリを使用してスマホのビューポートサイズでのみリンクを有効にするスタイルを適用しています。

サンプル

012-345-6789

画面幅を768px以下に狭めた状態でのみ、電話番号のリンクが有効になります。

まとめ

この方法を使用することで、JavaScriptを使わずに、デスクトップとスマホの両方のユーザーエクスペリエンスを考慮した電話番号リンクの表示制御が可能になります。特にサービスやビジネス系のウェブサイトでのコンバージョン向上を目指す場合には、このようなテクニックが非常に有効です。ユーザーがスマホを使用している際に、電話番号リンクをクリックするだけで直接ビジネスやサービスにコンタクトをとることができるのは、非常に便利な機能と言えるでしょう。