webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

スマートフォンの時だけ<a href="tel:">を有効にする

スマートフォンタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするためには

<a href=”tel:0312345678”>お電話はこちら</a>

というリンク設定をします。
ただこのリンクはスマートフォンの時のみに有効にしたいため、PC時などは無効にする必要があります。以前はjQueryを使って行なっていましたが、最近はcssの「pointer-events」を使って、cssのみで行う事が出来ます。

pointer-events

pointer-eventsはマウスイベント(hover , click など)の発生を制御します。
HTMLの要素に適用できる設定値は、auto , none のみです。それ以外はsvgの要素に適用できます。


今回はこの「pointer-events」を使ってPCの時はnoneに、spの時はautoに設定します。

/*pcの時*/
a[href^="tel:"] {
    pointer-events:none;
}
@media screen and (max-width:767px){}
/*spの時*/
a[href^="tel:"] {
    pointer-events:auto;
}
}

「href^=""」ビット排他的論理和演算子

これで、指定した"値"が属性の値と前方一致する要素を選択する、というものらしいです。
つまり、$([href^="#"])とすることで、href属性が "#" で始まる要素を取得することができます。
元々はjQueryで使っていた演算子ですが、最近はcssでも使用する事が出来ます。

例:class属性が「txt-」から始まる要素にCSSを適用させる。

[class^="txt-"]{
  color: #F00;
}