現場で使えるChrome DevTools実践ガイド 第3章:Elementsパネルを使ったDOM調査と編集

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ファイルやテンプレートを更新しましょう。

mh

Related Posts

現場で使えるChrome DevTools実践ガイド 第13章:拡張機能・Snippetsの活用

現場で使えるChrome DevTools実践ガイド 第12章:ワークスペース連携とファイルのライブ編集

You Missed

Kubernetes Learning 第40章:Kubernetesのアップグレードとバージョン管理 ~安全にバージョンを上げるための基本知識~

  • 投稿者 mh
  • 6月 24, 2025
  • 88 views

Google Cloud Platform エンジニア向け教科書:実践から認定まで : 第13章:ストレージとデータベースの基礎 : オブジェクトストレージ: Cloud Storage(バケット、オブジェクト、ストレージクラス)- あなたの「データ置き場」

  • 投稿者 mh
  • 6月 23, 2025
  • 101 views

Kubernetes Learning 第39章:CRD(Custom Resource Definition)とは?~Kubernetesに“自分専用のリソース”を追加する仕組み~

  • 投稿者 mh
  • 6月 21, 2025
  • 102 views

Google Cloud Platform エンジニア向け教科書:実践から認定まで : 第12章:Cloud CDN(Content Delivery Network):あなたのWebサイトを「世界中のユーザーに超高速で届ける宅配便ネットワーク」

  • 投稿者 mh
  • 6月 20, 2025
  • 119 views

Kubernetes Learning 第38章:Operatorとは? ~Kubernetesに「運用の自動化ロボット」を組み込む仕組み~

  • 投稿者 mh
  • 6月 19, 2025
  • 112 views

Google Cloud Platform エンジニア向け教科書:実践から認定まで : 第11章:Cloud Load Balancing:あなたのGCPリソースを「賢く振り分ける交通整理の達人」

  • 投稿者 mh
  • 6月 18, 2025
  • 124 views