Webサイトに電話番号を載せるとき、
スマホではタップして電話できると便利ですよね。
ただ一方で、PC表示のときに
・クリックしても意味がない
・誤ってクリックされる
・リンク色や下線が不自然
と感じたことはないでしょうか。
この記事では、
「スマホでは電話リンクを有効にし、PCでは無効にする方法」をHTMLは変えず、CSSだけで実現する方法を解説します。
※コードに関するご質問や修正の依頼はお受けいたしかねます。
もし、修正が必要ならChatGPTに聞くのが良いです。
やりたいことの整理
まず、今回実現したい状態を整理します。
・スマホ表示
→ 電話番号をタップすると発信できる
・PC表示
→ 電話番号は表示されるが、クリックできない
→ 見た目も普通の文字と同じにする
この条件を満たす方法を考えます。
HTML
HTMLは、よくある電話リンクの形です。
<a class="tel-number" href="tel:09000000000">090-0000-0000</a>ポイントは、
class に tel-number を付けていることです。
この class を目印にして、CSSで制御します。
CSS
/* PC表示のときだけ電話リンクを無効化 */
@media screen and (min-width: 768px) {
a.tel-number {
pointer-events: none; /* クリック無効 */
color: inherit; /* 文字色を通常の文字と同じに */
text-decoration: none; /* 下線を消す */
cursor: default; /* マウスカーソルを普通に */
}
}CSSの内容をひとつずつ解説
min-width: 768px
→ 画面幅が768px以上のとき（PC・タブレット想定）だけ適用されます。
pointer-events: none
→ クリックやタップを受け付けなくします。
これにより、PCでは電話リンクが無効になります。
color: inherit
→ 親要素と同じ文字色にします。
リンク特有の青色を消すためです。
text-decoration: none
→ リンクの下線を消します。
cursor: default
→ マウスを乗せたとき、指マークではなく通常の矢印にします。
考え方（なぜCSSでできるのか）
スマホとPCの違いは「画面の横幅」です。
CSSには
「画面幅が〇px以上のときだけ、このスタイルを適用する」
という指定ができます。
この仕組み（メディアクエリ）を使えば、
・画面が小さい → スマホ想定
・画面が大きい → PC想定
として、見た目や挙動を切り替えられます。
スマホではどうなるのか
このCSSは
「画面幅が768px以上のときだけ」効きます。
そのため、
・スマホ表示
→ CSSは適用されない
→ tel:リンクはそのまま有効
という状態になります。
HTMLを分けたり、JavaScriptを使う必要はありません。
画面幅の調整について
768px は一例です。
例えば、
・PCのみを対象にしたい場合 → 1024px
・タブレットも含めたい場合 → 768px
など、サイトに合わせて調整できます。
まとめ
・HTMLはそのまま
・CSSだけでスマホとPCの挙動を切り替え可能
・スマホでは電話リンク有効
・PCではクリック無効＆見た目も自然
電話番号を安心して掲載したい場合、
シンプルで使いやすい方法なのでおすすめです。
コメント