【CSS】電話番号へのリンクで「電話する」ボタンを作成する（768px以上では「PCでは電話できません」表示）

スマホからの閲覧の場合にそのまま電話できるボタンがあると便利なので、電話番号の文字列には電話できるリンクを設置しましょう。

電話番号へリンクする

電話番号の文字列にaタグで「href=”tel:電話番号”」とすることで、タップで直接電話できるようになります。

a href=”tel:電話番号（半角数字）”

電話番号にはハイフンがあっても問題なく動作します。

HTML

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

safariやEdggの電話番号の自動リンクを無効にする

safariやIEのEdggは、ブラウザ側で電話番号とみなされる数字の文字列には自動で電話番号のリンクがついてしまいます。意図しない箇所に電話番号のリンクがついてしまうことを避けるために、以下のmetaを記述すると自動リンクが解除ます。

HTML（metaタグ）

<meta name="format-detection" content="telephone=no">

HTML

メディアクエリを利用すればCSSのpointer-eventsプロパティを利用して768px以上の時は、クリックを無効にする、という事も可能です。href属性が”tel:”で始まる場合のみにクリックをしない、というテクニックを紹介します。

@media screen and (min-width: 768px){ a[href^="tel:"]{ pointer-events: none; } }

ただ今後、スマホも解像度が上がるにつれ上記ブレイクポイントの修正も必要になってくると思いますので、あまりオススメしません。

リンクのボタンを作成する

ではついでにFontawesomeを利用してスマホアイコンが付いた「電話する」ボタンを作成してみます。

.tel-btn a{ margin:0 auto; display:block; text-align:center; background-color:#666; color:#fff; padding:10px; text-decoration:none; width:250px; } .tel-btn a:hover{ background-color:#ccc; color:#000; } .tel-btn a[href^="tel:"]::before{ content: '\f095'; font-family: 'Fontawesome'; margin-right:.1em; } .tel-btn a[href^="tel:"]::after{ content: 'スマホから電話する'; margin-left:.1em; } @media screen and (min-width: 768px){ .tel-btn a[href^="tel:"]{ pointer-events: none; } .tel-btn a[href^="tel:"]::before{ content: '\f3dd'; font-family: 'Fontawesome'; margin-right:.1em; } .tel-btn a[href^="tel:"]::after{ content: 'PCでは電話できません'; margin-left:.1em; } }

ウィンドウサイズを変えてみてください。768px以上では電話が出来ないマークと、「PCでは電話できません」という表示され、768px以下では電話が出来ないマーク「スマホから電話する」と表示されます。