[ﾌﾚｰﾑ表示]　 [ 閉 ]

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾂﾘｰ 19mx　tree19mx.htm　（作成手順・初期 右ﾌﾚｰﾑﾍﾟｰｼﾞ）

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

ﾃﾞﾓは、ｱｲｺﾝや、”ﾌﾚｰﾑ表示”のｸﾘｯｸで。 　　　ﾌﾚｰﾑ閉は、[×]のｸﾘｯｸで。　　※：ﾌﾚｰﾑへの表示制限している外部ﾄﾞﾒｲﾝのﾍﾟｰｼﾞは非表示。 

　

< ご使用方法 >

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

　・　このﾌﾚｰﾑの制作方法は、HNbar.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <html>　〜　</html> に (*1) をﾍﾟｰｽﾄし、ﾌﾚｰﾑｻｲｽﾞなどを、 ﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、互換性の問題を生じません。

　・　このDHTMLの実装方法。　(*2)、(*3) を参考に太字部分の編集を任意に行います。　　(1) ﾌﾚｰﾑ開閉は、tree19lx.htmと、tree19mx.htm を、(2) ﾂﾘｰﾒﾆｭｰは、tree19frx.htmを参照。

　・　初期に表示させる右ﾍﾟｰｼﾞは、【初期・デフォルトでフレームに表示するページ】を参考に、HNbar.htm（左右ﾌﾚｰﾑ）中の記述を、src="naka_bar.htm"（例）から任意のﾌｧｲﾙ名 に変更します。　　　左ﾍﾟｰｼﾞ、src="hidari_bar.htm"も同様に。

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

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

　･　関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web Development、Web開発、MSDN IE8 HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、IE7、IE6、XML、DHTML。

　

(*1) ：　tree19frx.htm （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集、使用します。　　

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

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

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）
ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

　

ﾌﾚｰﾑﾈｰﾑの宣言：target=に記述し使用。

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

 <head>

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<title>サンプルページ　ツリー 19fr</title>

<link REL="SHORTCUT ICON" href="favicon.ico">

</head>

<frameset cols="150,*" framespacing="0" frameborder="0">

<frame src="name="hidari" tree19lx.htm" id="frmMenu" frameborder="0" scrolling="Auto" noresize marginwidth="5" marginheight="0">

<frame src="name="naka" tree19mx.htm" id="frmMain" frameborder="0" scrolling="Auto" marginwidth="5" marginheight="0">

<noframes>

<body>

<p>

ここに、サイト=ページの紹介文などを記述するがよい。　検索エンジンの、”サマリー”に表示されたりしますわ。　検索キーワードも抽出されまっ…*。

</p>

　

</body>

</noframes>

</frameset>

<!-- 　ここから、説明文。　カスタマイズ・編集は、それぞれ下記に該当部分で。

【タイトル】

<title>xxxxxxのページ</title>　　　※：タスクバーや、タイトルバー、お気に入りなどに表示される文字列。　

【枠線】　

frameborder="0"　　　　　　※：1=枠幅　

framespacing="1" 　　　　　※：0 =境界線を掴めなくなります。

【スクロールバー】

scrolling="auto" 　　　　※：auto=スクロールバー自動表示　no =　　〃　　非表示（メニューのフレームなどに使用）　

【フレームサイズ】

scrolling="auto" noresize>　※：固定は、noresize を追加。

rows="220,*"　　　　 　　　※：フレーム行高さ、ピクセル（Winサイズ変化に非変化、解像度で変化）　　　

rows="30％,*"　　 　　　　※：フレーム行高さ、Winサイズ比（スクリーン、Winサイズ変化で変化）

【初期・デフォルトでフレームに表示するページ】

src="xxx.htm"　　 　　　　 ※：同じ階層に配置したファイル名や、別階層、ドメインに配置したURL+ファイル名。

【余白】

marginwidth="5"

ここまで、説明文。　 -->　

　

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

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

※：<body>　部の編集　

ﾌﾚｰﾑ開閉
ﾊﾞｰ背景画像　ﾌﾚｰﾑﾌｧｲﾙ名（遷移先）　吹き出し　ﾌﾚｰﾑｱｲｺﾝ　ﾘﾝｸ文字中ﾍﾟｰｼﾞ

閉じｱｲｺﾝ

 　

