> CSS・Sass > CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法
CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

下記のように電話番号へのリンクを作成すると、リンクを押下した際に発信させることが可能です。

<a href="tel:03-0000-0000">電話番号へのリンク</a>

PC・タブレット時は発信せず、スマホでのみ発信するようにするにはいくつか方法がありますが、今回は低カロリーなCSSのみで変更する方法を紹介します。

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

ブレイクポイントを600pxに設定し、600px以上のブラウザサイズではpointer-events: none;に設定しています。
案件に応じてブレイクポイントは変更してください。

pointer-eventsnoneにするとクリックイベントを無効化することができます。
便利なプロパティなのでぜひ活用していきましょう。

この記事が気に入ったらシェアしてください

関連記事

Sass(scss)の基本的な使い方~変数の利用

Sass(scss)の基本的な使い方~変数の利用

Sass(scss)の基本的な使い方~セレクタやプロパティ・メディアクエリのネスト

Sass(scss)の基本的な使い方~セレクタやプロパティ・メディアクエリのネスト

Sassの@forwardで他のscssファイルの定義を転送する~scssファイルを分割して管理するパーシャルの考え方と使い方③

Sassの@forwardで他のscssファイルの定義を転送する~scssファイルを分割して管理するパーシャルの考え方と使い方③

Sassの@useで他のscssファイルの定義を利用する~scssファイルを分割して管理するパーシャルの考え方と使い方②

Sassの@useで他のscssファイルの定義を利用する~scssファイルを分割して管理するパーシャルの考え方と使い方②

scssファイルを分割して管理するパーシャルの考え方と使い方①

scssファイルを分割して管理するパーシャルの考え方と使い方①

Sassとは?SCSSとSASSの違いや基礎知識と導入方法【2025年版】

Sassとは?SCSSとSASSの違いや基礎知識と導入方法【2025年版】

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)