RGB - 色記号
WMedia Guide
BIGLOBE ストリーム
comfm Radio
Quick Time Music
RealGuide
Radio Station
Fashion TV
ショックウェーブ ホーム
サウンド1w
未設定
WMedia Guide(日)
サイト 21
サイト 22
サイト 23
サイト 24
サイト 25
サイト 26
サイト 27
サイト 28
サイト 29
サイト 210
サイト 211
サイト 212
サイト 31
サイト 32
サイト 33
サイト 34
サイト 35
サイト 36
サイト 37
サイト 38
サイト 39
サイト 310
サイト 311
サイト 312
サイト 41
サイト 42
サイト 43
サイト 44
サイト 45
サイト 46
サイト 47
サイト 48
サイト 49
サイト 410
サイト 411
サイト 412
サイト 51
サイト 52
サイト 53
サイト 54
サイト 55
サイト 56
サイト 57
サイト 58
サイト 59
サイト 510
サイト 511
サイト 512
以下、自由コンテンツ(HTML)を記述。   本例は、説明文。

ホーム へ       サンプルページ  折り畳みメニュー 7  oritatami7.htm(基本)

折り畳みメニュー、選択メニューのみ展開。    クリック作動、位置指定あり。      DHTML。      メニュー、リンク 、配色、サイズ、位置などのカスタマイズはテキストエディターなどで可。    Internet Explorer5.x〜 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、”メニュー 1”などをクリック、メニューの展開/折り畳み 、リンクオープンなどで。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、oritatami7.htmdd_down.gif を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、oritatami7.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などで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 >HTMLとCSS開発ツールでサイトを修正スクリプトデバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6

(*1) : oritatami7.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※: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:#FFF; }
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>サンプルページ  折り畳みメニュー 7</title>

<!-- ★ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->

<style type="text/css"><!--

.

.menutitle{           /* タイトル  */

cursor:pointer;         /* カーソル  */

margin-bottom: 1px;     /* 外余白 */

background-color:#CECAD5;  /* 背景色 */

color:#2B0008;        /* 文字色 */

width:120px;         /* 幅   */

padding:1px;         /* 内余白 */

text-align:center;      /* 文字中央配置 */

font-weight:normal;     /* 書体  */

border:1px solid #B6B6B7;  /* 実線 罫線  */

}

.submenu{           /* メニュー  */   

margin-bottom: 2px;     /* 外余白 */

background-color:#EEEDF0;   /* 背景色 */

border:1px solid #B6B6B7;   /* 罫線  */

--></style>

<script type="text/javascript">

====  この間、説明を省略。  ====

</script>

<!-- ★ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- --> 

 

(*2) oritatami7.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)

 

配置

背景透過性(小:透明増、0〜100)

 

 

 

クリック作動 アイコン画像 〃サイズ(削除可) アイコンサイズ メニュー

 

URL 吹き出し サイト名

以下、同様にメニュー、リンクを加減・編集。

 

 

 

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

<!-- ■ ---- 位置調整のためのDIV有りは、 ↓ この間をコピー&ペーストします。 -->

<!--               表示枠位置     表示枠サイズ      座標              画像表示枠背景色 -->

<div style="position:absolute; top:10; left:10; width:120; height:100; z-index:0; visibility:visible; background-color:#ffffff"; title="=(゜。.゜)=" STYLE="filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90, FinishOpacity=90)">

<!-- ◆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->

<!-- Keep all menus within masterdiv-->

<div id="masterdiv">

<div class="menutitle" onClick="SwitchMenu('sub1')"><img src="dd_down.gif" width="25" height="11">  メニュー 1</div>

<span class="submenu" id="sub1">

<a href="rgb2.htm" title="16進コードの獲得、モニター。" target="_blank">RGB - 色記号</a><br>

<a href="http://windowsmedia.microsoft.com/mg/home.asp?" title="メッセージムービー・♪・エンターテイメント・Radio - マルティメディア" target="_blank">Windows Guide</a><br>

====  この間、説明を省略。  ====

<div class="menutitle" onMouseover="SwitchMenu('sub2')"><img src="dd_down.gif" width="25" height="11">  メニュー 2</div>

<span class="submenu" id="sub2">

====  この間、説明を省略。  ====

<a href="http://www./……/xxx.html" title="メッセージ" target="_blank">サイト 57</a>

</span>

</div>

<!-- ◆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

</DIV>

<!-- ■ ---- 位置調整のためのDIV有りは ↑ この間をコピー&ペーストします。 --> 

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

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。