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

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

pointer-events

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

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

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

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