後ろの要素をクリックさせたい時は「pointer-events」を使おう。制作費39,800円~スマホも対応055-928-6500セミナーのご案内お問い合わせHP応援隊の強み選べる料金プラン制作実績お客様の声HP屋コラム後ろの要素をクリックさせたい時は「pointer-events」を使おう。サイトをコーディングしていく際、z方向に何層か重なっていて見え方の順序とクリックの順序を変えたい場合ってありませんか?要素Aと要素Bが重なっていているときに見え方としては上からA→Bの順だけど、クリックした場合はB要素をクリックさせたい、というよう場合です。具体的には下記のようなデザインの時ですね。見え方としてはボタニカル柄が前面にあるけど、クリックした場合は後ろのスライダーをクリックさせたいような場合です。※下記例ではスライダー画像にはページトップへのリンクが付いており、前面に配置されているボタニカル柄の画像にはリンクが設定されていません。そんな時はこのCSSでお手軽に実現できます。none;」このCSSプロパティを前面の要素(上記の例でいえばボタニカル柄の要素)に使うことでその要素のクリック・タッチを無効にして後ろの要素をクリック・タッチさせることが可能となります。このCSSプロパティを知らなかったときは、後ろの要素をクリックさせるためだけにjsを組んだりとややこしいことをしていましたのでこのCSSプロパティを知ったときは目からうろこでした。IE10以下は未対応のため、古いブラウザをサポートしなければならない場合は使うことができませんがそうでない場合は非常に役に立つCSSプロパティです。設定の有無による動きの違い以下の2つは両方とも画像の上に文章が重なっており、文章にはそれぞれリンクが設定してあります。none;」が設定してあり、2つ目は設定していません。none;」が設定してあります。none;」が設定してありません。実際に文章にカーソルを合わせると違いが分かりやすいと思います。pointer-eventsはこんなことにも応用できます。右クリックによる画像保存を防ぐことPC版の電話番号のリンクを無効化することなどに応用することができます。レスポンシブWEBデザインを使用している場合、電話のリンクをPC版だけ無効にするのはユーザーエクスペリエンスの観点からもおすすめですのでぜひ試してみてください。実際にやる場合はcssに以下を記載すれば実現できます。※メディアクエリのブレイクポイントはサイトに応じて適宜変更してください。none;}}注意点としてクリックやタッチは無効になりますが、キー操作は無効になりません。具体的な例を挙げるとTabキーでフォーカス合わせてEnterキーを押下するとリンクなどが動作してしまいます。最初のスライダーの例などでは関係ありませんが、使う場合はこちらも頭に入れておいたほうがよいでしょう。none;」(実際に使う場合はベンダープレフィックスが必要)などと併用するといいのかもしれません。none;」がおすすめですので是非使ってみてください。過去一覧を見るホーム静岡のHP屋コラム後ろの要素をクリックさせたい時は「pointer-events」を使おう。その他の地域の場合でもご訪問可能な場合がございます。ご希望の方は、お気軽にご相談ください。