# CSSセレクター

## CSSセレクターとは？

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

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

***

## 使い方

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

{% stepper %}
{% step %}

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

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

{% hint style="success" %}
**Listlyアイコン** クリック → **\[部分+]** 選択 → 目的の要素をクリック
{% endhint %}

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

<figure><img src="/files/84b05fd619c3a000d422b525bffd04b55804b240" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0af0667e8d1a518519964d565ab554039384e333" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

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

<figure><img src="/files/416b6deb4447fe8ca7329547940868a01e9be873" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8bb44938fa31b6064f5eab8a29aae54694454d59" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/2f08a48bec9573c63b3074677e5271b6ad3094bc" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/b6cc27076baa48bbdbcd8d0d0c9fda7298dae534" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

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

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

{% stepper %}
{% step %}

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

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

{% step %}

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

* <mark style="background-color:$success;">**問題**</mark>：最初に選択した要素ではなく、上位タグ（親要素）に主要情報が含まれている可能性があります。
* <mark style="background-color:$success;">**解決方法-1（Parts使用時）**</mark>：最初に選択した要素で**上矢印（↑）**\&#xをクリックして、選択領域を調整してください。**ボタン領域を超えない最大のボックス**まで拡張して、その値を活用してください。

<figure><img src="/files/19473cec5b409b983bbe7fddf51da097636a0e92" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ca159a82dd493c0f6a724ff3046156927be0508e" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.listly.io/docs/ja/getting-started/extension-features/css-selector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.