ページ上の要素に対して別の要素を埋め込んだりクリックトラッキングを仕込んだりする場合、要素を指定するためのCSSセレクタを特定する必要があります。

CSSセレクタの取得

CSSセレクタを理解しなくても、Chromeのデベロッパーツールを使うことである要素に対応するCSSセレクタを取得することができます。

  • 対象のページを開きます
  • ページ内から、CSSセレクタを取得したい要素を見つけます
  • 要素の上で右クリックし、「検証」を選択します
  • Elementsタブの中で、該当の要素に対応するHTMLタグがハイライトされます
  • ハイライトされたHTMLタグを右クリックし、「Copy > Copy selector」を選択します
  • クリップボードにその要素を指定するCSSセレクタがコピーされます

null

注意点

次の場合、取得したCSSセレクタを使っても要素が取得できなくなる場合があります。

  • モーダルやドロップダウンメニューなど、動的に表示/非表示が切り替わる要素の場合
  • サイト改修によりHTMLの構造が変わった場合

該当の要素のCSSセレクタを確認する

CSSセレクタの正誤を確認したいときには、以下の手順で確認を行って下さい。

  • Chromeで要素が存在するページを開き、デベロッパーツールでConsoleを開きます
    null

  • コンソールに次のようなJavaScriptを入力し、Enterを押します

    • document.querySelectorAll('xxxxx')
      • xxxxxの部分に、指定するセレクタを追加して下さい

CSSセレクタが正しい場合

  • 出力されたNodeListに、CSSセレクタで指定したい要素が格納されていることを確認します
    • 表示されたNodeListにマウスポインたをホバーすると、画面上のどの部分に対応した要素かをビジュアルで確認できます

null

CSSセレクタが誤っている場合

  • 指定したCSSセレクタに対応する要素がページ上に無い場合、空のNodeListが出力されます

null