見出し 1　

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

1　 ● ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ◎ ▲ △ ■ (ﾟ∇ﾟ) (^o^)　＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 1.1

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

2　 ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ▲ ◎ △ ■ ● ＼^o^／　=(・。.・)=　=(゜。.゜)= (ﾟ∇ﾟ) (^o^)　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 1.1.1

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

3　 ◇ ★ ○ ◆ ◎ 折り畳みメニュー 21a ▲ △ ■ ● ☆ ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<) (ﾟ∇ﾟ) (^o^)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 2

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

4　 ★ ◎ ○ ◆ 折り畳みメニュー 21a ▲ △ ■ ● ☆ ◇ ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕 (ﾟ∇ﾟ) (^o^)　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 2.1

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

5　 ○ ◆ 折り畳みメニュー 21a ▲ △ ■ ● ☆ ◇ ◎ ★ ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;) (ﾟ∇ﾟ) (^o^)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 2.1.1

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

6　 ◆ 折り畳みメニュー 21a ▲ △ ■ ●　☆ ◎ ◇ ★ ○ ＼^o^／　=(・。.・)=　=(゜。.゜)= (ﾟ∇ﾟ) (^o^)　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 2.1.1.1

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

7　 折り畳みメニュー 21a ▲ △ ◎ ■ ● ☆ ◇ ★ ○ ◆ ＼^o^／　=(・。.・)= (ﾟ∇ﾟ) (^o^)　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 2.1.1.2

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

8　 ▲ △ ■ ● ◎ ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ＼^o^／ (ﾟ∇ﾟ) (^o^)　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 2.1.2

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

9　 △ ■ ● ☆ ◇ ★ ○ ◎ ◆ 折り畳みメニュー 21a ▲ ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　見出し 2.1.2.1

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

10　 ◎ ● ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ◎ ▲ △ ■ ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;) (ﾟ∇ﾟ) (^o^)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　INDEX 3

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

11　 ● ◎ ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ▲ ◎ △ ■ ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<) (ﾟ∇ﾟ) (^o^)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　Index 3.1

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

12　 ● ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ▲ △ ■ ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. ) (ﾟ∇ﾟ) (^o^)　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　Index 3.2

　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。

13　 ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ▲ △ ■ ● ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕 (ﾟ∇ﾟ) (^o^)　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　
-------------------------------------------------------------------------------------------------------------------------------- 　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*

　

　

ﾎｰﾑへ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　折り畳みﾒﾆｭｰ 21a　oritatami21a.htm

見出し(h)作成時、自動的に折り畳みﾒﾆｭｰが生成される。　　　　　　DHTML。　　　　　　見出し追加、背景画像などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　ie only 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、〔 見出しﾘｽﾄ 〕のｸﾘｯｸ、”見出し 3.2”などのｸﾘｯｸで。　 　　ﾄｯﾌﾟ行へのｼﾞｬﾝﾌﾟは、 ﾏｳｽｵｰﾊﾞｰで。

　

< ご使用方法 >

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

　・　このDHTMLの実装方法は、oritatami21a.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 10.x〜 などで開いて。　　　　 更新の確認は、[F5]ｷｰ を押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄ ｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

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

　･　関連情報 ： 色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。　　　Web Development、Web開発、IE10 互換性ｸｯｸﾌﾞｯｸ、〃開発者向けｶﾞｲﾄﾞ、IE API ﾘﾌｧﾚﾝｽ、IE 開発 > HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、XML、〃ﾘﾌｧﾚﾝｽ、DHTML。

　

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

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

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

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

<style type 〜</style>は（削除可）
ﾊｲﾊﾟｰﾘﾝｸ文字色　背景色　下線
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の 〃
ﾍｯﾀﾞｰの 〃
　〃　背景画像

　

   

　

 （削除可）※：target=　いろいろ
同じﾌﾚｰﾑ　target="_self"
ﾍﾟｰｼﾞ全体　　target="_top"
親ﾌﾚｰﾑ　 target="_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:#190049; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
a:active { color:#1F002E; background-color:#C3FEBB; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,メイリオ,MS Gothic,Lucida Sans Regular; font-size: 12px}
--></style>

<style type="text/css"><!--
h1 {color:#6F00BD; background: #E0DCE2 url('tab_menu12/36bar_gr.jpg'); font-family:MS PGothic,MS Gothic; width:100%;}
h2 {color:#12A9C4; background: #E0DCE2 url('bg_slva2r.jpg'); font-family:MS PGothic,MS Gothic; width:100%;}
h3,h4 {color:#029F8E; background: #E0DCE2 url('bg_slva2r.jpg'); font-family:MS PGothic,MS Gothic; width:100%;}
h1,h2,h3,h4,.index { cursor:hand;}
--></style>

<base target="">
<title>サンプルページ　　折り畳みメニュー 21a</title>

<!--　☆ 2　----------　↓ この間をコピー、編集、ペーストします。 ----------　-->
<style type="text/css">
<!--
#TOC { margin:0px; display:inline; border-style:none; background: url('wttec.gif');}
#TOC a.:link { color:#42005E; text-decoration:none }
#TOC a:visited { color:#524A58; text-decoration:none }
#TOC a:hover { color:#FFFFFF; text-decoration:underline }
#TOC a:active { color:#DD79A6; text-decoration:underline }
#TOC li.H1 {
font: normal normal 10pt MS PGothic,MS Gothic; list-style-type: none; margin-left: -40px; }
#TOC li.H2 {
font: normal normal 10pt MS PGothic,MS Gothic; list-style-type: none; line-height:16px; margin-left: -30px; }
#TOC li.H3 {
font: normal normal 10pt MS PGothic,MS Gothic ; list-style-type: none;line-height:16px; margin-left: -20px; }
#TOC li.H4 {
font: normal normal 10pt MS PGothic,MS Gothic; list-style-type: none; line-height:16px;margin-left: -10px; }
#TOC li.H5 {
font: normal normal 10pt MS PGothic,MS Gothic; list-style-type: none; line-height:16px; margin-left: 0px; }
#TOC li.H6 {
font: normal normal 10pt MS PGothic,MS Gothic; list-style-type: none; line-height:16px; margin-left: 10px; }
-->
</style>

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: ################# */

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


