寒くなって参りましたが、体調など崩されていませんでしょうか。
山口市ではつい先日、雪がふりました。
朝の気温が低いと、起きるのも大変になってきますよね…。
さて、今回はCSSのちよっとしたテクニックをご紹介いたします。
皆さんは「pointer-events」というプロパティをご存知でしょうか?
このプロパティは、クリックイベントに関係するプロパティなのですが、pointer-eventsの値を制御することで、例えばこんなことが可能です!
「ページ内に電話番号を記載したんだけど、PCから電話かけるなんて人いないしなあ…スマートフォンで見てるときだけクリックできる仕様にしたい…」
こんなとき、このプロパティを使って、PCで表示しているときのみ「pointer-events: none」と設定するだけで実現できるのです。
実際に、下のボタンをクリックしてみてください。
See the Pen
rNVaaME by kazuki nakamura (@k_nakamura)
on CodePen.
いかがでしたでしょうか。
他にも、たくさん応用できそうなプロパティですね。
これで、PCから電話がかかってくることはなくなることでしょう…。
「山口を、記録する。」山口オフィスのメンバーより毎週ブログを書いております。内容としては山口県オススメスポットの紹介や技術のアウトプットなどです。ぜひご覧ください。
REC.