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

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

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

電話リンクの記述

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

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

HTMLの記述

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

実際の見た目は下記。

03-0000-0000

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

電話アイコンをリンクに

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

電話アイコンを用意

<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については下記で詳しく説明しています。

【最新版】Font Awesomeの使い方とカスタムCSSクラス

今回は、Font Awesomeの初期設定、基本的な使い方と、CSSクラスを使用した色や大きさの変更方法やアニメーションなどの様々な使用パターンやカスタマイズ方法を紹介します。

kt-life.net

2020.03.29