サンプルページ　　　ツリー 19

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

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

ﾂﾘｰﾒﾆｭｰ、編集容易。　　　　　　DHTML。　　　　　　ﾒﾆｭｰ、ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

< ご使用方法 >

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

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

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

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

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

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

　HTMLの編集方法　

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

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

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

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

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

ﾂﾘｰ配色

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

<style type="text/css">
<!--
body { background-color: #F8F5F5; }
.tree { line-height: 94%; white-space: nowrap; font-family: "MS UI Gothic,Verdana,MSP Gothic,MS Gothic"; margin-left: 3px; }
.tree a:link { color:#55006C; background-color:#f3edee; text-decoration:none; }
.tree a:visited { color:#4C423A; background-color:#F3F2F4; text-decoration:none; }
.tree a:hover { color:#8000e2; background-color:#E8E5E9; text-decoration:underline; }
.tree a:active { color:#00B136; background-color:#E1DDE9; text-decoration:underline; }
.tree i { color: #aaaaaa; }
.tree div { color: #999999; }

====　　この間、説明を省略。　　====

}
// -->
</script>

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

　HTMLの編集方法　

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

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

※：<body>　部の編集　

吹き出し

背景画像

　
URL　ｱｲｺﾝ画像
ﾒﾆｭｰ、ｻｲﾄ名
ﾈｽﾄID

以下、同様。

右DIVの位置設定。

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

<body onload="init()" style="padding:px" topmargin="5" leftmargin="5" marginheight="5" marginwidth="5">



<div style="font:normal 10px tahoma; position:relative; top:5; left:5; width:180; height:10; z-index:0; visibility:visible; background-image: url(''); background-color:#F8F5F5" title="=（゜。.゜）="　 STYLE="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=85, FinishOpacity=85)">
<table width="180" border="1" cellspacing="0" cellpadding="2" bgcolor="#FFFFF4" style="border-collapse: collapse" bordercolorlight="#F1F0FB" bordercolordark="#D5CED3">
<tr>
<td bgcolor="#FFFFFF" valign="top" align="left" background="http://xml-xsl.sakura.ne.jp/wttec.gif">

<div class="tree" style="margin-top: 5px">
<div><a href="http://xml-xsl.sakura.ne.jp/index2.html" title="ｺﾒﾝﾄを表示します。"><img border="0" src="http://xml-xsl.sakura.ne.jp/gr_tama15.gif" width="15" height="15" title="ｺﾒﾝﾄを表示します。">　☆ ◇ ○ のｻｲﾄ　</a> <i>……</i></div>
<div>├<a href="http://xml-xsl.sakura.ne.jp/index2.html" onclick="return func('xx1')">□ｻｲﾄ　1</a> <i>……</i></div>
<div class="titem" id="xx1">
<div>│├<a href="#" onclick="return func('xx11')">□太陽風ДζΨΠ∀</a> <i>……</i></div>
<div class="titem" id="xx11">
<div>││├<a href="http://xml-xsl.sakura.ne.jp/oritatami3c.html" title="Java JavaScript DHTML XML CSS ﾌﾚｰﾑｻﾝﾌﾟﾙ･応用方法など">　JavaScript DHTML XML応用</a> <i>……</i></div>

====　　この間、説明を省略。　　====　

任意HTMLを記述します。

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

</div>

</body>
</html>

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

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