Jump to the content

レスポンシブでpointer-eventsを効果的に使う

CSS

    レスポンシブでのCSS小技。

    ケースとして、PCはテキストの要素だけどSPでは要素自体をリンクにしたいとする。 JS

    See the Pen yeVXaO by Youhei Isokawa (@yuhiisk) on CodePen.

    解説

    こういう場合、まずSPを基準に考えたほうが良い。
    リンクとして振る舞うのが前提だから、当然htmlの要素は<a>でのマークアップになる。

    HTML

    <a class="link-area">
        <div class="text">text1</div>
        <div class="text">text2</div>
    </a>
    

    次にPCではリンクを無効にしたい。そういう時に使えるのが pointer-events だ。
    pointer-events はCSSでマウスイベントを制御することができる。
    もちろんリンクのクリックを無効にすることだってできる。

    pointer-events - CSS | MDN

    PCではリンクを無効にするので、併せて cursor プロパティも指定しておくと親切だ。
    そしてSP(メディアクエリ内)では、pointer-events: auto; でマウスイベントを有効にして元のアンカー要素として振る舞う。
    cursor: pointer; も忘れずに指定すること。これを忘れると、iOSでJSのバグの原因になる可能性がある。

    CSS

    .link-area {
      display: block;
      position: relative;
      padding: 10px;
      border-radius: 5px;
      background-color: #eee;
      cursor: default;
      pointer-events: none;
    }
    
    @media only screen and (max-width: 750px) {
      .link-area {
        padding: 10px 25px 10px 10px;
        background: url(http://blog.yuhiisk.com/img/post/2015-12/arrow.png) no-repeat 99% center #eee;
        cursor: pointer;
        pointer-events: auto;
      }
    }
    

    IE10以下でサポートされていない点が欠点だが、時間の問題だろう。
    ぜひ使える場合は積極的に使ってもらいたい。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×