ホーム へ       サンプルページ  折り畳みリスト 3c1fr(初期折り畳み)  oritatami3c1fr.htm(IFRAME)
折り畳み/展開のリンクメニュー + IFRAME。   アイコン画像付き。    DHTML。      配色、ハイパーリンクなどのカスタマイズはテキストエディターなどで可
、ページ/折り畳みリストのフォント・サイズ固定(CSS)、マウスオーバー作動に変更可。    IE4.x〜、Netscape(展開のみ)     
対応。     コピー、編集し、簡単にWebで応用できまっ。 
デモは、Internet Explorerモード で作動。 ⇒ 設定方法 でお試しあれ!。    カラーメニューのクリックで展開/折り畳み、ハイパーリンク先のオープンなどで。
 
< ご使用方法 >
    
  
・ ローカル(=PC)への保存は、oritatami3c1fr.htm(DHTML実装ファイル)、outline.js(DHTMLソース)
、〔参考画像 : 10app.gif、10bl_r.gif、10blsq.gif、10db_r.gif、10dbbl.gif、10feed.gif、10gb_r.gif、10ir_r.gif、10ob_r.gif、10og_r.gif、10page.gif、10pass.gif、10pr_r.gif、10rd_apple.gif、10ticket.gif、10vl_r.gif、10yl_r.gif 
〕 を右クリック、[対象をファイルに保存]     
- 【ファイルのダウンロード】、【ファイル名を付けて保存】     
- <保存する場所>: ……、などで。    ※: 【Internet Explorer】              
- [ファイル] - [名前を付けて保存]−[ファイルの種類]    
”Webページ、完全”            
……、などで変わってしまったファイル名や、*.html         
中のパスは要修正。
   ・ このDHTMLの実装方法は、oritatami3c1fr.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〜 などで開いて。    非作動時は、<head> 〜 </head> 
の DHTMLや、  <body …… onclick="dynOutline()" 
language="Javascript1.2"> の記述の欠損などを確認。    更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。
 ・ アップロードや作動テストは、hogehoge.html 
と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.jsなども転送/配置し実施。     ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。
 ・ 関連情報 :色記号5 
、〃6、スタイルシートリファレンス、ホームページ開設入門が便利!。   Web Development、Web開発、MSDN 
IE8 HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、IE7、IE6、XML、DHTML。
  
(*1) 
: oritatami3c1fr.htm (例)        挿入先の  <head> 〜     
</head>の、〜部分にペーストします。
  
    |  | HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 | 
  
    |  | 〔この列ペースト不要〕 シフトJIS使用(削除不可) ieなどに表示するアイコンファイル名(削除可) 
	<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>サンプルページ    折り畳みリスト3c1fr</title>
 
	<!--webbot bot="HTMLMarkup" startspan --><!-- ☆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
 <style type="text/css"><!--
 li {
 MARGIN-TOP: 1px; MARGIN-LEFT: -22px
 }
 --></style>
 
 <script>
 function jump(parts){
 if(parts.selectedIndex!=0)
 open(parts.options[parts.selectedIndex].value);
 }
 </script>
 <script language="JavaScript" fptype="dynamicoutline">
 <!--
 function dynOutline() {}
 //-->
 </script>
 <script language="JavaScript1.2" fptype="dynamicoutline" src="outline.js">
 </script>
 <script language="JavaScript1.2" fptype="dynamicoutline" for="document" 
	event="onreadystatechange()">
 <!--
 initOutline()
 //-->
 </script>
 <!-- ☆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
 <!--webbot bot="HTMLMarkup" endspan -->
 
 | 
