「現在の文書の構造ペイン」の編集履歴(バックアップ)一覧はこちら
「現在の文書の構造ペイン」(2009/02/11 (水) 15:41:08) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
<div class="dummy"></div>
<div id="content_header"></div>
<div id="content_main">
<h1>現在の文書の構造ペイン</h1>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/DocumentTreePane.png" alt="現在の文書の構造ペイン" /><br /><br /><hr /><h5>ここでは編集モードであることを前提に解説しています</h5>
<br /><div class="disc">
編集モードにおいて、ビュー上の任意の場所をマウスでクリックすると、そのとき選択された要素に関連する部分がツリー上に展開されて表示されます。<br /><br />
このように、要素に対して指定されているidやclassが一覧できますので、選択されている要素に対しての文書の構造が一目で把握でき、プロパティリストでの編集対象要素を確認できることにもなります。<br /><br /></div>
<br /><br /><div class="subcontent">
<h6>ツリーの展開</h6>
<div class="disc">ツリー横の展開ボタンが『+』のときはクリックすることでその子ノードを展開することができます。<br /><br />
たとえばビュー上のマウスクリックでは目的の要素が選択しきれなかった場合など、ツリービューからピンポイントで要素を選択することができます。<br /><br /></div>
</div>
<br /><br /><div class="subcontent">
<h6>右クリックメニュー</h6>
<div class="disc">選択中の要素の上で右クリックすると、通常はこのようなメニューが現れます。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/rightmenu_1.png" alt="RightMenu_Normal" /><br /><br />
ここからツリーの開閉操作を細かく指定できます。<br />
また、現在選択している部分のソースの表示も可能になります。<br /><br />
このときのソースの実体は一時的に作成されたテキストファイルですので、任意のエディタで開いてコードのハイライトをさせるといったことはできません。あくまで確認用と捉えましょう。<br /><br /><br />
さらに、選択した要素がiframeなどの子ノードだった場合には右クリックメニューの内容が変化します。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/rightmenu_2.png" alt="RightMenu_Frame" /><br /><br />
『親フレームタグを探す』という項目が追加されて、クリックすることでその親フレームとなる要素へジャンプします。<br /><br />
単純にページの一要素だと思っていたらフレーム内の要素だったというシーンが結構ありますので自動で探してくれるこの機能は便利です。<br /><br />
iframeが選択しにくいときなどにも活用できます。<br /><br /></div>
</div>
<br /><br /><div class="subcontent">
<h6>右上のアイコン</h6>
<div class="disc">
解説するまでもありませんが、左から順に【編集モード】にする、【閲覧モード】にする、【スタイル設定ファイルの管理】ウインドウの呼び出しとなります。<br /><br /></div>
</div>
<br /></div>
<br /><div class="cntr"><a href="http://www15.atwiki.jp/styleshare/pages/74.html">設定内容ペイン:Preview</a> ←| <a href="http://www15.atwiki.jp/styleshare/">Home</a> |→ <a href="http://www15.atwiki.jp/styleshare/pages/76.html">Next:プロパティリストペイン</a></div>
<div class="dummy2"></div>
<div id="content_footer"></div>
<div class="dummy"></div>
<div id="content_header"></div>
<div id="content_main">
<h1>現在の文書の構造ペイン</h1>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/DocumentTreePane.png" alt="現在の文書の構造ペイン" /><br /><ul><li><a href="#p1">はじめに</a></li>
<li><a href="#p2">ツリーの展開</a></li>
<li><a href="#p3">右クリックメニュー</a></li>
<li><a href="#p4">右上のアイコン</a></li>
</ul><br /><hr /><h5>ここでは編集モードであることを前提に解説しています</h5>
<br /><div class="disc" id="p1">
編集モードにおいて、ビュー上の任意の場所をマウスでクリックすると、そのとき選択された要素に関連する部分がツリー上に展開されて表示されます。<br /><br />
このように、要素に対して指定されているidやclassが一覧できますので、選択されている要素に対しての文書の構造が一目で把握でき、プロパティリストでの編集対象要素を確認できることにもなります。<br /><br /></div>
<br /><br /><div class="subcontent" id="p2">
<h6>ツリーの展開</h6>
<div class="disc">ツリー横の展開ボタンが『+』のときはクリックすることでその子ノードを展開することができます。<br /><br />
たとえばビュー上のマウスクリックでは目的の要素が選択しきれなかった場合など、ツリービューからピンポイントで要素を選択することができます。<br /><br /></div>
</div>
<br /><br /><div class="subcontent" id="p3">
<h6>右クリックメニュー</h6>
<div class="disc">選択中の要素の上で右クリックすると、通常はこのようなメニューが現れます。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/rightmenu_1.png" alt="RightMenu_Normal" /><br /><br />
ここからツリーの開閉操作を細かく指定できます。<br />
また、現在選択している部分のソースの表示も可能になります。<br /><br />
このときのソースの実体は一時的に作成されたテキストファイルですので、任意のエディタで開いてコードのハイライトをさせるといったことはできません。あくまで確認用と捉えましょう。<br /><br /><br />
さらに、選択した要素がiframeなどの子ノードだった場合には右クリックメニューの内容が変化します。<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/rightmenu_2.png" alt="RightMenu_Frame" /><br /><br />
『親フレームタグを探す』という項目が追加されて、クリックすることでその親フレームとなる要素へジャンプします。<br /><br />
単純にページの一要素だと思っていたらフレーム内の要素だったというシーンが結構ありますので自動で探してくれるこの機能は便利です。<br /><br />
iframeが選択しにくいときなどにも活用できます。<br /><br /></div>
</div>
<br /><br /><div class="subcontent" id="p4">
<h6>右上のアイコン</h6>
<div class="disc">
解説するまでもありませんが、左から順に【編集モード】にする、【閲覧モード】にする、【スタイル設定ファイルの管理】ウインドウの呼び出しとなります。<br /><br /></div>
</div>
<br /></div>
<br /><div class="cntr"><a href="http://www15.atwiki.jp/styleshare/pages/74.html">設定内容ペイン:Preview</a> ←| <a href="http://www15.atwiki.jp/styleshare/">Home</a> |→ <a href="http://www15.atwiki.jp/styleshare/pages/76.html">Next:プロパティリストペイン</a></div>
<div class="dummy2"></div>
<div id="content_footer"></div>
表示オプション
横に並べて表示:
変化行の前後のみ表示: