見出し 1
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
1 ● ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 ◎ ▲ △ ■ (゚∇゚) (^o^) \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´ 〕 (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 1.1
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
2 ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 ▲ ◎ △ ■ ● \^o^/ =(・。.・)= =(゜。.゜)= (゚∇゚) (^o^) (-."-;) 〔`。´ 〕 (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 1.1.1
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
3 ◇ ★ ○ ◆ ◎ 折り畳みメニュー 21 ▲ △ ■ ● ☆ \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´ 〕 (・!・) (>_<) (゚∇゚) (^o^) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 2
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
4 ★ ◎ ○ ◆ 折り畳みメニュー 21 ▲ △ ■ ● ☆ ◇ \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´ 〕 (゚∇゚) (^o^) (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 2.1
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
5 ○ ◆ 折り畳みメニュー 21 ▲ △ ■ ● ☆ ◇ ◎ ★ \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) (゚∇゚) (^o^) 〔`。´ 〕 (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 2.1.1
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
6 ◆ 折り畳みメニュー 21 ▲ △ ■ ● ☆ ◎ ◇ ★ ○ \^o^/ =(・。.・)= =(゜。.゜)= (゚∇゚) (^o^) (-."-;) 〔`。´ 〕 (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 2.1.1.1
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
7 折り畳みメニュー 21 ▲ △ ◎ ■ ● ☆ ◇ ★ ○ ◆ \^o^/ =(・。.・)= (゚∇゚) (^o^) =(゜。.゜)= (-."-;) 〔`。´ 〕 (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 2.1.1.2
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
8 ▲ △ ■ ● ◎ ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 \^o^/ (゚∇゚) (^o^) =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´ 〕 (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 2.1.2
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
9 △ ■ ● ☆ ◇ ★ ○ ◎ ◆ 折り畳みメニュー 21 ▲ \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´ 〕 (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
見出し 2.1.2.1
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
10 ◎ ● ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 ◎ ▲ △ ■ \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) (゚∇゚) (^o^) 〔`。´ 〕 (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
INDEX 3
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
11 ● ◎ ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 ▲ ◎ △ ■ \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´ 〕 (・!・) (>_<) (゚∇゚) (^o^) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
Index 3.1
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
12 ● ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 ▲ △ ■ \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´ 〕 (・!・) (>_<) φ(.. ) (゚∇゚) (^o^) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
Index 3.2
・ このDIV〔背景画像=wttec.gif、幅=100%、内上下左右余白=10px 15px、外上下左右余白=5px 5px〕に、任意のHTML、テキストを記述します。
13 ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 ▲ △ ■ ● \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´ 〕 (゚∇゚) (^o^) (・!・) (>_<) φ(.. ) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*
ホーム へ サンプルページ 折り畳みメニュー 21 oritatami21.htm
見出し(h)作成時、自動的に折り畳みメニューが生成される。 DHTML。 見出し追加、背景画像などのカスタマイズはテキストエディターなどで可。 all 対応。 コピー、編集 し、簡単にWebで応用できまっ、(^ ^)。
関連・詳細情報 : oritatami21a.htm (IE
only 対応)
デモ は、〔 見出しリスト 〕のクリック、”見出し 3.2”などのクリックで。
トップ行へのジャンプは、 マウスオーバーで。
< ご使用方法 >
・ ローカル(=PC)への保存 は、oritatami21.htm 、uparrow.gif を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード 】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 変わってしまった、ファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法 は、oritatami21.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)
: oritatami21.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
HTMLの編集方法
(*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分 を編集し使用。
〔この列ペースト不要〕
シフトJIS使用(削除不可)
ieなどに表示するアイコンファイル名 (削除可)
<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>サンプルページ 折り畳みメニュー 21 </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: -40 px; }
#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)
: oritatami21.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="MS Pゴシック" 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+Tキー" で。 > 見出し
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 ● ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 ◎ ▲ △ ■ \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´
〕 (・!・) (>_<) φ(..
) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪ <br>
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*</p>
</div>
==== この間、説明を省略。 ====
<h2 title="トップ行へジャンプ
= Homeキー、or Alt+Tキー" で。 > 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 ☆ ◇ ★ ○ ◆ 折り畳みメニュー 21 ▲ △ ■ ● \^o^/ =(・。.・)= =(゜。.゜)= (-."-;) 〔`。´
〕 (・!・) (>_<) φ(..
) ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪ <br>
--------------------------------------------------------------------------------------------------------------------------------
*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*</p>
</div>
<!-- ★ 2 ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
< 補足 > 適時参照あれ!。
・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。