(*2) 
: oritatami3c1fr.htm (例)        挿入先の  <body> 〜     
</body> の、〜 
部分にペーストします。
    
  
  
    
    |  | HTMLの編集方法 | (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 | 
  
    |  | 〔この列ペースト不要〕 追記
 マウスオーバー作動は、onMouseover で。 ※:色記号、2  配置 サイズ 背景色 吹き出し 非透明度(0〜100)
  
 
    
    折り畳みリストのフォント指定 -1/2メニュー背景文字色 アイコン画像
 サイト名(メニュー) 任意コメント(説明など)
 iframe name=ターゲット URL サイト名
 吹き出し、バル〜ン
 以下同様に編集。 メニュー数の加減は、 <li>〜 </li> 単位で。 ※:色記号、2 を獲得スル。   | <!--webbot 
    bot="HTMLMarkup" startspan --><body   onclick="dynOutline()" language="Javascript1.2">
 <!-- ★ --- 折り畳みメニューの、位置調整のためのDIV有りは、 ↓ この間をコピー&ペーストします。 -->
 <!--               表示枠位置     表示枠サイズ        座標              表示枠背景色 -->
 <div style="position:absolute; top:10; 
    left:10; width:155; 
    height:10; z-index:0; 
    visibility:visible; background-color:#FFFFFF" 
    title="=(゜。.゜)= "  
    STYLE="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=85, FinishOpacity=85)">
 
 <!-- □ ---- 折り畳みメニューは、↑の、 onclick="dynOutline()" と、↓ この間をコピー、編集、ペーストします。 
    ---------- --><table width="150" border="1" cellspacing="0" cellpadding="2" 
    bgcolor="#FFFFF4" style="border-collapse: collapse" 
    bordercolorlight="#F1F0FB" bordercolordark="#D5CED3">
 <tr>
 <td background="wttec.gif">
 <ol dynamicoutline initcollapsed>
 <font size="2" style="font-size: 12px; line-height: 13px">
 <li STYLE="cursor:hand"><span style="background-color: 
    #FB6B01; 
    color: #FFFFFF; list-style-image: url('10dbbl.gif');" title="\^o^//(>_<) - 
    展開/折り畳みしまっ…*。"><b> サイト 1 </b></span> 
    コメント …<ol>
 <li><span style="list-style-image: url('10vl_r.gif');"><a 
    target="frame001" href="http://www./……/xxx.html" 
    title="IFRAMEで開く">サイト11</a></li>
 <li><a target="frame001" href="http://www.playboy.com/playmates/" 
    title="プレイボーイ プレイメイト">Playboy Playmates</a></li>
 <li><a target="frame001" href="http://www.apple.com/quicktime/whatson/" 
    title="アップル - クイックタイム ストリーミング TV チャンネル〔`。´ 〕">Music - Quick Time</a></li>
 ====  この間、説明を省略。  ==== <li><a target="frame001" href="http://www./……/xxx.html">サイト547</a> …</li> <li> …</li>
 </ol>
 </li>
 </ol>
 </li></tr>
 <!--     ↑の、</tr>は、bottomの空白行を非表示にする。 -->
 </ol>
 </font>   ← ※:折り畳みリストのフォント指定 -2/2
 </td>
 </tr>
 </table>
 <!-- □ --- 折り畳みメニュー ↑ この間をコピー、編集、ペーストします。 
    ---------- -->
 
 </DIV><!-- ★ --- 折り畳みメニューの、位置調整のためのDIV有りは ↑ この間をコピー&ペーストします。 -->
 
 <!-- ◇ ------- IFRAME  ↓ この間をコピー、編集、ペーストします。 ---------- -->
 <iframe name="frame001" src="http://www.google.com/intl/ja/" style="position:relative; z-index:10; visibility:visible; 
    top:0; left:153; width:82%; height:98%; border:0 
    solid #766F86; scrolling:auto; marginwidth:1; marginheight:1;"></iframe>
 <!-- ◇ ------- IFRAME  ↑ この間をコピー、編集、ペーストします。 ---------- -->
 
 <!--webbot bot="HTMLMarkup" endspan -->
 <p> </p> | 
< 補足 >    適時参照あれ!。
・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。