[css] レスポンシブに最適 pointer-events:none; でリンクを非リンクに変える

author :

この記事は、cssの「pointer-events:none;」をレスポンシブデザインでスマートフォン閲覧時に使用したら、よかったという備忘録です。

「pointer-events:none;」についての内容はこちらです。合わせてご確認いただければと思います。

最近はレスポンシブデザインのサイトが多くなっています。google検索もスマホ対応しているサイトを上位表示しているので、レスポンシブデザインが重要になっています。

ポップアップ表示をしているサイトも多く、スマホ対応時にポップアップ表示機能は不具合が多いし、表示領域が小さいので見づらくなってしまう場合が多いです。

IMG_4660IMG_4658_

なぜならスマートフォンは、上の画像のように自由に拡大縮小できたり、スワイプでヘッダー部分の高さが変わったりフッター部分メニュー消えたりと、閲覧者によって変わる部分が多くあります。

そのため下の画像のように、ポップアップは何らかの理由で予期せぬ挙動をしてしまいます。

IMG_4655IMG_4656

http://lokeshdhakar.com/projects/lightbox2/

このようなズレをいかなる場合も無くしパソコン同様の挙動をさせることは非常に困難です。

さらにいうとあまりにも数多くあるAndroidの機種を確認することも難しいです。

そこで、スマートフォン閲覧時だけポップアップ表示なしにしたいことが多くなります。

そういう時のソースコードを記載しましたので、ご確認ください。

レスポンシブデザインの「pointer-events」ソースコード例

html

<a class="pc_link" href="#">パソコンでリンク</a>
<a class="tb_link" href="#">タブレットでリンク</a>
<a class="sp_link" href="#">スマートフォンでリンク</a>

css

@media screen and (min-width:480px)
{
    /* スマートフォン */
    .pc_link,.tb_link
    {
    pointer-events:none;/*リンクを非リンクに変える*/
    }
}
@media screen and (min-width:768px) and ( max-width:1024px)
{
    /* タブレット */
    .pc_link,.sp_link
    {
    pointer-events:none;/*リンクを非リンクに変える*/
    }
}
@media screen and (min-width:1024px)
{
    /* パソコン */
    .tb_link,.sp_link
    {
    pointer-events:none;/*リンクを非リンクに変える*/
    }
}

このように気軽に「pointer-events:none;」でリンクを無効化できるのでいいですね。
いい時代だわ。

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

このエントリーをはてなブックマークに追加
LINEで送る

株式会社 カナメン( canamen, Inc. )は鹿児島で、ホームページ制作を行っています。デザインからコーディング(プログラミング)、アクセス解析まで幅広いスキルでお客様をサポートしています。

2014年1月
個人事業主「canamen.net(カナメンドットネット)」として開業

2015年9月
Google アナリティクス個人認定資格(GAIQ)取得

2016年11月
株式会社 カナメン として法人化

株式会社 カナメン

〒892-0815
鹿児島市易居町1-2 ソーホーかごしま 18号室

代表取締役 冨永 要

tel : 090-6986-9718

mail : info★canamen.co.jp(★を@に)

制作実績
(ホームページ・ポスターなど)

  • twitter
  • facebook
  • google plus
  • flickr
SKILL
  • 企画
  • ディレクション
  • デザイン
  • wordpress
  • JavaScript実装
  • プログラミング
  • 更新作業
  • アクセス解析
  • webマーケティング
  • webコンサルティング
  • ロゴ作成
  • ポスターデザイン
  • 写真撮影
  • イラスト
  • スマホ対応

株式会社 カナメン についてもっと見る

株式会社 カナメン の web サービス

まとめ検索 - koko-search

koko-search

まとめてここから検索。気になることを忘れさせません。まとめ検索 web サービス。【ここサーチ】からすぐに、検索できたりします。

koko-searchをやってみる!
memosns -メモエスエヌエス-

memosns -メモエスエヌエス-

メモを残すウェブサービス。ウェブ上に自分だけのメモを、さらに、ユーザー同士でメモでコミュニケーションも。メモ・ソーシャル・ウェブサービス

memosns をやってみる!
閉じる