css3

スマートフォンやタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンでは、telリンクを設定していない、ただの文字列もリンク扱いになってしまいます。
なので、まずmetaタグで

<meta name="format-detection" content="telephone=no">

と記述し、

実際の電話番号へのリンク部分に

<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;
}