サンプルページ　　　ツリーメニュー　25

以下、自由ｺﾝﾃﾝﾂ（HTML）を記述。　　　本例は、説明文。

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾂﾘｰﾒﾆｭｰ 25　　tree_menu25.htm

ﾂﾘｰﾒﾆｭｰ、初期ﾂﾘｰ折り畳み（初期ﾂﾘｰ展開への変更）。　　　　　　DHTML、DHTML Behaviors、HTC、CSS。　　　　　　ﾂﾘｰ構造、ﾊｲﾊﾟｰﾘﾝｸ、ｱｲｺﾝなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。（IEの [互換表示]で。）　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、　【Internet Explorer】- [ﾂｰﾙ] - [互換表示設定] - [互換表示に追加したWebｻｲﾄ] - [hi-ho.ne.jp]で。　　　関連・詳細情報：Internet Explorer互換表示

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、tree25/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、tree_menu25.htm、0033400.htc、0033400.css、0033401.htc を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　※: 変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。　　　

　・　このDHTMLの実装方法は、tree_menu25.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1)を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html をﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と、(*2) 、(*3) を参考に太字部分の編集を任意に行います。　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 8.x～などで開いて。　　　　更新の確認は [F5]ｷｰを押し、ｻｰﾊﾞｰやﾌﾞﾗｳｻﾞｰのｷｬｯｼｭｸﾘｱｰ、最新ﾃﾞｰﾀ読み込み（≠再ｱｸｾｽ）で行います。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.htc、*.css なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

(*1) ：　tree_menu25.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　

ｼﾌﾄJIS使用（削除不可）

互換表示

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

<title>サンプルページ　　ツリーメニュー　25</title>

<LINK REL=STYLESHEET TYPE="text/css" HREF="0033400.css">
<style>
.CollapsingAndHiliting {behavior:url(0033400.htc) url(0033401.htc)}
A {behavior:url(0033401.htc)}
</style>

(*2) ：　tree_menu25.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

背景画像

URL　ﾀｰｹﾞｯﾄ　吹き出し　ﾒﾆｭｰ・ｻｲﾄ名

以下、同様。

右DIVの位置設定。

右DIVの終端、末尾に記述。

<body>

==== この間､説明を省略｡ ====

<tr>
<td bgcolor="#FFFFFF" valign="top" align="left" background="http://www　……　.gif">

<UL>
<LI>　<img border="0" src="http://www.　……　.gif" alt="ここに吹き出し文字を記述します。" width="20" height="21">　<a href="http://www　……　.html" target="_blank" title="最新DHTML・CSS・XML・Java・JavaScript・ﾌﾚｰﾑ・ﾌｫｰﾑｻﾝﾌﾟﾙ　=(^。^)=">太陽風ДζΨΠ∀</a></LI>
<LI CLASS="CollapsingAndHiliting" CHILD="Topics1">ﾒﾆｭｰ　1</LI>
<UL ID="Topics1">
<LI><a href="http://www　……　.htm" target="_blank" title="Microsoft Windows Tree Control　〃。　3DRoundBlue、Greenｱｲｺﾝ + 左右ﾌﾚｰﾑ。">ﾂﾘｰﾒﾆｭｰ15fr</a></LI>
<LI><a href="http://www　……　ｯﾌﾟﾅﾋﾞﾊﾞｰ 9 ﾌﾚｰﾑ</a></LI>

==== この間､説明を省略｡ ====

任意HTMLを記述します。

==== この間､説明を省略｡ ====

</div>

</body>
</html>

(*3) ：　0033400.css （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。

　*.css の編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

ﾒﾆｭｰ　余白
1stﾊｲﾊﾟｰﾘﾝｸ　余白　ｱｲｺﾝ
2ndﾊｲﾊﾟｰﾘﾝｸ　余白　ｱｲｺﾝ

ﾌｫﾝﾄ

UL { font-family:verdana,arial,sans-serif; margin-left:22pt; margin-top:0em; margin-bottom:2 }
UL LI { margin-left:-7pt; list-style-image:url('../rbbl13.gif')}
UL UL LI { margin-left:-13pt; margin-top:.1em; list-style-image:url('../vlbl13.gif')}
#lnkBucketTitle {
font-size:10pt;
color:black;
text-decoration:none;

==== この間､説明を省略｡ ====　

(*3-1) ：0033400.htc （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。

　*.htc の編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

初期ﾂﾘｰ閉じ　※：初期ﾂﾘｰ展開は、下で。

<PUBLIC:PROPERTY NAME="child" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="ExpandCollapse()" />
<PUBLIC:ATTACH EVENT="onload" ONEVENT="Init()" FOR="window" />

<SCRIPT LANGUAGE="JScript">

function Init()
{
runtimeStyle.listStyleImage = "url('../nav_closed.gif')";
element.document.all(child).runtimeStyle.display = "none";

==== この間､説明を省略｡ ====

element.document.all(child).runtimeStyle.display = "none";
}
}
</SCRIPT>

※：　初期ﾂﾘｰ展開　への変更は、太字部分の編集で。

<SCRIPT LANGUAGE="JScript">
function Init()
{
runtimeStyle.listStyleImage = "url('../nav_closed.gif')";

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。