かんたん作成.com【HTML,CSS,JavaScript,CGI,PHP】

■かんたんアクセス解析
自作ＣＧＩによるアクセス解析の方法。アクセスログ取得(JavaScript･CGI)～保存(CGI)～集計・解析(CGI)。アクセス解析はアクセスアップや検索エンジン対策(SEO)には必須。

■オークション商品説明かんたん作成
HTMLタグ知識なしで綺麗で目立つオークション出品商品説明を簡単に作成。 Yahooオークション,楽天フリマ,ビッダーズオークション対応。

■アフィリエイト用HTMLテンプレート集
すぐに使えるHTMLテンプレート集。アフィリエイトページを簡単に作成。コピーしてお持ち帰りＯＫ！！

■プログラムかんたん変換
HTMLやプログラム内のタブ・改行・半角スペース等を一括変換/一括削除。自動改行されるブログ等で不要な改行も簡単に削除。

ジャパンサーバ
容量５０ＭＢ・アカウント５０個、ドメイン取得料なし、データ転送料なし、詳しくはＪＰ-ＳＥＲＶＥＲまで。レンタルサーバーが格安の値段！

ネットプラッツ
汎用JPドメイン取得！管理はWEBから楽々！Web管理ページから情報変更が可能。他社で取得したドメインの持込みもＯＫ。登録したドメインは他社サーバーでも利用可

Bfitセキュア
月額３００円でSSLレンタルサーバーあなたのサイトの個人情報は、守られていますか？SSL通信（暗号化通信）を利用することで、あなたのサイトの個人情報を守ります。しかも、月額３００円。

マウスオーバー時にリストを表示（onMouseover, onMouseout, style.display）

<html>
<head>
<title>マウスオーバー時にリストを表示</title>
   <script language="JavaScript">
   <!--
   function openMenu(n) {         //リストを開く
      closeMenu()         //表示中のリストを閉じる
      if(n == 1) {         //リスト１を開く
         li1.style.display = "block";
      }
      else if(n == 2) {      //リスト２を開く
         li2.style.display = "block";
      }
      else if(n == 3) {      //リスト３を開く
         li3.style.display = "block";
      }
   }
   function closeMenu() {         //リストを閉じる
      li1.style.display = "none";
      li2.style.display = "none";
      li3.style.display = "none";
   }
   //-->
   </script>
   <style type="text/css">
   <!--
   body   {
      margin:      0px;
      padding:   20px;
   }
   #li1   {
      top:      49;      /*　表示位置　*/
      left:      20;
   }
   #li2   {
      top:      49;      /*　表示位置　*/
      left:      220;
   }
   #li3   {
      top:      49;      /*　表示位置　*/
      left:      420;
   }
   #li1, #li2, #li3   {
      position:   absolute;
      width:      200px;      /*　リストの幅　*/
      background:   #fff;      /*　背景色　*/
      display:   none;
   }
   #menu   {
      width:      600px;      /*　メニュー全体の幅　*/
      height:      30px;      /*　メニューの高さ　*/
      background:   #fcc;      /*　背景色　*/
      text-align:   center;      /*　センタリング　*/
      cursor:      hand;      /*　カーソルの形　*/
   }
   a   {
      padding:   2px;
      width:      100%;
      height:      100%;
      text-decoration:none;      /*　アンダーライン非表示　*/
   }
   a:hover   {
      background:   #fc9;      /*　背景色（マウスオーバー時）　*/
   }
   //-->
   </style>
</head>
<body>
<table id="menu" border="1" bordercolor="#ff6666" cellspacing="0">
   <tr>
   <td onMouseover="openMenu(1)" onMouseout="closeMenu()">メニューリスト１</td>
   <td onMouseover="openMenu(2)" onMouseout="closeMenu()">メニューリスト２</td>
   <td onMouseover="openMenu(3)" onMouseout="closeMenu()">メニューリスト３</td>
   </tr>
</table>
<table id="li1" border="1" bordercolor="#ff6666" onMouseover="openMenu(1)" onMouseout="closeMenu()">
   <tr><td><a href="../sample/sample1.html">リスト1-1</a></td></tr>
   <tr><td><a href="../sample/sample2.html">リスト1-2</a></td></tr>
   <tr><td><a href="../sample/sample3.html">リスト1-3</a></td></tr>
   <tr><td><a href="../sample/sample1.html">リスト1-4</a></td></tr>
   <tr><td><a href="../sample/sample2.html">リスト1-5</a></td></tr>
</table>
<table id="li2" border="1" bordercolor="#ff6666" onMouseover="openMenu(2)" onMouseout="closeMenu()">
   <tr><td><a href="../sample/sample1.html">リスト2-1</a></td></tr>
   <tr><td><a href="../sample/sample2.html">リスト2-2</a></td></tr>
   <tr><td><a href="../sample/sample3.html">リスト2-3</a></td></tr>
</table>
<table id="li3" border="1" bordercolor="#ff6666" onMouseover="openMenu(3)" onMouseout="closeMenu()">
   <tr><td><a href="../sample/sample3.html">リスト3-1</a></td></tr>
   <tr><td><a href="../sample/sample2.html">リスト3-2</a></td></tr>
   <tr><td><a href="../sample/sample1.html">リスト3-3</a></td></tr>
   <tr><td><a href="../sample/sample2.html">リスト3-4</a></td></tr>
   <tr><td><a href="../sample/sample3.html">リスト3-5</a></td></tr>
   <tr><td><a href="../sample/sample1.html">リスト3-6</a></td></tr>
   <tr><td><a href="../sample/sample2.html">リスト3-7</a></td></tr>
</table>
<p>マウスカーソルが上に来るとメニューが開きます。</p>
</body>
</html>

実行する

当サイトはリンクフリーです。

	<a href="http://www.kantansakusei.com/">かんたん作成.com【HTML,CSS,JavaScript,CGI,PHP】</a>