CSS セレクターの設定方法を知りたい

この記事では、CSS セレクターの設定方法について説明します。

目次

CSS セレクターとは
CSS セレクターの入力が必要な箇所
CSS セレクターの設定について

CSS セレクターとは

CSS セレクターは、「HTML内の要素を指定するためのもの」です。

元々は、CSS のスタイルを HTML 内のどの要素に適用するかを指定するためのものですが、JavaScript で処理を行う際に、処理対象とする要素を指定する目的でも使われています(Sprocket の場合は後者に該当)。

CSS セレクターの入力が必要な箇所

Sprocket では、2つの目的で CSS セレクターを使用しています。

[吹き出し型] のポップアップを表示させる位置を指定する

[吹き出し型] のポップアップは、ページ内のボタンや画像など、特定の要素に吸着した形で表示されます。この吸着対象を指定するために CSS セレクターを用います。

[吹き出し型] のポップアップについて、詳しくは以下の記事をご参照ください。
ポップアップの種類(カード型と吹き出し型)について

行動データの送信条件を指定する

CSS セレクターは行動データ設定にも使われます。具体的には、以下の種類の行動データを作成する際に、CSS セレクターの設定が必要です。

  • ページの閲覧(特定要素あり)
  • ページの閲覧(特定文字あり)
  • 画面内に表示(特定要素)

行動データの種類や設定方法について、詳しくは以下の記事をご参照ください。
行動データとは
行動データを作成・編集・削除する

CSS セレクターの設定について

ページ内の CSS セレクターを探す方法

対象ページをブラウザで開き、対象とする要素を表示します。ここでは、以下ページ内の [サービス内容を詳しく見る] ボタンの CSS セレクターを取得する手順をご説明します。

c1-1-4_01.png

ブラウザーの表示モードを開発者ツール(デベロッパーツール)に切り替えます。Google Chrome の場合はページ上で右クリックして、開いたメニューから [検証] を選択します。

その後、ウインドウ右側に表示されたソースコードの中から、対象箇所を探します。
※ ソースコードにマウスカーソルを重ねると、ページ内の該当箇所がハイライト表示されるので、どのコードがどの要素を指しているのかがわかります。

c1-1-4_02.png

指定したい要素が見つかったら、その要素にカーソルを重ねて右クリックし、開いたメニューから、[Copy selector] を選択します。CSSセレクターがクリップボードにコピーされますので、管理画面の入力欄にペーストできます。

c1-1-4_03.png

変更に強い CSS セレクターの指定方法

CSS セレクターは、ページ改修の影響を受けやす書き方、受けにくい書き方があります。設定を行う際は、なるべく影響を受けにくい指定方法にすることをおすすめします。

ページ改修の影響を受けやすい例

例1)

#page > div > section.cmn-block.itemlist_block > p > .check_item_block

これは「#page の直下の div の直下の section.cmn-block.itemlist_block 直下の p タグ直下の .check_item_block というクラスが設定されている要素」という意味になります。したがって id 名や class 名が 1 箇所でも変わると指定できなくなくなります。

例2)

body > div:nth-child(2) > div

赤字の部分は「HTML内で何番目か」という要素の順番での指定のため、HTML 内の要素が増減するだけで対象要素が指定できなくなります。

ページ改修の影響を受けにくくするための工夫

  • できるだけ少ない要素の id 名や class 名で指定する。
  • nth-child など要素の順番での指定はできるだけ行わない。

接客シナリオ運用にあたっての考慮事項

CSS セレクターはページの中の要素を指定します。そのため、対象ページの改修(要素の追加・削除・変更など)により、対象要素を指定する CSS セレクターが変わることがあります。CSS セレクターが変わると、ポップアップが表示されなくなったり、行動データが送信されなくなる可能性があります。

[吹き出し型] のポップアップを表示しているシナリオがある場合や、ユーザーのクリック、スクロールをきっかけにしている行動データがある場合は、そのページの改修をおこなう前に影響がないかどうかを事前にご確認ください。

管理画面のバリデーターは、すべてのCSSセレクターの記述エラーの検出を保証するものではありません。「document.querySelector();」で「SYNTAX_ERR」を返すCSSセレクターのみをエラーとして検出できます。

 

CSS セレクターの指定や接客シナリオの運用について、ご心配な点やご不明な点がございましたら、担当コンサルタントまでご相談ください。

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています

コメント

0件のコメント

記事コメントは受け付けていません。