福岡のWebデザイナー・カメラマン げんせい｜ホームページ制作・写真撮影

レスポンシブサイトに使えるクリックを無効化するCSS【pointer-events: none;】

2018-10-07
レスポンシブサイトに使えるクリックを無効化するCSS【pointer-events: none;】
  • Home
  • Web
  • レスポンシブサイトに使えるクリックを無効化するCSS【pointer-events: none;】

レスポンシブサイトに使えるクリックを無効化するCSS【pointer-events: none;】

皆さんお疲れ様でございます。福岡でWebデザイナー・フォトグラファーやっとります、げんせいです。
今回はレスポンシブデザインやスマホサイトで使えるCSSプロパティ【pointer-events:none;】をご紹介しようと思います。

pointer-events:none;の効果って？

一言で表すなら【クリック・タッチイベントを無効化】するプロパティです。
実際に動きを見てみるとこのような感じです。

HTML

<div class="pointer-events-btn pointer-events-auto">
    <a href="#">pointer-events: auto; (クリック・タッチ有効)</a>
</div>

<div class="pointer-events-btn pointer-events-none">
    <a href="#">pointer-events: none; (クリック・タッチ無効)</a>
</div>

CSS

/*共通CSS*/
.pointer-events-btn {
    width: 100%;
    margin: 15px 0;
    border: 1px solid #222222;
}
.pointer-events-btn a {
    display: block;
    width: 100%;
    padding: 15px;
    background: #222222;
    font-size: 1.3em;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}
.pointer-events-btn a:hover {
    background: #ffffff;
    color: #222222;
}

/*クリック・タッチ有効*/
.pointer-events-auto a {
    pointer-events: auto;
}

/*クリック・タッチ無効*/
.pointer-events-none a {
    pointer-events: none;
}

サンプル

pointer-events: auto; (クリック・タッチ有効)
pointer-events: none; (クリック・タッチ無効)

このようにpointer-events: none;を指定した方はaタグのリンクもホバーもどちらも無効化されています。

pointer-events: none; どういう時に使うか？

じゃあ実際 pointer-events: none; をどういう時に使うかというと、下記のようなパターンが思いつきます。

  1. メディアクエリと併用してスマホorパソコンの時のみクリック・タッチを無効化
  2. 画像を保存出来ないようにする

まずは一個目から見ていきましょう。

メディアクエリと併用してスマホ・パソコンの時のみクリック・タッチを無効化

まずはソースとサンプルから。

HTML

<div class="pointer-events-tel-btn">
    <a href="tel:00000000000">TEL:000-0000-0000</a>
</div>

CSS

.pointer-events-tel-btn{
    width: 100%;
    margin: 15px 0;
    border: 1px solid #222222;
}
.pointer-events-tel-btn a{
    display: block;
    width: 100%;
    padding: 15px;
    background: #222222;
    font-size: 1.3em;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}
.pointer-events-tel-btn a:hover{
    background: #ffffff;
    color: #222222;
}

@media screen and (min-width:0px){
    /*0px以上で適用する内容*/
    .pointer-events-tel-btn a{
        pointer-events: auto;
    }
}

@media screen and (min-width:769px){
    /*600px以上で適用する内容*/
    .pointer-events-tel-btn a{
        pointer-events: none;
    }
}

サンプル

TEL:000-0000-0000
(スマホでも確認してみてね☆)

上のボタンはPCだとタッチ・クリック無効ですが、スマホだと電話リンクが設定されます。
電話リンクはスマホサイトでは非常に便利ですが、PC表示の場合は動作させる必要が基本的にありません(Skype電話などありますが、まぁ普通のWebサイトには不要かと)。
このようにメディアクエリと組み合わせることによりclassやhtmlを複数設定・設置する必要がなくなりますのでおすすめです。

画像を保存出来ないようにする

まずはソースとサンプルから。

HTML

<div class="pointer-events-img">
    <img src="https://gensei.net/wp-content/uploads/2018/09/20180916-DSC_4173-860x573.jpg" alt="旦過市場"/>
</div>

CSS

.pointer-events-img{
    width: calc(100% - 200px);
    margin: 15px 100px;
}
.pointer-events-img img{
    width: 100%;
    height: auto;
    pointer-events: none;
}

サンプル

旦過市場

上の画像を右クリックしてみてください。おそらく画像が保存出来なくなっているかと思います。
このようにCSSだけで簡単に画像を保存出来ないようになります。
…キャプチャーやHTMLソースから保存すれば一発なんですけどね(笑)

IEのバグ？pointer-events:none;が効かないパターン

以前aタグにclassを設定してpointer-events:none;を当てていたら、IEだけクリック・タッチが無効になっていない事象がありました。
対処法としては、そのaタグの親要素にpointer-events:none;を設定したらクリック・タッチが無効になりました。IEでもしpointer-events:none;が効かない場合はお試しください。

まとめ

今回ご紹介しましたpointer-events:none;
レスポンシブデザインのコーディング時に結構使えるこのプロパティを活用して少しでもシンプルで無理のないコーディングを行いましょう！

BACK TO TOP