2017年7月18日

デザイン

【CSS】pointer-eventsプロパティと活用事例

はじめに

本記事はCSSのpointer-eventsプロパティとその活用事例をご紹介します。
「pointer-events」とはHTML要素に対するクリックイベントを制御することができるプロパティです。

今回の記事ではその活用事例の1つとして、グーグルマップのスクロールイベントをクリックした時だけ発動する方法をご紹介します。

Designed by Freepik

今回使用する例は以下言語を使用しています:

  • HTML
  • CSS
  • JQuery

ページ内に埋め込んだグーグルマップのスクロール

アクセスページなどにグーグルマップを埋め込むことはよくありますが、その時に注意しないといけないことの1つがグーグルマップのスクロールです。
そのまま埋め込んでしまうと、グーグルマップがある部分までは普通にスクロールし、グーグルマップに差し掛かった時点でスクロールが「拡大」として判定され、地図がどんどん拡大してしまいます。

サンプル動画

スクロールについて

以前は「ユーザーはスクロールしない」ので、スクロールしなくとも見える「ファーストビュー」にコンテンツを詰め込むことが推奨されていましたが、すでにいくつかの調査によりユーザーがページ内でスクロールする確率や範囲が広がっていることがわかっています。

例えば、データアナリティクスを専門とするCharbeatはユーザーがWebサイトのエンゲージメントの65.7%はファーストビュー以外で起こっていると発表しています。

また、ページを解析するためのヒートマップツールを提供しているClickTale も120,000ページのWeb サイトを解析した調査結果を発表しました。その調査によると、スクロールできるページのうち76%に何らかのスクロールアクションがあり、22%がページの最後までスクロールされています。

つまり、平均的なサイトは訪問するユーザーの5人に1人がページの最後までスクロールしていることがわかります。

Google Mapでのスクロールの役割

ユーザーがよく使う「スクロール」アクション。何も対処をしないと、グーグルマップに差し掛かった際に地図がどんどん拡大するイライラページが出来上がってしまいます。

とはいえ、「地図を拡大してもっと詳しく道を見たい!」というユーザーや、「もう少し地図を縮小して周りの建物などを見たい!」というユーザーもいるでしょう。

両方に対処するため、今回のコードでは以下3点の機能を盛り込みます。

1. ユーザーがスクロールした時に地図を拡大しない
2. ユーザーがクリックしたあとはスクロールすると地図が拡大する
3. ユーザーが地図の外にマウスカーソルを出したら、またクリックするまでスクロールしても地図を拡大させない

CSSの「pointer-events」とクリックイベントに及ぼす影響

今回のコードではCSSの「pointer-events」というものを使用します。

「pointer-events」とはHTML要素に対するクリックイベントを制御することができるプロパティです。

pointer-eventsプロパティでよく使用する値は2つです。autononeです。
デフォルトでは、pointer-events: auto;になっています。
pointer-events: none;に指定を変更するとクリックができなくなります。それに加え、マウスカーソルの形がデフォルトのままになります。さらに、CSSのhoveractiveなどの状態やJavaScriptのクリックイベントも作動しなくなります。
CSSで指定するものなのですが、JavaScriptのような働きをしてくれます。

例えば、.disable.inactiveのものに対してpointer-events: none; を設定することによって、
<a>タグで囲んだものでも、マウスカーソルに反応しないようにすることができます。

今回は、ページが読み込まれた時にpointer-event: none;を設定、地図をクリックしたらpointer-event: auto;に変更、最後にマウスが地図を外れたら再度pointer-event: none;を設定します。

まずは、HTMLのコードですが、下記のようにしておきます。

HTML:

<div class="map_container">
        <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.916874893872!2d139.7034340652587!3d35.67904873019479!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cb8b8fae637%3A0xe30dbf6efc70fcc0!2zSmFwYW4sIOOAkjE1MS0wMDUxIFTFjWt5xY0tdG8sIFNoaWJ1eWEta3UsIFNlbmRhZ2F5YSwgNCBDaG9tZeKIkjjiiJI2LCDjgrfjg6vjg5Djg7zjg5Pjg6s!5e0!3m2!1sen!2s!4v1493277018469" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>

ポイントとしては、マップを表示する<iframe>以外にもう一つ<div>を使用して<iframe>を囲むことです。

CSS:

#map{
    pointer-events: none;
}

JQuery:

$(function(){
    var googleMap = $('#map');
    $('.map_container').click(function() {
        googleMap.css('pointer-events', 'auto'); //地図をクリックしたら`pointer-event: auto;`に変更
    });
    googleMap.mouseleave(function() {
        googleMap.css('pointer-events', 'none'); //マウスが地図を外れたら再度`pointer-event: none;`を設定
    })
});

CSSのお仕事に関するご相談

Bageleeの運営会社、palanではCSSに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP