電話アイコンを押したらそのまま発信出来る様にする方法

HTML/CSS

今回は、電話アイコンの置き方とそれをタップするとそのまま発信が出来る様にする記述方法を紹介します。

まず今回紹介する方法はaタグリンクの設定の仕方は理解している前提の記事です。分からない方は下記の記事で予習してから閲覧することをお勧めします。

電話リンクの記述

HTMLでは、電話リンクを設定した際、ユーザーがリンクをクリックした時にその電話番号にそのまま発信する事が可能です。

a href=のリンク先に「tel:」を付けてあげるだけで完了です。

HTMLの記述

<a href="tel:03-0000-0000">03-0000-0000</a>

実際の見た目は下記。

03-0000-0000

上記の記述をする事で、電話番号リンクをタップした際にそのまま発信可能となります。

電話アイコンをリンクに

先述で紹介した電話番号リンクの設定をアイコン内にすれば、電話アイコンをタップする事で発信可能となります。

電話アイコンを用意

今回はFont Awesomeを使用した方法を紹介します。

まずは以下のリンクをサイトの<head>〜</head>の間に貼り付けます。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

次に電話アイコンを表示させたい箇所に以下のコード記述します。

<i class="fas fa-phone-square-alt fa-6x"></i>

実際の見た目は下記。

アイコンの大きさを変えたい場合は「fa-6x」の部分を消すか、以下の内容に書き換えます。

  • fa-lg (1.333…倍)
  • fa-2x (2倍)
  • fa-3x (3倍)
  • fa-4x (4倍)
  • fa-5x (5倍)
  • fa-6x (6倍)
  • ….

色の設定

色の設定は、「i class="ここ“」の部分に新しくアイコン用のクラスを付けてCSSでcolorを指定します。もしくはHTMLに直接style="ここ“で記述することも可能です。

<i class="fas fa-phone-square-alt fa-6x telicon"></i>
<style>
.telicon{
color:red;
}
</style>

<i class="fas fa-phone-square-alt fa-8x telicon1"></i>
<style>
.telicon1{
color:red;
}
</style>

<i class="fas fa-phone-square-alt fa-10x" style="color:#5ea8a1;"></i>

<i class="fas fa-phone-square-alt fa-10x" style="color:rgba(181, 131, 56, .8);"></i>

<i class="fas fa-phone-square-alt fa-8x telicon2"></i>
<style>
.telicon2{
color:rgba(104, 90, 145, .5);
}
</style>

TELアイコンにリンクを設定

最後に、上記で設定したアイコンに対して、はじめに紹介した「tel:」を使ってリンクを付けてあげます。

<a href="tel:03-0000-0000">
<i class="fas fa-phone-square-alt fa-10x" style="color:#94de85;">
</I>
</a>

すると上記のように電話アイコンをクリックするとそのまま発信出来ます。


以上が「電話アイコンを押したらそのまま発信出来る様にする方法」でした。

WEB制作案件では必ずと言っても良い程、今回紹介したような電話アイコンを置くと思います。
ほぼ必須な技術なので覚えておきましょう。

Font Awesomeについては下記で詳しく説明しています。

2020年4月4日HTML/CSSHTML,WEB

Posted by KT