CSSセレクター

CSSセレクターとは？

自動クリック、自動ログイン、ページネーションテンプレートなどの機能を使用するには、クリックする要素を特定するSelector値が必要です。このヘルプでは、そのSelector値を取得する方法をご案内します。

CSSセレクター（選択子）とは、スタイル属性を適用する要素のことです。簡単に言えば、ウェブサイトは基本的に数多くのタグで構成されており、コード上にデザインを着せるため、ウェブページに存在する要素要素に付けられた特定の値と言えます。Listlyのヘルプで CSSセレクターについて言及される場合、特定の選択要素（例：ボタン、入力欄など）が持つコード値程度に理解していただければ結構です。

使い方

A1. セレクター値を取得する

1

PARTSでCSSセレクター値を取得する

Listly PARTSを活用すれば、CSSセレクター値を素早く簡単に取得できます。

Listlyアイコン クリック → [部分+] 選択 → 目的の要素をクリック

上記の過程を通じてサイドパネルで目的の要素のセレクター値をすぐに確認できます。CSSセレクター欄の**[コピーアイコン]**&#xをクリックすると、簡単にその値をコピーできます。

値をコピーした後、セレクター値が必要な設定欄にキーボードのCtrl+Vで貼り付けて活用してください。

2

開発者ツールでCSSセレクター値を取得する（Legacy）

(1) ボタンまたは入力欄などの要素の上でマウスの右クリックをして**[検証]**&#xを選択します。

(2) 画面の右側または下部にコードウィンドウが表示されます。先ほど選択した要素に該当するコードはグレーで表示され、コード上にマウスを置くと画面で該当領域が色で強調表示されます。

(3) グレーで強調表示されたコードの上でマウスの右クリックをし、Copy -> Copy selectorを選択すると、そのselectorの値がコピーされます。

(4) 設定ウィンドウに移動し、セレクター値を入力する位置でキーボードのCtrl+Vまたはマウス右クリック後「貼り付け」を選択して、先ほどコピーした値を貼り付けて保存します。

A2. Selectorを入力したのに正常に動作しない場合

ほとんどのウェブサイトでは、1番目の手順で取得したセレクター値を入力すると正常に動作します。 しかし、セレクター値を入力したにもかかわらず希望する結果が出ない場合は、以下の方法を確認してみてください。

1

デザイン変更プログラムの干渉

  • 問題：マウスカーソルのデザイン、ブラウザのテーマ変更、デザイン補正用の拡張機能などにより、不要なCSSコードが一緒にコピーされた可能性があります。CSSはウェブページのデザインに関与するコードであるため、関連プログラムが実行中の場合は設定をオフにして再度セレクター値をコピーしてみてください。

2

上位/隣接タグに必要な情報が含まれている場合

  • 問題：最初に選択した要素ではなく、上位タグ（親要素）に主要情報が含まれている可能性があります。

  • 解決方法-1（Parts使用時）：最初に選択した要素で上矢印（↑）&#xをクリックして、選択領域を調整してください。ボタン領域を超えない最大のボックスまで拡張して、その値を活用してください。

  • 解決方法-2（開発者ツール使用時）：開発者ツールでコード上にマウスを置くと、該当要素の領域が強調表示されます。この時もボタン領域を超えない最大のボックスを選択してCSSセレクター値をコピーしてください。

前へタブ - 開いているタブ次へテーブルデータ

最終更新

役に立ちましたか？