サンプルページ　　　タブメニュー 6

　ﾄﾞｷｭﾒﾝﾄｲﾝｰDOM
　IFRAME 5
　ﾀﾌﾞﾒﾆｭｰ5
　IFRAME-ﾌﾟﾙﾀﾞｳﾝ
　ｸｰﾙﾊﾞｰ 2

　ﾄｯﾌﾟﾅﾋﾞ14+ﾌﾚｰﾑ
　階層ﾒﾆｭｰ4+ﾌﾚｰﾑ
　折り畳みﾒﾆｭｰ
　ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ9+ﾌﾚｰﾑ
　ｸｰﾙﾊﾞｰ

ｻｲﾄ1
＼^o^／　……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄ2
　=(・。.・)=　……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄ3
　 (*^.^*)　……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄ4
　=(^。^)=　……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄ5
　(ﾟ∇ﾟ)　……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄ6
　=（゜。.゜）=　……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄ7
　φ(.. ) ……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄ8
　（・!・） ……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄ9
　〔｀。´ 〕 ……　……　……
……　……　……
……　……　……
……　……　……

ｻｲﾄX
　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　　　　……　……　……
……　……　……
……　……　……
……　……　……
(;。;)/~~~

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾀﾌﾞﾒﾆｭｰ 6　　tab_menu6.htm

ﾀﾌﾞのｸﾘｯｸでｺﾝﾃﾝﾂを選択。　　　　　　DHTML、CSS。　　　　　　配置、配色、ｺﾝﾃﾝﾂなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、tab_menu6.htm（DHTML、CSS実装ﾌｧｲﾙ）、2220.css（ﾀﾌﾞﾒﾆｭｰ配置、ｻｲｽﾞ設定）、2220.js（ﾀﾌﾞ位置）、2221.js（ﾀﾌﾞ全体位置、配色、ﾒﾆｭｰ文字）、2222.js を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]－[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、などで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、tab_menu6.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1) を、さらに <body>　～　</body> の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と、 (*2) を参考に太字部分の編集を任意に行います。　　　ｶｽﾀﾏｲｽﾞは、それぞれ2220.css（ﾀﾌﾞﾒﾆｭｰ配置、ｻｲｽﾞ設定）の”left:10px;　 /*　ﾀﾌﾞﾒﾆｭｰ横位置 */ 、top:50px; 　 /*　ﾀﾌﾞﾒﾆｭｰ縦位置 */、width:100%; /*　ﾀﾌﾞﾒﾆｭｰWin比幅、絶対値（例）：800px　*/”部分などの値や、2220.js（ﾀﾌﾞ位置）の”top = top + 20;　　　　/*　ﾀﾌﾞ縦位置 */ 、left = left -0;　　　　/*　ﾀﾌﾞ横位置 */、width = width + 15;　　/*　ﾀﾌﾞ幅 */”部分の値や、2221.js（ﾀﾌﾞ全体位置、配色、ﾒﾆｭｰ文字）の”var top = 10;　　/*　ﾀﾌﾞ全体縦位置　*/、var left = 12; 　　 /*　ﾀﾌﾞ全体横位置　*/、var width = 585;　　　 /*　ﾀﾌﾞ全体幅　*/、var tab_off = "#D8CCCC";　　/*　ﾀﾌﾞ色 -ｵﾌ　*/、var tab_on = "#C9C6D8";　　 /*　ﾀﾌﾞ色 -ｵﾝ　*/”部分の値をﾃｷｽﾄｴﾃﾞｨﾀｰで開き編集。　　　　ｱｲｺﾝ画像などの変更は準備した画像ﾌｧｲﾙ名を hogehoge.html などの該当部分に記述。　　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

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

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

　･　関連情報：色記号、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web& Internet Samples、Web Development、XML、DHTMLとは？、ColorTable、HTMLの色指定、色見本。

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

　HTMLの編集方法　

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

〔この列ﾍﾟｰｽﾄ不要〕

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

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

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ　target="_self"
ﾍﾟｰｼﾞ全体　　target="_top"
親ﾌﾚｰﾑ　 target="_parent"

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

記述します。

<title>サンプルページ　　タブメニュー 6</title>

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

　HTMLの編集方法　

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

〔この列ﾍﾟｰｽﾄ不要〕

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

ﾀﾌﾞ番号（ﾀﾌﾞ数の加減は、div id=　単位で。）

ｺﾝﾃﾝﾂ（HTMLを任意に記述します。）　

画像　吹き出し　改行　ﾊｲﾊﾟｰﾘﾝｸの各部分

以下、同様。

</body>の後方に記述。

<p><img src=http://www001.upp.so-net.ne.jp/oka/ bullet3.gif width=12 height=12 alt="IFRAME、CSS、DOM -ｻﾝﾌﾟﾙ"><br>

　<a href='http://www001.upp.so-net.ne.jp/oka/ doc_in_doc2.htm' title="ﾊﾞﾙ～ｰﾝ、吹き出し" target="_blank">ﾄﾞｷｭﾒﾝﾄｲﾝｰDOM</a><br>

　<a href='http://www001.upp.so-net.ne.jp/oka/ iframe5.htm'target="_blank">IFRAME 5</a><br>

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

<font face="MSP Gothic,MS Gothic"><a href="http://www./……/xxx.html" title="吹き出しﾒｯｾｰｼﾞ"><strong><font size="3">ｻｲﾄ1</font></strong></a><br>

</font><font face="MSP Gothic,MS Gothic" size="2"> ＼^o^／　……　……　……<br>……　……　……<br>……　……　……<br>……　……　……<br></font></p>

</div>

<p><font face="MSP Gothic,MS Gothic"><a href="http://www./……/xxx.html" title="吹き出しﾒｯｾｰｼﾞ"><strong><font size="3">ｻｲﾄ2</font></strong></a><br>

</font><font face="MSP Gothic,MS Gothic" size="2">　=(・。.・)=　……　……　……<br>……　……　……<br>……　……　……<br>……　……　……<br></font></p>

</div>

<p><font face="MSP Gothic,MS Gothic"><a href="http://www./……/xxx.html" title="吹き出しﾒｯｾｰｼﾞ"><strong><font size="3">ｻｲﾄ3</font></strong></a><br>

</font><font face="MSP Gothic,MS Gothic" size="2">　 (*^.^*)　……　……　……<br>……　……　……<br>……　……　……<br>……　……　……<br></font></p>

</div>

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

</font><font face="MSP Gothic,MS Gothic" size="2">　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪　　　　……　……　……<br>……　……　……<br>……　……　……<br>……　……　……<br> (;。;)/~~~<br></font></p>

</div>

</body>

</html>

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

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