フリーソフトコミュ ~国内・海外の無料アプリ紹介~

誰でも簡単に高品位なCSSメニューがWYSIWYGで作成できるソフト : Easy CSS Menu Maker

スポンサーリンク

easycssmenu
Easy CSS Menu Maker (Free Version)」は、Webサイトでよくみるグローバルメニューなどのナビゲーションバーを専用のビジュアル(WYSIWYG)エディタにて誰でも簡単に作成することができ、出来上がったメニューをCSSとHTML(HTML 5 ベース)にて出力することができるWeb制作補助ソフト。

Javascriptを必要とせず、CSS3のみの高品位なデザインとさりげないエフェクトが効いたメニューを31種類のテンプレート(フリーバージョン)から選び、カスタマイズが行える。

また、出力されるメニューのソースは軽量で、動作も早いのが特徴。

HTMLやCSSの理解を深めて、メニューのベースをこの「Easy CSS Menu Maker」で作成していこうとするビギナーユースや、制作時間に余裕がない場合には、なかなか重宝する良ソフトだろう。

ScreenshotEasy CSS Menu Maker

World’s best CSS menu maker. Create beautiful pure CSS drop down menus in minutes!

主な機能・使い方 -Main Features-

まず、起動すると以下のようにメニューを1から自作していくか(Empty)、いくつかサンプルのメニューが入ったデザインテンプレートから選んで作成するかを選が間面が表示される。
easycssmenu-use1

利用可能なテンプレート

「Easy CSS Menu Maker」のフリーバージョンでは、利用できるテンプレートが31種類までに限定されているが、それでもデザインパターンとしては十分な数が提供されてる。

以下はバージョン3.2時点での利用可能なメニューテンプレートの一覧。
easycssmenu-available

サンプルメニュー

今回サンプルで作成したメニューはこちら。
サンプルメニュー1 サンプルメニュー2
サンプルメニュー3 サンプルメニュー4

親メニューの追加とカスタマイズ

親メニューを追加するには、HOMEタブから「Add Item」ボタンをクリックすると、親メニューの末尾にメニューが1つ追加される。
easycssmenu-use2
追加したメニューは、HTMLやCSSの編集を一切必要とせず、タイトル、テキスト寄せ、フォント、メニューのリンク先、ヒント、別窓指定、アイコン画像の挿入などが行える。

追加した各親メニューの順番を入れ替えるには、「Move Back」ボタンと「Move Forward」ボタンで簡単に変更が可能だ。

右側の「Top Menu」の「Style」設定では、メニューのボーダーカラーや背景カラー(グラデーション)の設定が行えるようになっている。
その他のマウスオーバー時のエフェクトオプションはシェアウェア版にて有効となる機能。
easycssmenu-use3

Corners」設定はシェアウェア版にアップグレードすると利用できる。
easycssmenu-use4_2

子メニューの追加

親メニューの配下にサブメニューとして追加する場合は、「Add Submenu」ボタンをクリックするだけで、指定の親メニューのサブメニューとしていくつでも追加可能だ。
easycssmenu-use5
一旦追加したサブメニューの順番を入れ替えるには、「Move Back」ボタン、「Move Forward」ボタンで操作する。

また、サブメニューはさらに階層化して孫メニューとして追加できる。
easycssmenu-use6

さらに、サブメニューのデザインは、別のサブメニュー用テンプレートに変更して更なるカスタマイズが可能だ。
easycssmenu-use6_2

メニュー全体の設定

General」メニューでは、サブメニューがあるメニューの矢印アイコンを画像(組み込みの矢印アイコンもインストールされる)に変更したり、メニュー間のスペースをピクセル単位で指定できる。
easycssmenu-use7

その他、メニューのシャドウ、サブメニューが展開される際のエフェクト(アニメーション)パターンサブメニューの半透明化、メニューに追加する ID属性の値を設定できるメニューがあり、かなり高品位なメニューがいとも簡単にGUIのみで作成できる。
easycssmenu-use8

垂直メニューへの変更

Layout” オプションでは、メニューのレイアウトをいつでも切り替えられる。

レイアウトパターンは、主にサイトの上部にあるグローバルメニューに利用される Horizontal(水平メニュー)、サイドバーメニューに最適な Vertical Left(垂直左寄せメニュー)Vertical Right(垂直右寄せメニュー) から選べる。
easycssmenu-use12

メニューの出力

作成したメニューは、HTMLとCSS、その他素材ファイルにまとめて出力したり、既存のWebページの任意のHTMLソースの箇所に挿入したり、個別のメニューを画像として保存することができる。
easycssmenu-use9

HTMLで出力する場合は、HTMLファイルとその他の素材(CSS、画像、Javascript(※IEや旧ブラウザ用))を同じフォルダに出力するか、サブフォルダに出力するかを選べる。
easycssmenu-use10

出力するメニューを、後から再度編集する必要がある場合は、”I would like to save the menu project file now” にチェックをしてプロジェクトを保存しておく。
easycssmenu-use11

動作環境 -System Requirements-

  • Windows XP / Vista / 7 / 8

Download

URL :
TRACKBACK URL :

LEAVE A REPLY

*
DigiPress

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

COMMENT ON FACEBOOK

Return Top
QR Code Business Card