クリック及びタッチを無効にするCSS


最近便利かなーって思ったCSSがあったので紹介。
最近見たところだとTOYOTAさんのトップページで春限定演出時に使用していた。

CSSについて・・・の前に

今から紹介するものはIE11以上のブラウザしか適応できない。
なので、IE10以下を考慮した作りにするならz-indexでできるならz-indexでして、それも難しいならjsで制御する必要がある。
最近はIE9も大幅にシェアを減らしたってニュースは聞くけど、IE10はまだまだいるみたいだから注意する必要がある。

CSSについて

そのCSSは、pointer-events。
MDN公式サイトは以下
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

これのいいところは、absolute等を使用した重なっている要素の、上のクリックを無効にして、重なり順では下の要素をクリック(タッチ)できるようにすることができる。
わかりやすい例でTOYOTAさんのトップページを挙げると、春限定で桜の花びらが画面全体に舞っていた。重なり順としては一番前。
その舞う演出自体はcanvasタグで行っていて、そのcanvasタグに対してpointer-eventsプロパティ。

この例みたいに、ボタンなどは演出の下に見せたい、でも各要素のクリックはできるようにしたいって時に使えるっぽい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。