Webページの見た目や動作に問題があるとき、最初に確認すべきは「DOM（ドキュメントオブジェクトモデル）」です。
Elementsパネルを使えば、HTMLの構造とCSSスタイルをその場で確認・編集できます。

この章では、よくある開発シナリオを通して、Elementsパネルの使い方を学びましょう。

3.1 セレクタを使った要素の特定

HTMLが複雑になると、目的の要素を探すのが難しくなります。
そんなときは、Elementsパネル上部の虫眼鏡アイコン（Select element）を使いましょう。

操作手順：

1. DevToolsを開いた状態で虫眼鏡アイコンをクリック
2. ページ上の任意の要素にカーソルを合わせてクリック
3. 該当するDOMノードがハイライトされ、Elementsパネル内で自動的にスクロール・選択されます

また、Ctrl + F（macは Command + F）でセレクタを入力し、要素を検索することも可能です。

🔍 ユースケース例：

• #main-header というIDの見出しが表示されない → 該当IDを検索して、CSSで display: none になっていないかを確認

3.2 HTMLをその場で編集する

DevToolsでは、選択した要素のHTMLを直接編集できます。これにより、表示のテストや修正が即座に確認可能です。

編集方法：

• 要素を右クリック → Edit as HTML を選択
• または、ノード名（タグ名）をダブルクリックしてインライン編集

例：

<h1 class="hero-title">旧タイトル</h1>

➡ 以下のように編集して Enter を押すと、その場で反映されます：

<h1 class="hero-title">新しいタイトル</h1>

この変更は一時的なもので、リロードすると元に戻ります。

💡 活用シーン：

• ランディングページの文言を編集してABテストの効果をシミュレーション
• 要素の入れ替え・削除をして、レイアウトが崩れないかを確認

3.3 data-* 属性や ARIA 属性の確認

近年のWebアプリケーションでは、HTML属性によってJavaScriptの動作やアクセシビリティを制御するケースが増えています。
data-* や aria-* 属性は、開発やUI検証において重要な情報源です。

data-* 属性：

カスタムデータ属性で、JavaScript側から読み取って動的な動作を制御します。

<button data-action="submit">送信</button>

➡ button.dataset.action で "submit" を取得できます。

ARIA 属性：

視覚障がい者向けのスクリーンリーダーに情報を伝えるための属性です。

<div role="alert" aria-live="assertive">重要なお知らせ</div>

➡ ページのアクセシビリティ改善に不可欠な要素です。

操作方法：

• Elementsパネルで該当の要素を選択
• 属性を確認・編集（ダブルクリックでキーまたは値を変更、右クリック→Add attribute で追加）

📝 まとめ

Elementsパネルは、Webページを分解・修正・再構築するための実験場です。
DOM構造・属性・スタイルを自由に操作し、リアルタイムに結果を確認できるこのツールを使いこなすことで、バグ調査やUI改善のスピードが大きく向上します。

🔖 補足：編集はあくまで一時的

DevTools上の変更は、ブラウザ上だけに反映される仮の変更です。
本番環境に反映するには、実際のHTMLファイルやテンプレートを更新しましょう。