スマホのみ電話番号をリンクを有効にする方法
投稿日：2020.04.13.
更新日：2025.04.12.
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
CSSでスマートフォンのみ有効にする方法
CSSの場合はデバイスの横幅で判断してリンクを無効をします。
設定は簡単にできます。
例えば下記のコードの場合、このままだとPCでもリンクが効いてクリックできてしまいます。
<a href=”tel:0120838567″>0120-83-8567</a>
こんな時に便利なのが下記のプロパティになります。
pointer-events: none;
このプロパティはクリックを無効化するプロパティでレスポンシブデザインでは表示に役に立つプロパティです。
デバイスの横幅751pxでリンクの切り替えをする場合
@media (min-width: 751px) {
a[href^="tel:"] {
pointer-events: none;
cursor: default;
}
}
横幅が751px以内で、電話番号リンクが有効になります。
横幅が751px以上で、電話番号リンクは無効になります。
