HTMLの<a>タグを使ってスマホの電話番号リンクを作る方法

HTMLのタグを使ってスマホの電話番号リンクを作る方法






社内でHTMLを勉強している後輩がいる事もあり、今更ながらHTMLの<a>タグを使ってスマホの電話番号リンクを作る方法を紹介したいと思います。

あわせてCSS・iQueryを使ったPCサイトでリンクボタンを無効にする方法も紹介します。

<a>タグを使った電話発信用コード

電話番号リンクは<a>タグのhref属性に <a href=”tel:電話番号”> の記述で設定するだけ。

<a>タグを使った電話番号リンクを設定する方法は非常に手軽で便利なのですが、MacでサンプルのボタンをクリックするとFaceTimeで通話するか聞かれます。

いつもFaceTimeを利用している方以外にとっては不要な機能なので、<a>タグで電話番号リンクを設定した場合は、PCサイトでリンク機能を無効にしてあげた方がユーザービリティ的にも良いです。

サンプルのコードでは<a>タグ内の電話番号にハイフンをつけていますが、ハイフン有り無しのどちらでもOKです。

PCサイトで電話番号リンクを無効にする方法

PCサイトで電話番号リンクを無効にする方法は、CSSを使った方法とjQueryを使った方法の2種類があります。CSSを使った方が手軽なのですが、対応するブラウザに制限があるのでiQueryを使う方法もあわせて覚えておくと便利です。

CSSを使ってリンクボタンを無効にする

設定自体は特に難しくなく、メディアクエリなどを利用してPC用のCSSに下記の記述を追加するだけでOK。CSSの pointer-eventsクリック・タッチイベントを無効化してくれる便利なプロパティです。

メディアクエリでpointer-events プロパティを指定してみました。PCサイトではリンクボタンが反応しなくなりました。

ただ、pointer-events はIE11から利用可能な為、IE10以下に対応する場合はjQueryを使った方法で対処する必要があります。

iQueryを使ってリンクボタンを無効にする

CSSを使った方法は IE10以下には使えないのでjQueryで対処する方法が有効です。

引用:リンクをスマートフォン端末以外では無効にする – Qiita

ユーザーエージェントを判別してスマホ端末以外の場合に tel:リンククリック時のイベントを無効化するそうです。

ただ、上記のjQueryはあくまでクリックイベントを無効化するだけで、マウスオーバー時にはカーソルがpointer(指マーク)となるようです。
下記のCSSも併せて記述しリンクではないことを明確にしておきます。

まとめ

とても簡単に設定できる電話番号リンクですが、PCサイトでは不要になるのでクリックイベントを無効化する設定が必要になります。こうした見た目以外の機能的部分に配慮をしなければならないのが、Webデザインの難しさであり、面白いところでもありますね。

HTMLの<a>タグを使った電話番号リンクは良く利用されているので、Webデザイン初心者の方は覚えておいてください!

「HTMLの<a>タグを使ってスマホの電話番号リンクを作る方法」でした。







HTMLのタグを使ってスマホの電話番号リンクを作る方法