静岡のHP屋コラム

2018.01.25

後ろの要素をクリックさせたい時は「pointer-events」を使おう。

サイトをコーディングしていく際、z方向に何層か重なっていて見え方の順序とクリックの順序を変えたい場合ってありませんか?要素Aと要素Bが重なっていているときに見え方としては上からA→Bの順だけど、クリックした場合はB要素をクリックさせたい、というよう場合です。

具体的には下記のようなデザインの時ですね。見え方としてはボタニカル柄が前面にあるけど、クリックした場合は後ろのスライダーをクリックさせたいような場合です。

※下記例ではスライダー画像にはページトップへのリンクが付いており、前面に配置されているボタニカル柄の画像にはリンクが設定されていません。

そんな時はこのCSSでお手軽に実現できます。

「pointer-events: none;」

このCSSプロパティを前面の要素(上記の例でいえばボタニカル柄の要素)に使うことでその要素のクリック・タッチを無効にして後ろの要素をクリック・タッチさせることが可能となります。

このCSSプロパティを知らなかったときは、後ろの要素をクリックさせるためだけにjsを組んだりとややこしいことをしていましたのでこのCSSプロパティを知ったときは目からうろこでした。

IE10以下は未対応のため、古いブラウザをサポートしなければならない場合は使うことができませんがそうでない場合は非常に役に立つCSSプロパティです。

設定の有無による動きの違い

以下の2つは両方とも画像の上に文章が重なっており、文章にはそれぞれリンクが設定してあります。1つ目は「pointer-events: none;」が設定してあり、2つ目は設定していません。

実際に文章にカーソルを合わせると違いが分かりやすいと思います。

pointer-eventsはこんなことにも応用できます。

このCSSプロパティは要素が重なったとき以外にも、

  • 右クリックによる画像保存を防ぐこと
  • PC版の電話番号のリンクを無効化すること

などに応用することができます。

特にレスポンシブWEBデザインを使用している場合、電話のリンクをPC版だけ無効にするのはユーザーエクスペリエンスの観点からもおすすめですのでぜひ試してみてください。

実際にやる場合はcssに以下を記載すれば実現できます。
※メディアクエリのブレイクポイントはサイトに応じて適宜変更してください。

PC版サイトの電話リンク無効のサンプル

/* PC版(768px以上の場合) */
@media (min-width: 768px) {
	/* hrefが「tel:」から始まるa要素 */
	a[href^="tel:"] {
		pointer-events: none;
	}
}

 

注意点としてクリックやタッチは無効になりますが、キー操作は無効になりません。

具体的な例を挙げるとTabキーでフォーカス合わせてEnterキーを押下するとリンクなどが動作してしまいます。最初のスライダーの例などでは関係ありませんが、使う場合はこちらも頭に入れておいたほうがよいでしょう。

また、単純にその要素を触らせたくない場合は
「tabindex="-1"」
「-webkit-touch-callout: none;」
「user-select: none;」(実際に使う場合はベンダープレフィックスが必要)
などと併用するといいのかもしれません。

話はそれましたが、要素が重なっているときのクリックを制御したい場合には「pointer-events: none;」がおすすめですので是非使ってみてください。

お気軽にお問い合わせください
参加無料HP活用セミナーのご案内

ホームページ応援隊対応エリア

静岡市・沼津市・三島市・駿東郡(清水町・長泉町・小山町)・富士市・富士宮市・裾野市・御殿場市・伊豆市・伊豆の国市・伊東市・熱海市・焼津市・藤枝市・函南町

その他の地域の方はお気軽にご相談ください。

HP成功法則45(無料小冊子)プレゼント中

セミナーのご案内&実績

「地域+サービス名」で顧客をつかむ最新SEO対策セミナー

お店や商品、サービスの情報や評判などを調べるとき、多くの方が手元にあるスマホやタブレットを使ってその場で調べるようになりました。地域情報を調べる見込み客にアプローチする為に、サイトや店舗の情報を上位表示させるためはどうすればいいのか、その具体的な方法をお伝えします。

【11月/12月】集客が2倍になるスマホサイト徹底公開セミナー

スマホの普及率は爆発的に増えており、スマホサイトの重要性は高まり続けています。今回のセミナーでは、スマホで見やすく、目的の行動をしやすいサイトにするためのポイントをお伝えします。

10/19(水)集客が2倍になるスマホサイト徹底公開セミナー@沼津

スマホの普及率は爆発的に増えており、スマホサイトの重要性は高まり続けています。今回のセミナーでは、スマホで見やすく、目的の行動をしやすいサイトにするためのポイントをお伝えします。

新着情報一覧へ

サイト内検索

このサイトの運営会社

㈱アーティスティックス
411-0943 静岡県駿東郡長泉町下土狩690-1-101

TEL:055-928-6500
FAX:055-928-6501
お問い合わせはこちら
運営会社情報はこちら

ページの先頭へ