for(i = 0; i < document.all.length; i++) {
if (validTagList.indexOf(' '+document.all(i).tagName+' ') > 0) {
alert(i+' '+ document.all(i).tagName +' '+ document.all(i).name +' href='+ document.all(i).href + ' parent='+ document.all(i).parentNode.tagName);
}
}
}
//-->
</script>
<!--　☆ 2　----------　↑ この間をコピー、編集、ペーストします。 ----------　-->
　

　

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

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

※：<body>　部の編集

　

★ 1 = ﾏｳｽｵｰﾊﾞｰでﾄﾌﾟ行へｼﾞｬﾝﾌﾟのｽｸﾘﾌﾟﾄ 

 

　

　

　

　

左位置　非透明度（0〜100）

ｱｲｺﾝ　吹き出し

 

　

　

　

　

折り畳みﾒﾆｭｰﾀｲﾄﾙ　吹き出し

 

　

吹き出し　見出し
幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px　背景画像

 任意のHTML、ﾃｷｽﾄ

以下、同様。

　

　

<body onLoad="buildTOC(),setVariables();checkLocation()">

<!--　★ 1 　-- ↑ OnLoad=" " 部分と、↓ この間をコピー＆ペーストします。 ------------　-->
<a name="top"></a>
<p><font face="ＭＳ Ｐゴシック" size="2"><script LANGUAGE="JavaScript">
/*
Created by Randy Bennet http://home.thezone.net/~rbennett/utility/javahead.htm
Featured on Website Abstraction (http://wsabstract.com)
For this and over 400+ free scripts, visit http://wsabstract.com
*/
function setVariables() {
if (document.layers) {

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

setTimeout("checkLocation()",10);
}
</script> </p>
<div id="object1"
style="position:absolute; visibility:show; left:140px; top:4px; z-index:5" STYLE="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=85, FinishOpacity=85)"><div align="right">
<table width="80" border="1" cellspacing="0" cellpadding="0" bgcolor="#F9F4FF" style="border-collapse: collapse" bordercolorlight="#E2DEE1" bordercolordark="#CFC7CD">
<tr>
<td bgcolor="#FFFFFF" valign="top" align="center"><font size="2">
<a href="#" onMouseOver="location.href='#top'"target="_self"><img border="0" src="uparrow1.gif" title="ﾏｳｽｵｰﾊﾞｰ → このﾍﾟｰｼﾞの先頭行へ。" width="79" height="11"></a><br></font>
</td>
</tr>
</table>
</div></div></font>
<!--　★ 1　-----------　↑ この間をコピー＆ペーストします。 ------------　-->

<!--　★ 2　----------　↓ この間をコピー、編集、ペーストします。 ----------　-->
<!-- Optional anchor for return to TOC -->
<a id=tocPos></a>
<!-- Optional access key (ALT-t) to return to TOC -->
<a href="#tocPos" title="AccessKey: t" accesskey="t"></a>
<!-- Optional button to toggle TOC on/off -->
<input class="index" type = "button" value = "　見出しﾘｽﾄ　" onclick = "toggleTOC()" title="ｸﾘｯｸ = 展開/折り畳み">
<!-- Required div to position TOC -->
<div id=TOC>
</div>

<p>　</p>

<h1 title="ﾄｯﾌﾟ行へｼﾞｬﾝﾌﾟ = Homeｷｰ、or Alt+Ｔｷｰ" で。>　見出し 1</h1>
<div style="position:relative; top:-10; left:0; width:100%; height:10; padding:10px 15px; margin:5px 5px; z-index:0; visibility:visible; background-image: url('wttec.gif'); background-color:#FFFFFF">
　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。
<p>1　 ● ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ◎ ▲ △ ■ ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　<br>
--------------------------------------------------------------------------------------------------------------------------------
　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*</p>
</div>

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

<h2 title="ﾄｯﾌﾟ行へｼﾞｬﾝﾌﾟ = Homeｷｰ、or Alt+Ｔｷｰ" で。>　Index 3.2</h2>
<div style="position:relative; top:-10; left:0; width:100%; height:10; padding:10px 15px; margin:5px 5px; z-index:0; visibility:visible; background-image: url('wttec.gif'); background-color:#FFFFFF">
　・　このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、ﾃｷｽﾄを記述します。
<p>13　 ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21a ▲ △ ■ ● ＼^o^／　=(・。.・)=　=(゜。.゜)=　(-."-;)　〔｀。´ 〕　（・!・）　(>_<)　φ(.. )　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　<br>
--------------------------------------------------------------------------------------------------------------------------------
　*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*</p>
</div>
<!--　★ 2　----------　↑ この間をコピー、編集、ペーストします。 ----------　-->
  

　

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

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