押せないボタンもかんたんに!
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から電話がかかってくることはなくなることでしょう…。

山口”蔵”オフィス

「山口を、記録する。」山口オフィスのメンバーより毎週ブログを書いております。内容としては山口県オススメスポットの紹介や技術のアウトプットなどです。ぜひご覧ください。

Share

Other Blogs

REC.

  1. HOME
  2. BLOG
  3. 仕事と暮らし
  4. 押せないボタンもかんたんに! pointer-events: none!

CONTACT US