ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　折り畳みﾒﾆｭ 12c　　oritatami12c.htm

ｸﾘｯｸ選択階層のみ展開する、折り畳みﾒﾆｭｰ。　　　　　DHTML。　　　　　　 ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。 　　　関連・詳細情報 ：oritatami12.htm（ ﾏｳｽｵｰﾊﾞｰ作動版）

ﾃﾞﾓは、”ｻｲﾄ　1”などのｸﾘｯｸで。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、oritatami12c.htm、23300.js、menuoff.gif、menuon.gif、rbbl13.gif を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、どで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、oritatami12c.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などで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

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

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

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

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

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

　　ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ

同じﾌﾚｰﾑ　target="_self"
ﾍﾟｰｼﾞ全体　　target="_top"
親ﾌﾚｰﾑ　 target="_parent"

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

　

ﾍﾟｰｼﾞのﾘﾝｸ文字色　背景色　下線有無

　ﾒﾆｭｰ文字色　ﾌｫﾝﾄ　ｻｲｽﾞ　下線有無

　

　

 　

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

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

<base target="_blank">

　

　

<title>サンプルページ　　折り畳みメニュー 12c</title>

　

<!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　-->
<style type="text/css"><!-- A:hover {
COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none
}
A {
TEXT-DECORATION: underline
}
A.roll {
COLOR: #54006C; font-family:Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none;
}
A.roll:hover {
COLOR: #8000e2; TEXT-DECORATION: underline
}
A.nav {
COLOR: #54006C; font-family:Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none;
}
A.nav:hover {
COLOR: #8000e2
--></style>
<LINK rel=stylesheet href="" type=text/css>
<SCRIPT language=JavaScript src="23300.js"></SCRIPT>
<SCRIPT language=JavaScript>

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


//-->
</SCRIPT>
<!--　★　-----------　↑ この間をコピー＆ペーストします。 ------------　-->

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

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

※：<body>　部の編集　背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

DIV配置　ｻｲｽﾞ

非透明度（0〜100）

　

ｸﾘｯｸで展開/折り畳み

背景色　文字色　ﾌｫﾝﾄ　ｻｲｽﾞ　吹き出し　ﾒﾆｭｰ名

ｱｲｺﾝ画像　ｻｲｽﾞ　URL　ﾀｰｹﾞｯﾄ　l

ｻｲﾄ名

　以下、同様にﾊｲﾊﾟｰﾘﾝｸの加減、編集を。

　

 　

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!--webbot bot="HTMLMarkup" startspan -->
<!--　■　----　位置調整のためのDIV有りは、　↓ この間をコピー＆ペーストします。 -->
<!-- 　　　　　　　　　　　　 　　　表示枠位置　　　　表示枠ｻｲｽﾞ　　　 　座標　　　　　　　　　　　　　　表示枠背景色 -->
<div style="position:absolute; top:10; left:10; width:140; height:100; z-index:0; visibility:visible; background-color:#F8F5F5" title="＼^o^／" STYLE="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=90, FinishOpacity=90)">
<!--　☆　----------　↓ この間をコピー、編集、ペーストします。 ----------　-->
<div class="NV0" id="TP">
<div>
<font face="Tahoma" size="2">
<div class="NV1" id="RR" onclick="clikker1(RR2,BB2,CC2,DD2,RRp,BBp,CCp,DDp);" onmouseout="msout(1)" onclick="msover(1)">
<img src="menuoff.gif" width="16" height="16" border="0" id="RRp">
<span style=" cursor:hand; background-color: #7D00AF; color: #FCF6FD"><font face="Tahoma" size="2" title="＼^o^／/(>_<) - 展開/折り畳みしまっ…*。">　ｻｲﾄ　1　</font></span></div>
<div class="NV2" id="RR2" style="DISPLAY: none">
<img src="rbbl13.gif" width="13" height="13" border="0"><a class="roll" href="http://windowsmedia.microsoft.com/Mediaguide/Home" target="_blank" title="ﾑｰﾋﾞｰ ♪ ｴﾝﾀｰﾃｲﾒﾝﾄ">　Win Media Home</a><br>

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

<img src="rbbl13.gif" width="13" height="13" border="0"><a class="roll" href="http://www./……/xxx.html" target="_blank">　ｻｲﾄ　46</a><br>
<img src="rbbl13.gif" width="13" height="13" border="0"><a class="roll" href="http://www./……/xxx.html" target="_blank">　ｻｲﾄ　47</a><br>
</font>
</div>
</div>
<!--　☆　----------　↑ この間をコピー、編集、ペーストします。 ----------　-->
</DIV>
</DIV>
<!--　■　----　位置調整のためのDIV有りは　↑ この間をコピー＆ペーストします。 -->
<!--webbot bot="HTMLMarkup" endspan i-checksum="11346" -->

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

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