現在の文書の構造ペイン
ここでは編集モードであることを前提に解説しています
編集モードにおいて、ビュー上の任意の場所をマウスでクリックすると、そのとき選択された要素に関連する部分がツリー上に展開されて表示されます。
このように、要素に対して指定されているidやclassが一覧できますので、選択されている要素に対しての文書の構造が一目で把握でき、プロパティリストでの編集対象要素を確認できることにもなります。
このように、要素に対して指定されているidやclassが一覧できますので、選択されている要素に対しての文書の構造が一目で把握でき、プロパティリストでの編集対象要素を確認できることにもなります。
ツリーの展開
ツリー横の展開ボタンが『+』のときはクリックすることでその子ノードを展開することができます。
たとえばビュー上のマウスクリックでは目的の要素が選択しきれなかった場合など、ツリービューからピンポイントで要素を選択することができます。
たとえばビュー上のマウスクリックでは目的の要素が選択しきれなかった場合など、ツリービューからピンポイントで要素を選択することができます。
右クリックメニュー
選択中の要素の上で右クリックすると、通常はこのようなメニューが現れます。
ここからツリーの開閉操作を細かく指定できます。
また、現在選択している部分のソースの表示も可能になります。
このときのソースの実体は一時的に作成されたテキストファイルですので、任意のエディタで開いてコードのハイライトをさせるといったことはできません。あくまで確認用と捉えましょう。
さらに、選択した要素がiframeなどの子ノードだった場合には右クリックメニューの内容が変化します。
『親フレームタグを探す』という項目が追加されて、クリックすることでその親フレームとなる要素へジャンプします。
単純にページの一要素だと思っていたらフレーム内の要素だったというシーンが結構ありますので自動で探してくれるこの機能は便利です。
iframeが選択しにくいときなどにも活用できます。
ここからツリーの開閉操作を細かく指定できます。
また、現在選択している部分のソースの表示も可能になります。
このときのソースの実体は一時的に作成されたテキストファイルですので、任意のエディタで開いてコードのハイライトをさせるといったことはできません。あくまで確認用と捉えましょう。
さらに、選択した要素がiframeなどの子ノードだった場合には右クリックメニューの内容が変化します。
『親フレームタグを探す』という項目が追加されて、クリックすることでその親フレームとなる要素へジャンプします。
単純にページの一要素だと思っていたらフレーム内の要素だったというシーンが結構ありますので自動で探してくれるこの機能は便利です。
iframeが選択しにくいときなどにも活用できます。
右上のアイコン
解説するまでもありませんが、左から順に【編集モード】にする、【閲覧モード】にする、【スタイル設定ファイルの管理】ウインドウの呼び出しとなります。