<p class="thumb"><img src="http://web-marketing.zako.org/images/Pure-CSS-Menu.jpg" alt="オンラインでクールなCSSメニューを作れる「Pure CSS Menu」" title="オンラインでクールなCSSメニューを作れる「Pure CSS Menu」" width="514" height="204" class="alignnone size-full wp-image-9323" /></p><p>かっこいいドロップダウンのCSSメニューを作りたいというとき、色々なところで作り方を調べたりするかと思います。</p><p>そんなときに手っ取り早くクールなCSSメニューを作れてダウンロードして使えるサービスをご紹介。</p><!--more--><h3 class='header-label'>オンラインでクールなCSSメニューを作れる「Pure CSS Menu」</h3><p>「<a class="web-site-link" href="http://purecssmenu.com/" onclick="window.open('http://purecssmenu.com/'); return false;">Pure CSS Menu</a>」は、<strong>オンラインでダウンロードしてそのまま使えるドロップダウンCSSメニューを作れるサービス。</strong>日本語も問題なく設定できます。</p><h4 class='tips'>サンプルCSSドロップダウンメニュー</h4><iframe src="http://web-marketing.zako.org/test/cssmenu1/" scrolling="no" frameborder="0" width="522" height="150"></iframe><p>↑「製品情報」→「サポート」→「サポートセンター」のようにマウスオーバーで注釈を付ける設定も可能。</p><h4 class='tips'>サンプルCSSドロップダウンメニューその２</h4><iframe src="http://web-marketing.zako.org/test/cssmenu2/" scrolling="no" frameborder="0" width="522" height="150"></iframe><p>↑このようなプルダウンメニューがオンラインでカンタンに出来てしまいます。</p><h4 class='tips'>ドロップダウンメニューの作り方</h4><p class="picture2"><img src="http://web-marketing.zako.org/images/Pure-CSS-Menu1.jpg" alt="Pure-CSS-Menu" title="Pure-CSS-Menu" width="522" height="318" class="alignnone size-full wp-image-9325" /> ↑<a class="web-site-link" href="http://purecssmenu.com/" onclick="window.open('http://purecssmenu.com/'); return false;">Pure CSS Menu</a>のページを開いて、プレビューを見ながら設定することが出来ます。設定するのはメニューの文言とフォント、デザイン（テンプレートから選択可能）だけで、出来上がったらダウンロード。</p><p class="picture2"><img src="http://web-marketing.zako.org/images/Pure-CSS-Menu2.jpg" alt="ダウンロードした画像とHTMLファイル" title="ダウンロードした画像とHTMLファイル" width="522" height="134" class="alignnone size-full wp-image-9326" /> ↑ダウンロードして解凍すると、中にはCSSとHTMLタグが書かれたHTMLファイルと画像のセットが入っています。</p><p class="picture2"><img src="http://web-marketing.zako.org/images/Pure-CSS-Menu3.jpg" alt="Pure-CSS-Menu3" title="Pure-CSS-Menu3" width="522" height="203" class="alignnone size-full wp-image-9327" /> ↑CSSを別ファイルにしたい場合は、HTMLファイルを開いてCSSの部分を自分のCSSファイルへ貼り付け、メニューのHTMLタグを自分のサイトの表示させたい部分へ貼り付けます。</p><h4 class='tips'>全８種類のテンプレートデザイン</h4><p class="picture2"><img src="http://web-marketing.zako.org/images/Pure-CSS-Menu4.jpg" alt="全8種類のテンプレートデザイン" title="全8種類のテンプレートデザイン" width="522" height="414" class="alignnone size-full wp-image-9328" /> ↑横型ナビゲーションが６種類、縦型も２種類用意されているので、デザインに自信がなくても心配ありません。</p><p>試してみたい方は<a class="web-site-link" href="http://purecssmenu.com/" onclick="window.open('http://purecssmenu.com/'); return false;">Pure CSS Menu</a>へどうぞ。</p><p>しかし、どんどんカンタンにクオリティの高いデザインが出来るようになってきますよね。自分でこなす中小零細企業の経営者にも喜ばれそうなツールのひとつになりそう。</p><p>Via：<a class="website-link" href="http://delicious.com/url/6b3c5d79b7204f007361a5807653a53c" onclick="window.open('http://delicious.com/url/6b3c5d79b7204f007361a5807653a53c'); return false;">delicious</a></p>