<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/02/menubuilder.jpg" alt="" title="クールで軽量なCSSメニュー ジェネレーター" width="514" height="204" class="alignleft size-full wp-image-13342" /></p>
<p>かっこいいCSSメニューを作れるサービスは数えきれないほど存在します。</p>
<p>そのなかでも、今回ご紹介するサービスは、デザインがクールな上に、シンプルかつ軽量なCSSメニューを作成できるサービスです。</p>
<!--more-->
<h3 class='header-label'>クールで軽量なCSSメニュー ジェネレーター</h3>
<p>「<a class='web-site-link' href="http://menubuilder.me/" onclick="window.open('http://menubuilder.me/'); return false;">MenuBuilder.me</a>」は、<strong>クールで軽量、そしてシンプルなCSSメニューを作成してくれるサービス。</strong></p><p>デザインのテンプレートも豊富で、サクっと作れる上に、デフォルトとマウスオーバー時の色も指定でき、メニューのスタイルもカスタマイズできるようになっています。</p>
<h4 class='tips'>サンプルCSSメニュー</h4>
<div id="none"><div id="menu1">

	<ul>
    	<li><a href="#"><span>Home</span></a></li>
    	<li><a href="#"><span>About</span></a></li>
    	<li><a href="#"><span>Blog</span></a></li>
    	<li><a href="#"><span>Contact</span></a></li>
	</ul>
</div></div>
<p class="clear">↑このようなCSSメニューのセットをダウンロードできます。</p>
<h4 class='tips'>シンプルながらもカスタマイズ性を保持</h4>
<p><img src="http://web-marketing.zako.org/images/2010/02/menubuilder1.png" alt="" title="menubuilder1" width="400" height="228" class="alignleft size-full wp-image-13351" /><br />↑右側のテンプレートから選択することができ、それを元にデフォルトとマウスオーバー時の色やメニューのスタイル、縦と横を選択することも可能。</p>
<p>プレビューを確認したあとに、ダウンロードすると、HTMLファイルとメニュー用の画像を取得することができます。</p>
<h4 class='tips'>セットの中身</h4>
<p><b>CSS</b></p>
<textarea name="code" class="css" id="code">
	#menu ul,#menu li { margin:0; padding:0; }
	#menu li {list-style:none;float:left;}
	
	#menu a { display:block;margin:0 auto;color:#fff;text-decoration:none; background:url(_right.png) right top no-repeat;}
	
	#menu a span { display:block;text-align:center;background:url(_left.png) left top no-repeat; font:bold 12px/30px Arial, Helvetica, sans-serif;  padding:0 20px; }
	
	#menu a:hover { background-position:right bottom;text-decoration:underline}
	#menu a:hover span { background-position:left bottom;  }
</textarea>

<p><b>HTML</b></p>
<textarea name="code" class="xhtml" id="code">
<div id="menu">

	<ul>
    	<li><a href="http://menubuilder.me"><span>Home</span></a></li>
    	<li><a href="http://menubuilder.me"><span>About</span></a></li>
    	<li><a href="http://menubuilder.me"><span>Blog</span></a></li>
    	<li><a href="http://menubuilder.me"><span>Contact</span></a></li>
	</ul>

</div>
</textarea>
<p><b>メニュー用画像２つ</b></p>
<p><img class="none" src="http://web-marketing.zako.org/images/2010/02/left.png" alt="" title="_left" width="5" height="60" class="alignleft size-full wp-image-13343" /></p>
<p><img class="none" src="http://web-marketing.zako.org/images/2010/02/right.png" alt="" title="_right" width="295" height="60" class="alignleft size-full wp-image-13344" /></p>
<p>試してみたい方は<a class='web-site-link' href="http://menubuilder.me/" onclick="window.open('http://menubuilder.me/'); return false;">MenuBuilder.me</a>へどうぞ。</p>
<p>こういったツールは、とにかくサクっとメニューを作りたいとき、本当に便利ですよね。さらに軽量というのも嬉しいポイントです。</p>
<p>Via：<a class='web-site-link' href="http://delicious.com/url/833961fc2d64a9d29b6ff645f3053c3b" onclick="window.open('http://delicious.com/url/833961fc2d64a9d29b6ff645f3053c3b'); return false;">delicious</a></p>