以下、自由ｺﾝﾃﾝﾂ（HTML）を記述。 本例は、説明文。
ﾎｰﾑ へ ｻﾝﾌﾟﾙﾍﾟｰｼﾞ 折り畳みﾒﾆｭｰ 6 oritatami6.htm
ﾒﾆｭｰ ﾀｲﾄﾙやｱｲｺﾝのｸﾘｯｸでﾒﾆｭｰﾃｰﾌﾞﾙを展開。 展開/折り畳みｱｲｺﾝ付き、初期折り畳み型、ﾀｲﾄﾙﾊﾞｰ数=1。 DHTML。
ﾒﾆｭｰ、ﾘﾝｸ、ﾃｰﾌﾞﾙｻｲｽﾞなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。 all 対応。 ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^
^)。
ﾃﾞﾓは、上の
次の20ｻｲﾄ
のｸﾘｯｸで展開、ﾘﾝｸ先のｵｰﾌﾟﾝで。
< ご使用方法 >
・ ﾛｰｶﾙ（=PC）への保存は、oritatami6.htm、outline.js、1ptrans.gif、bullet3.gif（任意）、collapse.gif、dlc_curve.gif、dlc_fade.gif、expand.gif を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存]
- 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】
- <保存する場所>： ……、などで。 ※: 【Internet Explorer】
- [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全”
……、などで変わってしまったﾌｧｲﾙ名や、*.html
中のﾊﾟｽは要修正。
・ このDHTMLの実装方法は、oritatami6.htm
をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ
1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head> 〜 </head> の任意の行間に (*1)
を、さらに <body> 〜 </body>
の任意の行間に (*2)
をﾍﾟｰｽﾄします。
･ 編集方法は、hogehoge.html を WordPad や SmipleText
などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage
Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ
で開き編集します。 下記の（例） (*1) と、 (*2) を参考に太字部分の編集を任意に行います。 ｱｲｺﾝ画像などの変更は準備した画像ﾌｧｲﾙ名を
、hogehoge.html などの該当部分に記述。
※:
ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。
・ 作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、
Internet Explorer 4.x〜 などで開いて。 更新の確認は、ieやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieで [F5]ｷｰ を押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。
･ ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html
と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像 *.js、なども転送/配置し実施。 ※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html
中のﾊﾟｽは要修正。 FTPなどで変わったﾌｧｲﾙ名は要修正。 ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。
･ 関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。 Web Development、Web開発、MSDN IE8 >HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、IE7、IE6。
(*1)
： oritatami6.htm （例） 挿入先の <head> 〜 </head> の、〜 部分にﾍﾟｰｽﾄします。
|
HTMLの編集方法 |
(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の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>サンプルページ 折り畳みメニュー 6</title>
<!-- ☆ ---------- ↓ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡
---------- -->
<style type="text/css"><!--
LI {
MARGIN-TOP: 2px;
MARGIN-LEFT: -8px
}
--></style>
<!-- ☆ ---------- ↑ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->
|
(*2)
： oritatami6.htm （例） 挿入先の <body> 〜
</body> の、〜
部分にﾍﾟｰｽﾄします。
|
HTMLの編集方法 |
(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
|
〔この列ﾍﾟｰｽﾄ不要〕
ﾒﾆｭｰDIV 位置 幅 高さ ｽｸﾛｰﾙﾊﾞｰ自動 背景画像
罫線
URL ﾀｰｹﾞｯﾄ 吹き出し ﾒﾆｭｰ･ｻｲﾄ名
以下、同様。
展開・折り畳み ﾊﾞｰ
右DIVの位置設定。
右DIVの終端、末尾に記述。
|
<body>
<!--webbot bot="HTMLMarkup" startspan -->
<!-- ■ ---- 位置調整のためのDIV有りは、 ↓ この間をコピー＆ペーストします。 -->
<!-- 表示枠位置 表示枠ｻｲｽﾞ 座標 表示枠背景色 -->
<div style="font:; position:Absolute; top:2; left:2; width:150;
height:100%; overflow:auto; z-index:0; visibility:visible;
background-image: url('wttec.gif');
background-color:#FFFFFF;border-left: #F0F0F4 1px solid; border-top:
#F0F0F4 1px solid; border-right: #E2E2E7 1px solid; border-bottom: #E2E2E7
1px solid;">
<!-- ★ ---------- ↓ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->
<TR WIDTH="100%">
<TD vAlign=top width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="150" border=0
style="border-collapse: collapse" bordercolor="#111111">
<TBODY>
<TR>
<TD vAlign=top width=11 bgColor=#0099ff height=17><IMG height=17
src="dlc_curve.gif" width=11 align=baseline></TD>
<TD vAlign=center align=left width="100%" bgColor=#0099ff><FONT face="MSP
Gothic,MS Gothic" color=#ffffff size=1><B>ﾀｲﾄﾙﾊﾞｰの文字</B></FONT></TD>
<TD align=right width=40 background="dlc_fade.gif"><IMG height=1
src="1ptrans.gif" width=40>
</TD>
</TR>
<TR>
<TD bgColor=#ffffff colSpan=3
background="wttec.gif"><FONT face="MSP
Gothic,MS Gothic" size=1>
<OL style="FONT-WEIGHT: normal; MARGIN-BOTTOM: 0px">
<LI><a style="FONT-WEIGHT: normal" href="http://www.google.co.jp/"
target="_blank" title="最新・超高速ｻｰﾁｴﾝｼﾞﾝ搭載">Google日本語</A><br> =(^｡^)=
ここに、任意のﾃｷｽﾄ、ｺﾝﾃﾝﾂを記述。<br></LI>
<LI><a style="FONT-WEIGHT: normal"
href="http://www.pat.hi-ho.ne.jp/oka_tosho/image_change14.htm"
target="_blank" title="縮小画像の横ｽｸﾛｰﾙ、ｸﾘｯｸで拡大画像などを開く。">画像切り替え14</a>
==== この間､説明を省略｡ ====
<P style="MARGIN-TOP: 7px; LEFT: -30px; MARGIN-BOTTOM:
7px; POSITION: relative"><A style="TEXT-DECORATION: none"
onclick=ToggleList() href="javascript:;"><IMG id=oListToggle
src="expand.gif" align=absMiddle border=0 width="16" height="16"><b> <font
face="MSP Gothic,MS Gothic" size="2"><span style="color: #FFFFFF;
background-color: #9897A1" title="＼^o^／/(>_<) - 展開/折り畳みします。">
次の20ｻｲﾄ</span></font></b></A><b><font face="MSP Gothic,MS Gothic"
size="2"><font color="FFFFFF"><span style="background-color: #9897A1">
</span></font></font></b></P>
<LI id=hli style="DISPLAY: none"><A style="FONT-WEIGHT: normal"
href="" target="_top" title="ﾍﾟｰｼﾞ全体で開く">
太陽風ДζΨΠ∀2</A></LI>
<LI id=hli style="DISPLAY: none"><A style="FONT-WEIGHT: normal"
href="http://www./……/xxx.html" target="_blank" title="ﾊﾞﾙｰﾝ">
ｻｲﾄ 26</A></LI>
==== この間､説明を省略｡ ====
}
}
}
</SCRIPT>
</TD></TR></TBODY></TABLE></TD>
<TD vAlign=top width=15></TD>
</TR>
<TR>
<!-- ★ ---------- ↑ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->
</div>
<!-- ↓ 右DIVの位置設定。 -->
<div style="position: absolute; left:160px; top:10px;">
<!-- ■ ---- 位置調整のためのDIV有りは ↑ この間をコピー＆ペーストします。 -->
<!--webbot bot="HTMLMarkup" endspan -->
以下、自由ｺﾝﾃﾝﾂ（HTML）を記述。 本例は、説明文。
==== この間､説明を省略｡ ====
<!-- ★ ----- 右DIVの終端、末尾に ↓ を記述します｡ ---------- -->
</div>
<!-- ★ ----- 右DIVの終端、末尾に ↑ を記述します｡ ---------- -->
</body>
</html>
|
< 補足 > 適時参照あれ！。
・ Wordpad によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。
