CSSセレクタの見つけ方
テキストエリア、フォーム、入力フィールドのCSSセレクタを特定して、AI Anywhereヘルパーをウェブサイトに統合する方法を学びましょう。
15分で読めます
このビデオチュートリアルを見て、ブラウザの開発者ツールを使ってCSSセレクタを見つける方法を学びましょう。
CSSセレクタは、ウェブページ上のHTML要素を選択するためのパターンです。AI Anywhereヘルパーを作成する際には、ヘルパーがターゲットとするテキストエリアやフォームフィールドをCSSセレクタで指定する必要があります。
方法 1: 右クリックで要素を検査 (推奨)
完全な開発者ツールを開かずにセレクタを見つける最も迅速で簡単な方法です。
- ターゲット要素を右クリック （テキストエリア、入力フィールドなど）
- 「要素を検査」を選択 コンテキストメニューから
-
要素パネルで：
- ハイライトされた要素を右クリックします
- 選択 コピー → セレクタをコピー
方法 2: ブラウザの開発者ツールを使用
これは、どのウェブサイトでもセレクタを見つけるための最も信頼性の高い方法です。
-
開発者ツールを開く：
- Chrome/Edge： 押す F12 または Ctrl+Shift+I
- Firefox： 押す F12 または Ctrl+Shift+I
- Safari： 押す Cmd+Option+I
-
要素を選択：
- クリック 要素 開発者ツールのタブ
- クリック 要素を選択 ツール（カーソルアイコン）を左上で
- ターゲットにしたいテキストエリアまたはフォームフィールドをクリック
-
セレクタをコピー：
- 要素パネルでハイライトされた要素を右クリック
- 選択 コピー → セレクタをコピー
- このセレクタをAI Anywhereヘルパーの設定に貼り付け
例： If you select a textarea with id="comments", you'll get:
#comments
方法3: 手動でセレクタを作成
HTML構造を理解して、手動でセレクタを作成する方法を学びます。
一般的なセレクタパターン:
#element-id /* IDで要素をターゲット */
.class-name /* クラスで要素をターゲット */
input[type="text"] /* 特定の入力タイプをターゲット */
textarea /* すべてのテキストエリアをターゲット */
form .field /* フォーム内の要素をターゲット */
例:
IDで:
クラスで:
タイプで:
属性で:
#message ターゲット <textarea id="message">クラスで:
.comment-box ターゲット <textarea class="comment-box">タイプで:
input[type="email"] メール入力フィールドをターゲット属性で:
textarea[name="description"] name="description"のテキストエリアをターゲット
一般的なセレクタの例
テキストエリア:
#comments /* id="comments"のテキストエリア */
.message-box /* class="message-box"のテキストエリア */
textarea[name="bio"] /* name="bio"のテキストエリア */
入力フィールド:
#email /* id="email"の入力 */
input[type="text"] /* すべてのテキスト入力 */
.form-control /* Bootstrapフォームコントロール */
フォーム要素:
#contact-form textarea /* 連絡フォーム内のテキストエリア */
.comment-section input /* コメントセクション内の入力 */
.editor textarea /* エディタ内のテキストエリア */
WordPress特有のセレクタ
WordPressはすべてのウェブサイトの40%以上を支えているため、最も一般的なセレクタを以下に示します\
WordPress管理ダッシュボードセレクタ:
#content /* メインコンテンツエディタ（Gutenberg/クラシック） */
.wp-editor-area /* クラシックエディタのテキストエリア */
.block-editor-default-block-appender__content /* Gutenbergブロックエディタ */
.editor-post-title__input /* 投稿タイトルフィールド */
WordPressコメントフォーム:
#comment /* メインコメントテキストエリア */
#respond textarea /* コメントセクションのコメントテキストエリア */
.comment-form textarea /* コメントフォームのテキストエリア */
#commentform textarea /* 代替コメントフォームセレクタ */
WordPressコンタクトフォーム（Contact Form 7、Gravity Formsなど）：
.wpcf7-textarea /* Contact Form 7のテキストエリア */
.gform_wrapper textarea /* Gravity Formsのテキストエリア */
.wpforms-field-textarea /* WPFormsのテキストエリア */
WordPressページビルダー：
/* Elementor */
.elementor-widget-text-editor textarea
.elementor-text-editor
/* Beaver Builder */
.fl-builder-content textarea
/* Divi Builder */
.et_pb_text_inner textarea
/* Gutenbergブロック */
.wp-block-paragraph textarea
WordPressテーマ固有のセレクタ：
/* Twenty Twenty-Fourテーマ */
.wp-site-blocks textarea
/* Astraテーマ */
.ast-separate-container textarea
/* GeneratePressテーマ */
.inside-article textarea
/* OceanWPテーマ */
.content-area textarea
WordPressのヒント： 多くのWordPressテーマは、次のような一般的なセレクタを使用します：
textarea または input[type="text"]. より具体的なセレクタを使用する前に、これらを最初にテストしてください。
WordPressの警告： WordPressサイトには、HTML構造を変更する複数のプラグインがあることがよくあります。テーマやプラグインの更新後は、必ずセレクタをテストしてください。
WordPressセレクタを段階的に見つける方法：
-
WordPress要素を特定する：
- それは投稿エディタ、コメントフォーム、またはコンタクトフォームですか？
- WordPress管理ダッシュボードにいますか、それともフロントエンドにいますか？
- どのテーマまたはページビルダーが使用されていますか？
-
ブラウザの開発者ツールを使用する：
- テキストエリアまたは入力フィールドを右クリック
- 「要素を検査」を選択
- WordPress固有のクラスまたはIDを探す
-
WordPressクラスを確認する：
- で始まるクラスを探す：
wp-,gutenberg-, またはeditor- - テーマ固有のクラスを確認する
- プラグイン固有のクラスを探す（例：
wpcf7-Contact Form 7用）
- で始まるクラスを探す：
一般的なWordPressプラグインセレクタ：
/* WooCommerce */
.woocommerce textarea
#order_comments
/* Yoast SEO */
#yoast_wpseo_metadesc
#yoast_wpseo_focuskw
/* Advanced Custom Fields */
.acf-field textarea
/* Custom Post Type UI */
.cptui textarea
/* WPオールインポート */
.wpallimport textarea
WordPressマルチサイトの考慮事項：
マルチサイトのヒント： WordPressマルチサイトのインストールでは、サブドメインとサブディレクトリでセレクタが異なる場合があります。特定のサイトでテストしてください。
セレクタのテスト
セレクタが正しく機能することを確認するために、常にテストしてください。
-
ブラウザコンソールを開く：
- 押す F12 開発者ツールを開く
- 次に移動： コンソール タブ
-
セレクタをテスト：
- 入力：
document.querySelector('your-selector-here') - Enterキーを押す
- 要素が返されれば、セレクタは機能しています！
- 入力：
// テスト例：
document.querySelector('#comments') // textarea要素を返すはずです
document.querySelector('.message-box') // そのクラスを持つ要素を返すはずです
document.querySelector('textarea[name="bio"]') // name="bio"のtextareaを返すはずです
ヒントとベストプラクティス
プロのヒント： 可能な限りIDセレクタを使用してください - それらは\
ベストプラクティス： 過度に複雑なセレクタは避けてください。シンプルなセレクタは保守が容易です。
警告： ウェブサイトが動的コンテンツやJavaScriptフレームワークを使用している場合、セレクタが変わることがあります。徹底的にテストしてください！
セレクタの優先順位（最良から最悪）：
- IDセレクタ：
#element-id（最も信頼性が高い） - クラスセレクタ：
.class-name - 属性セレクタ：
input[type="text"] - タグセレクタ：
textarea（最も特異性が低い）
一般的な問題のトラブルシューティング
セレクタが機能しない？
- タイプミスを確認： セレクタは大文字と小文字を区別します
- 要素が存在することを確認： ブラウザコンソールを使用してテスト
- 動的コンテンツを確認： ページ読み込み後にロードされる要素があります
- より簡単なセレクタを試してください： 複雑なパスの代わりにIDまたはクラスを使用してください
複数の要素が一致していますか？
- セレクタをより具体的にしてください： 親要素またはユニークな属性を追加してください
- nth-child を使用:
textarea:nth-child(2)2番目のテキストエリア用 - 一意の識別子を追加: 開発者にターゲット要素にIDを追加するよう依頼
セレクタチェックリスト
Before moving forward, make sure you've completed these steps:
✓ セレクターが見つかりました
✓ テスト済み
✓ 保存済み
説明:
- セレクターが見つかりました： You've identified a working CSS selector using one of the methods above
- テスト済み: You've verified the selector works by testing it in your browser console
- 保存済み: You've recorded the selector in your Helper configuration or saved it for later use
