読み込み中...

【CSS】電話番号リンクを作成しよう！5つのステップで完全マスター

電話番号リンクCSSの使い方と応用例を学ぶ CSS
2024.02.18
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事では、電話番号リンクの作り方、使い方、対処法、サンプルコード、そして応用例とサンプルコードを詳細に解説します。

これを読めば、あなたも電話番号リンクCSSのプロになれるはずです。

●ステップ1：電話番号リンクの基本

まずは、電話番号リンクの基本を理解しましょう。

HTMLでは、次のようなコードで電話番号リンクを作成できます。

<a href="tel:0123456789">012-345-6789</a>

このコードでは、電話番号リンクをクリックすると、012-345-6789に発信するように設定されています。

これをCSSでデザインしましょう。

●ステップ2：電話番号リンクにCSSを適用する

次に、電話番号リンクにCSSを適用します。

次のサンプルコードでは、リンクの色を青に変更し、下線をなくしています。

<!DOCTYPE html>
<html>
<head>
<style>
a[href^="tel:"] {
  color: blue;
  text-decoration: none;
}
</style>
</head>
<body>

<a href="tel:0123456789">012-345-6789</a>

</body>
</html>

このコードは、aタグのhref属性が”tel:”で始まるリンクを対象に、色を青にし、下線を消しています。

●ステップ3：電話番号リンクのデザインをカスタマイズする

さらに、電話番号リンクのデザインをカタマイズしましょう。

次のサンプルコードでは、リンクにマウスオーバーした際の色を変更し、フォントサイズを大きくしています。

<!DOCTYPE html>
<html>
<head>
<style>
a[href^="tel:"] {
  color: blue;
  text-decoration: none;
  font-size: 20px;
}

a[href^="tel:"]:hover {
  color: red;
}
</style>
</head>
<body>

<a href="tel:0123456789">012-345-6789</a>

</body>
</html>

このコードでは、リンクにマウスを載せたときに色が赤に変わるように設定しています。

また、フォントサイズを20pxにして、見やすくしています。

●ステップ4：応用例 – 電話番号リンクのアイコンを追加する

電話番号リンクにアイコンを追加することで、さらに分かりやすくすることができます。

次のサンプルコードでは、Font Awesomeを使って電話アイコンを追加しています。

まず、Font AwesomeのCDNをHTMLに追加します。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5r9z6TRhMtvSz/ylzU5o3kKzga3p3Gub9a6mR1Rz" crossorigin="anonymous">
<style>
a[href^="tel:"] {
  color: blue;
  text-decoration: none;
  font-size: 20px;
}

a[href^="tel:"]:hover {
  color: red;
}
</style>
</head>
<body>

<a href="tel:0123456789"><i class="fas fa-phone"></i> 012-345-6789</a>

</body>
</html>

このコードでは、Font Awesomeの電話アイコンを使用し、電話番号リンクの前に表示しています。

●ステップ5：さらなる応用例 – 電話番号リンクをボタンにする

電話番号リンクをボタンにすることで、より目立たせることができます。

次のサンプルコードでは、電話番号リンクをボタンに変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
a[href^="tel:"] {
  display: inline-block;
  background-color: blue;
  color: white;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 5px;
}

a[href^="tel:"]:hover {
  background-color: red;
}
</style>
</head>
<body>

<a href="tel:0123456789">012-345-6789</a>

</body>
</html>

このコードでは、電話番号リンクに背景色、文字色、パディング、角丸を設定してボタン風にデザインしています。

また、マウスオーバー時の背景色を変更することで、インタラクティブなボタンにしています。

これで、電話番号リンクのCSSに関する基本的な使い方や応用例を学ぶことができました。

これらのサンプルコードや説明を参考に、あなたのウェブサイトにも電話番号リンクを取り入れてみてください。

まとめ

この記事では、電話番号リンクのCSSを初心者目線で徹底解説しました。

ステップごとにサンプルコードを用いて、電話番号リンクの作り方、使い方、対処法、そして応用例を詳細に解説しました。

これにより、あなたが電話番号リンクのCSSを使いこなせるようになったことでしょう。

また、電話番号リンクのデザインをカスタマイズし、アイコンを追加する方法やボタン化する方法も紹介しました。

これらの応用例を参考にして、あなたのウェブサイトに電話番号リンクを導入し、より使いやすく、見栄えの良いデザインを目指してください。