20

0702

仕事と暮らし

押せないボタンもかんたんに!
pointer-events: none!

寒くなって参りましたが、体調など崩されていませんでしょうか。
山口市ではつい先日、雪がふりました。
朝の気温が低いと、起きるのも大変になってきますよね…。

pointer-events

さて、今回はCSSのちよっとしたテクニックをご紹介いたします。
皆さんは「pointer-events」というプロパティをご存知でしょうか?
このプロパティは、クリックイベントに関係するプロパティなのですが、pointer-eventsの値を制御することで、例えばこんなことが可能です!

「ページ内に電話番号を記載したんだけど、PCから電話かけるなんて人いないしなあ…スマートフォンで見てるときだけクリックできる仕様にしたい…」

こんなとき、このプロパティを使って、PCで表示しているときのみ「pointer-events: none」と設定するだけで実現できるのです。
実際に、下のボタンをクリックしてみてください。

See the Pen
rNVaaME
by kazuki nakamura (@k_nakamura)
on CodePen.

いかがでしたでしょうか。
他にも、たくさん応用できそうなプロパティですね。
これで、PCから電話がかかってくることはなくなることでしょう…。

中村一貴