必要な文書を開き、ウィンドウ／DOM を選択して DOM パネルを開きます。
最終更新日 :
2021年4月27日
ライブビューでエレメントをマップするか、HTML マークアップを使用して CSS デザイナーで適用されたセレクターを使用することにより、DOM パネルを使用して HTML 構造を編集する方法について説明します。
DOM パネルには静的および動的コンテンツのインタラクティブな HTML ツリーが表示されます。 このビューでは、HTML マークアップや CSS デザイナーで適用されたセレクターを使用して、ライブビューでエレメントを視覚的にマッピングできます。 DOM パネルでは、HTML 構造を編集することもできます。変更はライブビューにすぐに反映されます。
DOM パネルを開くには、ウィンドウ／DOM を選択します。 または、キーボードのキー（Ctrl+/ キー（Windows）、Command+/ キー（Mac OS））を使って DOM パネルを開くこともできます。
エレメントをドラッグしてライブビューに直接挿入するとき、エレメントをドロップする前に </> アイコンが表示されます。 このアイコンをクリックして DOM パネルを開き、ドキュメント構造内の適切な位置にエレメントを挿入することができます。 詳しくは、ライブビューにエレメントを直接挿入するを参照してください。
コードビューまたはデザインビューから DOM パネルを開くと、静的エレメントのみが表示され、ライブビューから開くと、静的および動的エレメントの両方が表示されます。
可変グリッドドキュメントでは、DOM パネルで HTML DOM 構造が視覚化されるのみであり、HTML 構造を編集することはできません。
メモ
DOM パネルで編集できるのは、静的コンテンツのみです。 読み取り専用または動的エレメントは、暗いグレーの網かけで表示されます。
DOM パネルは、ユーザーインターフェイス上の好きな場所に配置できます。 また、他のパネルとドッキングすることもできます。
DOM パネルの使用方法
ライブビューに切り替えて、検証または編集するエレメントをクリックします。
- 選択したエレメントの HTML マークアップが、DOM パネルで強調表示されます。
- 適用されているセレクターが CSS デザイナーで強調表示されます。
- 関連するコードがコードビューで強調表示されます。
- 関連するタグがタグセレクターで青く強調表示されます。
また、DOM パネルで HTML エレメントを選択することもできます。 DOM パネルでエレメントをクリックして、次の操作をおこなえます。
- ライブビューでは、該当のエレメントにスクロールします。
- コードビュー開いている場合、コードビューではエレメントに対応するコードにスクロールします。
- CSS デザイナー（セレクターペイン）では、対応する一番近いセレクターにスクロールします（ライブビューでエレメントをクリックした場合と同様）。
- タグはタグセレクターで強調表示されます。
この複数のビューと CSS デザイナーの同期により、選択しエレメントに関連付けられた HTML マークアップやスタイル設定を一目で確認できます。
エレメントを必要に応じて編集します（HTML または CSS 編集）。 DOM パネルを使用して HTML マークアップを編集する方法については、DOM パネルを使用した HTML 構造の編集を参照してください。 CSS デザイナーについては、CSS デザイナーを使用したページのレイアウトを参照してください。
DOM パネルを使用した HTML 構造の編集
ページで現在選択されているエレメントが、DOM パネルで強調表示されます。 矢印キーを使用して目的のノードまたはエレメントに移動できます。
ショートカットキー:
- 複製 - Ctrl+D（Windows） / Command+D（Mac OS）
- 削除 - Del または Backspace
- コピー - Ctrl+C（Windows） / Command+C（Mac OS）
- ペースト - Ctrl+V（Windows） / Command+V（Mac OS）
- 取り消し - Ctrl+Z（Windows） / Command+Z（Mac OS）
- やり直し - Ctrl+Y（Windows）/ Command+Y（Mac OS）
- エレメントまたはノードを選択するには、エレメントまたはノードをクリックします。 エレメントまたはノードを展開するまたは折りたたむには、HTML タグをクリックするか、タグの横にあるセレクターをダブルクリックします。
- エレメントまたはノードを複製するには、エレメントまたはノードを右クリックし、「複製」をクリックします。 複製するエレメントに ID が関連付けられていると、新しい（複製された）エレメントの ID は増分されます。
- エレメントまたはノードをコピーするには、エレメントまたはノードを右クリックし、「コピー」をクリックします。 子を持つエレメントをコピーすると、子エレメントもコピーされます。
- エレメントまたはノードをペーストするには、コピーしたエレメントをネストするエレメントまたはノードをクリックします。 次に、エレメントまたはノードを右クリックし、「ペースト」をクリックします。
- コピーしたエレメント特定のエレメントやノードの子として貼り付けるには、エレメントまたはノード（親）を右クリックし、「子としてペースト」をクリックします。
- エレメントを移動または再配置するには、DOM パネル内の必要な位置にエレメントをドラッグします。
ドラッグしたエレメントの位置を示す緑の線が表示されます。 グレーで強調表示されたエレメント（リファレンスエレメント）をドロップすると、ドロップしたエレメントはリファレンスエレメントの最初の子として配置されます。
- エレメントまたはノードを削除するには、エレメントまたはノードを右クリックし、「削除」をクリックします。
DOM パネルで実行した操作は、取り消す（Ctrl/Command+Z）こともやり直す（Ctrl/Command+Y）こともできます。
複数のエレメントで前述の編集操作を実行するには、DOM パネルで複数のエレメントを選択します。
- Shift キーを押しながら、必要な連続した選択範囲のエレメントをクリックします
- Ctrl キーを押しながら、必要な連続しない選択範囲のエレメントをクリックします
メモ
通常、ページが編集されると、ドキュメントツールバーの「更新」ボタンが「停止」ボタンに変わり、ページがリロード中であることを示します。 ページがリロードされると、「更新」ボタンが再度出現して、ページの読み込みが完了したことを示します。
重要：ページに JavaScript が含まれている場合、DOM パネルの右クリックメニューはしばらくの間は表示されますが、その後は使用できなくなります。 右クリックメニューを使用するには、ライブビューの表示を非表示（ライブビューのオプション／ライブビューの表示を隠す）にし、JavaScript を無効（ライブビューのオプション／JavaScript を無効にする）にしてください。
DOM パネルでのタグ、クラス、ID の編集
DOM パネルでダブルクリックして、タグ、クラス、ID を編集できます。 クラスまたは ID を追加するには、それらをスペースで区切ります。 クラスまたは ID に関連付けられていないタグについては、タグをダブルクリックした後、クラスまたは ID の名前を入力します。
タグ、クラス、ID 名の入力を開始すると、コードヒントが表示されます。 クラスのヒントに絞り込むには、最初にピリオドを入力します。 ヒントの ID のみを表示するには、最初にハッシュ（#）を入力します。
DOM パネルでのエレメントの挿入
次のいずれかの方法で、DOM パネルを使用して Web ページに新しいエレメントを挿入できるようになりました。
- DOM パネルでスペースキーを押すか、必要なエレメントの横の挿入アイコンをクリックします。 表示されるポップアップで、いずれかのオプションをクリックします。 複数のエレメントをタグで囲み、必要なエレメントを選択し、挿入オプションから「折り返しタグ」を選択します。
- 挿入パネルで目的のエレメントをクリックし、DOM パネルにドラッグします。 エレメントの挿入場所を示すライブガイドが表示されます。 目的の場所にエレメントをドロップします。
DOM パネルを使ってタグを挿入するとき、デフォルトの（プレースホルダー）テキストと、タグに必要な属性も挿入されます。
- 次のタグのいずれかを挿入して変更をコミットすると、コード、ライブ、デザインビューにデフォルトテキストが挿入されます：
div、header、nav、aside、article、section、footer、h1-h6、hgroup - table タグを挿入して変更を確定した場合、3X3 テーブルが挿入されます。
- embed または img タグを挿入して変更を確定すると、ファイルを選択ダイアログボックスが表示され、適切なファイルを選択するよう求めるメッセージが表示されます。
- meta タグを挿入して変更を確定すると、次のコードがコードビューに追加されます。<meta name="" content="">
- figure タグを挿入して変更を確定すると、figure タグとネストされた figcaption が挿入されます。
- ul または ol タグを挿入して変更を確定すると、ol/ul タグとネストされた li タグが挿入されます。