<body topmargin="0" leftmargin="5" marginheight="5" marginwidth="5">

<!--　★　-------　ﾌﾚｰﾑ開閉　↓ この間をコピー、編集、ペーストします。 ----------　-->
<table width="100%" border=0 cellspacing=0 cellspan=0 bgcolor="#E6E7EE">
<tr>
<td align="left" background="tab_menu12/tbsv1b.jpg"><a href="tree19frx.htm" style="color:#006093; onclick="return frame()" title="ﾌﾚｰﾑでﾂﾘｰﾒﾆｭｰを表示します。"><img border="0" src="showtoc.gif" title="ﾌﾚｰﾑでﾂﾘｰﾒﾆｭｰを表示します。" width="16" height="16"><span style="text-decoration: none"><font
size="2"> [ﾌﾚｰﾑ表示]</font></span></a><font size="2">　</font><a target="_top" href="tree19mx.htm" style="color:#006093; text-decoration:none;" title="(>_<)　ﾌﾚｰﾑを閉じますよ、…*。"><font
size="2"><img border="0" src="close.gif" title="(>_<)　ﾌﾚｰﾑを閉じますよ、…*。" width="15" height="13"> [&nbsp;閉&nbsp;]</font></a></font></span></td></tr></table>
<!--　★　-------　ﾌﾚｰﾑ開閉　↑ この間をコピー、編集、ペーストします。 ----------　-->
　

　

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

　HTMLの編集方法　  (*3a) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕  　

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

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

<style type= 〜  </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景

body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ
　

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

　

　

　

　

ﾂﾘｰの配色

 　

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px;line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ　　ツリー 19lx</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 div { color: #999999; }

-->

</style>

<script type="text/javascript">

<!--

function init() {

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

</script>

　

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

HTMLの編集方法　  (*3b)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

※：<body>　部の編集　ﾂﾘｰのｽｸﾘﾌﾟﾄ　

ﾌﾚｰﾑ開閉
ﾊﾞｰ背景画像　中ﾍﾟｰｼﾞ（遷移先）　吹き出し　　閉じｱｲｺﾝ
　ﾘﾝｸ文字

　

ﾂﾘｰのｽｸﾘﾌﾟﾄ

ｱｲｺﾝ

ﾒﾆｭｰ　ｻｲﾄ名

折り畳みﾈｽﾄID

　

　

URL　ｻｲﾄ名

以下、同様。

 　

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


<!--　★　-------　ﾌﾚｰﾑ開閉　↓ この間をコピー、編集、ペーストします。 ----------　-->
<table width="180px" border=0 cellspacing=0 cellspan=0 bgcolor="#E6E7EE" style="margin:0px">
<tr>
<td align="right" background="tab_menu12/tbsv1b.jpg"><a target="_top" href="tree19mx.htm" style="color:#006093; text-decoration:none;" title="(>_<)　ﾌﾚｰﾑを閉じ、中ﾍﾟｰｼﾞへ戻りますよ、…*。"><font size="2"><img border="0" src="close.gif" title="(>_<)　ﾌﾚｰﾑを閉じ、中ﾍﾟｰｼﾞへ戻りますよ、…*。" width="15" height="13"> [&nbsp;閉&nbsp;]</font></a> </td>
</tr>
</table>
<!--　★　-------　ﾌﾚｰﾑ開閉　↑ この間をコピー、編集、ペーストします。 ----------　-->
<div class="tree" style="margin-top: 5px">

<div><a href="naka_bar.htm"><img border="0" src="http://　……　 title="=(^｡^)=こんにちは、…*">　☆ ◇ ○ のｻｲﾄ　</a> <i>……</i></div>

<div>├<a href="naka_bar.htm" onclick="return func('xx1')">□ｻｲﾄ　1</a> <i>……</i></div>

<div class="titem" id="xx1">

<div>│├<a href="#" onclick="return func('xx11')">□ｻｲﾄ　11</a> <i>……</i></div>

<div class="titem" id="xx11">

<div>││├<a href="http://www.google.co.jp/">　Google日本</a> <i>……</i></div>

<div>││├<a href="http://www./……/xxx.html">　ｻｲﾄ　112</a> <i>……</i></div>

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

<div> 　 └<a href="http://www./……/xxx.html">　ｻｲﾄ　58</a> <i>……</i></div>

</div>

</div>

</body>

</html>

　

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

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