DOE HOME > Web技術Tips > CSS3 > pointer-events: none; を打ち消して要素を選択できるようにする小技

category_15_m

pointer-events: none; を打ち消して要素を選択できるようにする小技

Pocket

Awwwardsなどに掲載されてるサイトを見ていると、「ここってどうなってるんだろう?」と気になる部分がありますよね。

でもデベロッパーツールで調べようとしても、要素が選択できなくて調べられない!というときがあります。

 

気に入った表現だとなんとか調べたいですよね。

デベロッパーツールで該当しそうな部分をしらみつぶしに探して…とかやるんですが、できればやりたくないです。

 

この記事では、そんなとき役に立つかもしれない小技を紹介します。

要素が選択できない理由

そもそもデベロッパーツールで要素が選択できない理由は、だいたいが以下の理由のどっちかです。

 

  • canvasに描画しているので、そもそもDOMとして配置していない
  • pointer-events: none; を使っている

 

前者はどうしようもないですが、後者の場合はpointer-eventsの値を上書きすれば選択できるようになります。

pointer-eventsとは

参考サイト:pointer-events - CSS | MDN

 

pointer-eventsプロパティは、値がほぼ auto か none しか使われていません。

 

autoがデフォルトの状態で、通常通りのふるまいをします。

 

noneにするとマウスイベントのターゲットにならなくなり、要素が重なっている場合は背後にある要素にマウスイベントが発生します。

また、デベロッパーツールのクリックによる選択が無効になります。

 

user-select: none; と違い、ドラッグでの選択はできます。

pointer-events: none; を打ち消す

pointer-events: none; を打ち消す方法ですが、ユーザースタイルシートで打ち消す方法をおすすめします。

 

ユーザースタイルシートを使うには拡張機能をインストールします。

 

force-img01

 

拡張機能は、ユーザースタイルシートを使えるのならなんでも良いですが、今回はStylishを使います。

 

Stylish はChromeとFirefoxで使えるようです。

Stylishでの設定方法

force-img02

 

Stylishをインストールしたらツールバーに追加されているので、[インストール済みのスタイルを管理] をクリックします。

 

force-img03

 

[新しいスタイルを作成] にします。

 

force-img04

 

*, div {
	pointer-events: auto !important;
}

ユーザースタイルシートを登録します。

!important をつけるのがポイントです。

 

名前が必要なので、名前をつけて、[有効] をチェックします。

 

できたら左上の [保存]ボタンか、[Ctrl] + [S] で保存します。

選択できるようになったかTRY

Cartoon Network Studios

force-img06

 

サイト全体でアニメーションしまくる楽しいサイトです。

 

JOBSページにバターカップがいたので調べようと思ったのですが、

 

force-img05

 

このようにliタグ全体が選択されてしまうので、中身がわかりません。

 Stylishを有効にして再TRY

force-img07

 

Stylishを有効にしてもう一度やってみます。

 

force-img08

 

ちゃんと選択できました。

 

SVGをTweenMaxでアニメーションさせてるっぽいですね。

まとめ

pointer-events: none; を打ち消して、選択できない要素を選択できるようにする方法を紹介しました。

 

この方法は、サイト制作者の意図するふるまいを強制的にキャンセルさせる方法なので、たまにリンクがクリックできなくなるなど、サイトが変になってしまいます。

 

なので使わないときにはStylishは無効にしたほうがいいですね。

Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. Google Mapがエラーで表示されなくなった場合の直し方
  2. 無料で使える明朝体の日本語WEBフォント
  3. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  4. CSS Table displayについて見直してみる
  5. WordPressで子テーマのテーマフォルダまでのパスを出力する方法

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。